技能

技能（Skills）为 Claude Code 等 AI 助手提供关于 shadcn/ui 的项目感知上下文。安装后，你的 AI 助手将知道如何使用项目中正确的 API 和模式来查找、安装、组合和自定义组件。

例如，你可以要求你的 AI 助手：

• “添加一个带有电子邮件和密码字段的登录表单。”
• “创建一个带有表单的设置页面，用于更新个人资料信息。”
• “构建一个带有侧边栏、统计卡片和数据表格的仪表盘。”
• “切换到 --preset [CODE]”
• “你能添加一个来自 @tailark 的 hero 组件吗？”

该技能会读取你项目中的 components.json 文件，并为助手提供框架、别名、已安装组件、图标库和基础库，以便它能够一次性生成正确的代码。

安装

pnpmnpmyarnbun
pnpm dlx skills add shadcn/ui
Copy

这将把 shadcn 技能安装到你的项目中。安装后，当使用 shadcn/ui 组件时，你的 AI 助手会自动加载该技能。

在 skills.sh 了解更多关于技能的信息。

包含内容

该技能为你的 AI 助手提供了以下知识

项目上下文

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

CLI 命令

所有 CLI 命令的完整参考：init, add, search, view, docs, diff, info, 和 build。包含标志（flags）、试运行模式、智能合并工作流、预设和模板。

主题与自定义

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

注册表制作

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

MCP 服务器

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

工作原理

1. 项目检测 — 当技能在你的项目中发现 components.json 文件时，它会激活。
2. 上下文注入 — 它运行 shadcn info --json 来读取你的项目配置，并将结果注入到助手的上下文中。
3. 模式强制 — 助手遵循 shadcn/ui 的组合规则：为表单使用 FieldGroup，为选项集使用 ToggleGroup，使用语义化颜色，并使用正确的特定于基础库的 API。
4. 组件发现 — 助手在生成代码之前，会使用 shadcn docs、shadcn search 或 MCP 工具来查找组件及其文档。

了解更多

• CLI — 完整的 CLI 命令参考
• MCP 服务器 — 连接 MCP 服务器以访问注册表
• 主题 — CSS 变量和自定义
• 注册表 — 构建和发布自定义注册表
• skills.sh — 了解更多关于 AI 技能的信息