技能

Skills 会给 Claude Code 之类的 AI 助手提供与项目相关的 shadcn/ui 上下文。安装后，你的 AI 助手就能使用适合你项目的正确 API 和模式，找到、安装、组合并定制组件。

例如，你可以让你的 AI 助手：

• "添加一个带邮箱和密码字段的登录表单。"
• "创建一个设置页面，包含用于更新个人资料的表单。"
• "构建一个带侧边栏、统计卡片和数据表格的仪表盘。"
• "切换到 --preset [CODE]"
• "你能从 @tailark 添加一个 hero 吗？"

该 skill 会读取你项目的 components.json，并向助手提供你的框架、别名、已安装组件、图标库和基础库信息，从而让它一次就生成正确的代码。

安装

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
复制

这会把 shadcn skill 安装到你的项目中。安装后，AI 助手在处理 shadcn/ui 组件时会自动加载它。

了解更多请访问 skills.sh。

包含内容

这个 skill 会为你的 AI 助手提供以下知识：

项目上下文

在每次交互中，这个 skill 都会运行 shadcn info --json，获取你项目的配置：框架、Tailwind 版本、别名、基础库（radix 或 base）、图标库、已安装组件以及解析后的文件路径。

CLI 命令

所有 CLI 命令的完整参考：init、add、search、view、docs、diff、info 和 build。包含标志、dry-run 模式、智能合并流程、预设和模板。

主题与定制

介绍 CSS 变量、OKLCH 颜色、深色模式、自定义颜色、圆角和组件变体的工作方式。包含 Tailwind v3 和 v4 的指导。

注册库编写

如何构建和发布自定义组件注册库：registry.json 格式、项目类型、文件对象、依赖、CSS 变量、构建、托管以及用户配置。

MCP 服务器

shadcn MCP 服务器的设置和工具，它允许 AI 助手从注册库中搜索、浏览和安装组件。

工作原理

• 项目检测 — 当 skill 在你的项目中找到 components.json 文件时就会激活。
• 上下文注入 — 它会运行 shadcn info --json 读取你的项目配置，并把结果注入到助手上下文中。
• 模式约束 — 助手会遵循 shadcn/ui 的组合规则：表单使用 FieldGroup，选项组使用 ToggleGroup，语义化颜色，以及正确的基础库专用 API。
• 组件发现 — 在生成代码之前，助手会使用 shadcn docs、shadcn search 或 MCP 工具查找组件及其文档。

了解更多

• CLI — 完整的 CLI 命令参考
• MCP 服务器 — 连接 MCP 服务器以访问注册库
• 主题 — CSS 变量与定制
• 注册库 — 构建并发布自定义注册库
• skills.sh — 了解更多 AI skills