两个用于使用 shadcn/ui 的代理技能：一个是在构建前发现生态系统中已有组件，另一个用于根据 Shadcn 设计模式审查自定义组件。

两者都遵循Agent Skills开放标准，支持Claude Code、Cursor、Windsurf、OpenAI Codex CLI、Gemini CLI、GitHub Copilot及其他兼容工具。

---

技能

shadcn-组件-发现

在构建任何自定义 UI 之前，先搜索 shadcn 组件生态系统。在 Claude 编写表格、表单、模态、动画或其他常见 UI 模式之前主动激活——并在提示搜索注册表时明确激活。

内容：

• 通过官方 shadcn MCP（npx shadcn@latest mcp init）或 CLI 备援（npx shadcn@latest search）进行实时搜索
• 了解用户配置的components.json之外的30+社区注册库，按专业（动画、AI界面、数据网格、无障碍优先等）组织
• 响应格式：前2–3个匹配，带有注册表限定的名称、描述和准备安装命令
• 无匹配时优雅处理 — 推荐最接近的邻接并提供定制建造

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.