技能

技能为像 Claude Code 这样的 AI 助手提供关于 shadcn/ui 的项目感知上下文。安装后，你的 AI 助手将知道如何查找、安装、组合和定制组件，使用适合你的项目的正确 API 和模式。

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

• “添加一个包含邮箱和密码字段的登录表单。”
• “创建一个带有更新个人资料信息表单的设置页面。”
• “构建一个包含侧边栏、统计卡片和数据表的仪表盘。”
• “切换到 --preset [代码]”
• “你能添加一个来自 @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。包括命令参数、模拟运行模式、智能合并流程、预设和模板。

主题和定制

介绍 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 技能信息