以 skill 自身的术语
该 skill 为 Agent 提供使用 shadcn/ui 构建应用的专家指导，shadcn/ui 是一套基于 Radix UI 或 Base UI 与 Tailwind CSS 构建的可访问、可定制组件集合。内容涵盖通过 shadcn MCP 工具进行组件发现、使用 CLI 安装或手动集成、通过 create 和 init 命令进行项目搭建，以及 components.json 中的 style、baseColor、cssVariables、rsc 和 rtl 等选项。
它说明了 components/ui/ 的文件结构和 cn() 辅助函数，随后介绍了通过 app/globals.css 中的 CSS 变量、class-variance-authority 变体和包装组件进行定制的方法。区块按类别组织，之后是可访问性规则、常见的表单、对话框和表格模式、故障排查，以及一份五步验证清单。
它产出什么
- 写入 components/ui/ 并接入你的导入的组件源文件。
- 反映配置和已添加组件的更新后的 components.json。
- 为仪表盘或登录流程等多文件界面获取的区块源代码。
- 你自己的包装组件文件，例如 components/custom-button.tsx。
工作方式
- 01先浏览目录
通过 shadcn MCP 工具探索可用组件，而不是凭猜测命名，使用 list_components、get_component_metadata 和 get_component_demo。
- 02用 CLI 添加组件
推荐的方式是使用 add 命令，它会下载适配你配置的源码，安装依赖，并将文件放入 components/ui/。
- 03或手动集成源码
若手动集成，用 get_component 拉取代码，自行创建文件，安装 peer 依赖并调整导入路径。
- 04初始化项目配置
新项目使用 create 来选择样式、字体和组件库；已有项目运行 init，会写入 components.json。
- 05用 CSS 变量做主题
颜色定义在 Tailwind 配置和 CSS 变量中，.dark 代码块提供深色模式的覆盖值。
- 06提交前验证
进行类型检查、代码检查、无障碍测试，检查浅色和深色模式，并验证断点。