shadcn-skills

Two agent skills for working with shadcn/ui: one for discovering existing components across the ecosystem before building, one for reviewing custom components against shadcn design patterns.

Both follow the Agent Skills open standard and work with Claude Code, Cursor, Windsurf, OpenAI Codex CLI, Gemini CLI, GitHub Copilot, and other compatible tools.

---

Skills

shadcn-component-discovery

Searches the shadcn component ecosystem before building any custom UI. Activates proactively before Claude writes a table, form, modal, animation, or other common UI pattern — and explicitly when prompted to search registries.

What it covers:

• Live search via the official shadcn MCP (npx shadcn@latest mcp init) or CLI fallback (npx shadcn@latest search)
• Awareness of 30+ community registries beyond the user's configured components.json, organized by specialty (animations, AI interfaces, data grids, accessibility-first, etc.)
• Response format: top 2–3 matches with registry-qualified name, description, and ready-to-run install command
• Graceful handling when no match exists — recommends closest adjacencies and offers to build custom

How it complements the official shadcn skill: The official shadcn skill (shipped with CLI v4) searches registries already declared in components.json. This skill's scope is upstream — surfacing registries the user hasn't configured yet, and providing ecosystem-wide awareness when choosing which registries to add.

Example:

User: "Add a data table to show user accounts"

Agent: Before building custom, I found existing options:

       1. @reui/data-grid-table — Full-featured grid with sorting, filtering, pagination
       2. @shadcn/table — Unstyled primitives (pair with TanStack Table for sorting)

       @reui/data-grid-table looks like the fit — install it?

---

shadcn-component-review

Reviews custom components against shadcn design patterns. Activates proactively after writing or modifying a component, and explicitly when asked to review or audit.

What it checks:

• Structure: data-slot attributes, composition vs forking, Radix vs Base UI primitive patterns
• Spacing: gap-* in flex/grid (not space-y-*), Tailwind scale values, size-* for equal dimensions
• Design tokens: semantic colors only (text-muted-foreground, bg-card, etc.) — flags any Tailwind color scale values
• Composability: className via cn(), CVA variant patterns, prop typing
• Responsive/a11y: mobile-first, touch targets, min-w-0, focus-visible states, motion preferences

How it complements the official shadcn skill: The official skill enforces rules at generation time. This skill is for post-hoc audit — reviewing components that already exist, especially ones built before the project standardized on a style, or written by contributors without shadcn context.

Visual styles supported: Vega, Nova, Maia, Lyra, Mira — per-style spacing, radius, and density expectations are applied based on the project's components.json or npx shadcn@latest info --json.

Example:

User: "Review this component"

Agent: ## Review: