Shadcn Component Review

Catches the spacing drift and hardcoded colors that slip through when you're moving fast with AI-generated components. Runs a systematic audit against shadcn design patterns, checking data-slot attributes, semantic token usage, gap versus space-y conventions, and theme-specific rules for Vega, Maia, and the other visual styles. Works alongside the official shadcn skill, which enforces rules at generation time. This one reviews what already exists, whether Claude wrote it last week or a teammate copied it from an older project. Particularly good at finding the stuff grep can catch (like gray-500 instead of muted-foreground) and the stuff it can't (like composition anti-patterns or missing responsive breakpoints).

skills.sh installs: 664
GitHub stars: 23
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add mattbx/shadcn-skills --skill shadcn-component-review --agent claude-code

Installs into .claude/skills of the current project.

Files

shadcn Component Review

Systematic audit process for ensuring custom components align with shadcn design patterns, the project's chosen visual style, and modern composition conventions.

How This Complements the Official shadcn Skill

The official shadcn skill (shipped with CLI v4) enforces rules at generation time — telling agents "use gap-* not space-y-*, use semantic colors, use size-* for equal width/height," and so on. That's correct behavior when writing new code.

This skill is for post-hoc audit — reviewing components that already exist (written by Claude, by a teammate, by a previous iteration) against those same rules plus the visual-style-specific patterns that vary by theme (Vega spacing differs from Maia differs from Mira). When the two skills both apply, the official handles forward-generation and this one handles retrospective review. They don't conflict — they check the same rules from different directions.