Components
@shadcn/react
Utilities
技能为像 Claude Code 这样的 AI 助手提供关于 shadcn/ui 的项目感知上下文。安装后，你的 AI 助手将知道如何查找、安装、组合和定制组件，使用适合你的项目的正确 API 和模式。
例如，你可以让你的 AI 助手：
- “添加一个包含邮箱和密码字段的登录表单。”
- “创建一个带有更新个人资料信息表单的设置页面。”
- “构建一个包含侧边栏、统计卡片和数据表的仪表盘。”
- “切换到 --preset [代码]”
- “你能添加一个来自 @tailark 的 hero 吗？”
该技能会读取你项目中的 components.json 文件，并向助手提供你的框架、别名、已安装组件、图标库和基础库信息，从而使其能够首次生成正确代码。
安装#
pnpm dlx skills add shadcn/ui
此命令会把 shadcn 技能安装到你的项目中。安装完成后，每当处理 shadcn/ui 组件时，你的 AI 助手会自动加载此技能。
更多关于技能的信息，请访问 skills.sh。
包含内容#
该技能为你的 AI 助手提供以下知识：
项目上下文#
在每次交互中，该技能都会运行 shadcn info --json，以获取你项目的配置：框架、Tailwind 版本、别名、基础库（base 或 radix）、图标库、已安装组件以及解析后的文件路径。
CLI 命令#
提供所有 CLI 命令的完整参考：init、add、search、view、docs、diff、info 和 build。包括命令参数、模拟运行模式、智能合并流程、预设和模板。
主题和定制#
介绍 CSS 变量、OKLCH 颜色、暗模式、自定义颜色、边框半径和组件变体的工作原理。包括对 Tailwind v3 和 v4 的应用指导。
注册表创建#
如何构建和发布自定义组件注册表：registry.json 格式、条目类型、文件对象、依赖关系、CSS 变量、构建、托管和用户配置。
MCP 服务器#
shadcn MCP 服务器的设置与工具，可让 AI 助手从注册表中搜索、浏览和安装组件。
工作原理#
- 项目检测 — 当检测到项目中存在
components.json文件时，技能激活。 - 上下文注入 — 运行
shadcn info --json读取项目配置，并将结果注入助手上下文。 - 模式执行 — 助手遵循 shadcn/ui 组合规则：表单使用
FieldGroup，选项集使用ToggleGroup，语义颜色及正确的基础库特定 API。 - 组件发现 — 助手使用
shadcn docs、shadcn search或 MCP 工具查找组件及其文档，然后生成代码。