浅色 shadcn/ui 组件展示：表单、导航、图表、付款设置和聊天界面。
项目截图关于这个 Skill
官方 shadcn Skill 帮助 AI 编程助手使用项目中的 shadcn/ui 组件源码。它通过 shadcn info --json 检查框架、Tailwind 版本、路径别名、基础库、图标库、已安装组件和实际文件位置，再结合当前文档与 CLI 完成组件查找、组合、定制和排错。
为什么推荐
适合使用 shadcn/ui 制作表单、仪表盘、设置页、聊天界面和设计系统。Skill 先检查项目别名、已安装组件与基础库，再选择对应 API。本页链接官方 shadcn Skill 目录，图库使用用户提供的组件截图和仓库官方预览图。
适合用来做什么
- 用已有 shadcn/ui 组件制作登录表单、设置页和仪表盘。
- 检查现有项目的组件组合、导入路径、基础库 API 和样式问题。
- 应用主题或预设，或根据 DESIGN.md、品牌规范制作设计系统。
- 先在明确指定的 registry 中查找组件与区块，再决定是否编写自定义界面。
- 按 Skill 文档组合消息展示与滚动组件，制作聊天界面。
先读取实际项目配置
Skill 在生成代码前检查框架与文件约定、导入别名、已安装组件、Tailwind 版本、图标库，以及项目使用 Base UI 还是 Radix。使用或修复组件前，需先获取对应组件文档。
| 命令 | 用途与使用时机 |
|---|---|
npx shadcn@latest info --json | 查看项目配置与已安装组件。 |
npx shadcn@latest docs button dialog select | 获取这些组件的官方文档与示例地址。 |
组合组件并保持主题一致
优先使用已有组件
搜索用户指定的 registry，复用已安装组件，按文档结构组合表单、导航、浮层、卡片和反馈组件。
遵循项目对应的 API
Base UI 与 Radix 的触发器和组合 API 不同。Skill 根据检测到的基础库引导助手读取对应规则。
使用设计变量与变体定制
使用语义颜色变量与已有组件变体，通过项目主题配置调整字体、圆角和组件样式。
安装指定的官方 Skill
从官方 shadcn-ui/ui 仓库安装，并选择 shadcn 入口。--skill 参数将安装范围限定为 skills/shadcn；仓库另有独立的 Radix 到 Base 迁移 Skill。在安装器中选择使用的编程助手。官方指南介绍了在 shadcn/ui 项目中的自动加载方式。
| 命令 | 用途与使用时机 |
|---|---|
npx skills add shadcn-ui/ui --skill shadcn | 仅安装官方仓库中的 shadcn Skill。 |
npx skills add shadcn-ui/ui --list | 安装前查看仓库中的可用 Skill 入口。 |
给助手一个具体界面任务
表单或设置页
“用本项目已安装的组件制作个人资料设置页，包含姓名和邮箱字段。”
仪表盘
“制作包含侧栏、统计卡片和数据表格的仪表盘，沿用当前主题和导入别名。”
组件排错
“检查这个弹窗关闭后焦点丢失的原因，先读取当前文档，并保留已有定制。”
预览更新并选择预设应用方式
更新已定制组件时，Skill 使用 CLI 的 dry-run 与 diff 比较上游变化后再合并。预设变更提供覆盖、局部更新、合并和跳过组件更新等流程；修改已有预设前，助手需先确认采用哪一种方式。
| 命令 | 用途与使用时机 |
|---|---|
npx shadcn@latest add button --dry-run | 添加或更新 Button 前查看受影响文件。 |
npx shadcn@latest add button --diff button.tsx | 比较上游 Button 源码与本地文件。 |
Registry 制作与可选 MCP
配套参考文档涵盖组件 registry 定义、依赖、构建与托管，以及 MCP server 配置。需要直接调用 registry 工具的助手可使用 MCP；Skill 同时提供常规 CLI 流程。
使用前需要了解
- 使用支持 Agent Skills、能够读写本地文件并执行项目命令的编程助手。自动上下文注入方式取决于宿主工具。
- 安装与运行 shadcn CLI 需要 Node.js 和包运行器；按项目包管理器选择 npx、pnpm dlx 或 bunx。
- 已有 shadcn/ui 项目通过 components.json 提供项目配置；Skill 也包含新项目初始化流程。
- 安装依赖、获取最新 registry 内容与文档需要网络。可选的 MCP server 需要另外配置。
- 仓库采用 MIT 许可证，Skill 可免费安装；模型或编程助手的使用费由对应服务决定。
支持的 Agent
常见问题
这是 shadcn 官方 Skill 吗？
是。本页链接官方 shadcn-ui/ui 仓库中的 skills/shadcn。安装器从上游获取 Skill 与配套文件。
安装 Skill 会直接给应用添加 UI 组件吗？
安装 Skill 会为助手添加指令与参考资料。之后让助手制作或更新界面时，才通过 shadcn CLI 将组件源码添加到应用。
必须安装 MCP server 吗？
不必。Skill 提供常规 CLI 工作流；MCP 是可选的 registry 工具集成，需要在宿主中单独配置。
资料与来源
原始资料见下方链接；文中的上手建议由 SkillHey 编辑整理。
