这个 Skill 能做什么，适合哪些场景？
这是 google-labs-code/stitch-skills 中 stitch-build 插件的一个 Agent Skill，专注于 shadcn/ui 组件集成。它指导开发者使用 shadcn MCP 工具浏览组件、查看元数据和示例，并通过 CLI 或手动方式安装组件。内容覆盖项目初始化、主题变量、组件变体、复合组件、UI blocks、可访问性和常见故障排查。该仓库整体要求配置并运行 Stitch MCP，但本 Skill 的具体流程还使用 shadcn MCP 工具。
使用 shadcn MCP 工具列出组件、获取组件元数据和演示，探索注册表目录；指导运行 npx shadcn@latest create 或 npx shadcn@latest init；指导运行 npx shadcn@latest add [component-name] 安装组件，或获取源代码后手动写入 components/ui/；查询项目注册表及其中的条目；获取和安装 UI blocks；提供主题、变体、包装组件、表单、对话框和数据表实现示例；指导进行类型检查、lint、可访问性、视觉和响应式验证。
- 正在创建 React/Tailwind 项目的前端开发者，需要初始化 shadcn/ui 配置并选择样式、颜色和别名。
- 需要构建数据表、表单、对话框或其他常见界面的开发者，希望先查询组件元数据和示例。
- 希望保留组件源码所有权、避免依赖库版本锁定，并在项目内自由修改组件的团队。
- 需要从 shadcn 注册表或自定义注册表查找和集成组件的开发者。
- 正在定制主题、深色模式、组件变体或可复用包装组件的前端工程师。
如何安装这个 Skill？
- 允许 Bash、Write 和 web_fetch，安装或修改项目文件前应明确告知并要求用户确认，尤其是 npx 下载和执行外部包时。
- verify-setup.sh 不是完整测试：它可能选择错误的 CSS 文件，并以简单文本匹配判断依赖，不能证明项目可运行。
- 文档未提供中文指导，也未说明 npm、npx、MCP 和海外文档在中国大陆网络环境中的可达性；使用前应准备可用镜像或替代源。
- 应补充该技能专属 CI、版本兼容矩阵、变更日志、维护责任和失败后的回滚方案。
- Shell / 命令行
- 网络访问
- 本地文件系统
- MCP Server
React 18+Tailwind CSS 3.0+Radix UI or Base UIclass-variance-authorityclsxtailwind-merge
该 Skill 位于 plugins/stitch-build/skills/shadcn-ui/SKILL.md。README 提供的仓库级安装方式是先添加 Stitch Skills marketplace：codex plugin marketplace add google-labs-code/stitch-skills --ref main --sparse .agents/plugins --sparse plugins/stitch-design --sparse plugins/stitch-build --sparse plugins/stitch-utilities，然后安装 stitch-build 插件；README 未提供仅安装 shadcn-ui 子 Skill 的具体插件命令。也可按 README 使用 npx skills add google-labs-code/stitch-skills。使用前需配置并运行 Stitch MCP；SKILL.md 还声明需要 shadcn MCP 工具。
tmp="$(mktemp -d)"
git clone --depth 1 https://github.com/google-labs-code/stitch-skills.git "$tmp"
mkdir -p ~/.claude/skills
cp -R "$tmp/plugins/stitch-build/skills/shadcn-ui" ~/.claude/skills/
rm -rf "$tmp"根据源仓库地址和 Skill 路径自动生成，只复制这个 Skill 的文件夹。如果上文有作者提供的安装方式，请优先按作者说明操作；想只在当前项目中使用，把 ~/.claude/skills 换成项目里的 .claude/skills。
如何使用这个 Skill？
在已配置相关 MCP 工具的编码代理中提出具体任务，例如：Set up shadcn/ui and build a data table with sorting and filtering. 对新项目使用 npx shadcn@latest create，对现有项目使用 npx shadcn@latest init，再用 npx shadcn@latest add [component-name] 添加组件。
这个 Skill 有哪些优点和局限？
- 组件源码复制到项目中，开发者拥有完整控制权。
- 支持 Radix UI 或 Base UI 原语，并可自由定制样式、行为和结构。
- 覆盖组件发现、安装、注册表、blocks、主题和可访问性等常见流程。
- 提供 TypeScript、lint、可访问性、视觉和响应式检查建议。
- 依赖 Stitch MCP 和 shadcn MCP 等工具配置，具体运行环境需要自行准备。
- SKILL.md 展示了 shell、文件读写和网络工具，但没有提供测试套件或已验证平台清单。
- 文档包含较多 Next.js 和 Tailwind 配置示例，未说明对其他前端框架的完整支持范围。
- README 未给出只安装该单个 Skill 的明确插件命令。
这个 Skill 与同类方案有什么区别？
与相关 Skills 并排比较；分数均按同一 FSRS 标准得出。
| Skill | FS 评分 | Star 数 | 最近更新 | License |
|---|---|---|---|---|
| shadcn/ui 前端组件集成助手 本页 | 42 · 不推荐 | ★ 8.5k | 2 个月前 | Apache-2.0 |
| Artifacts Builder — 多组件前端 Artifact 构建套件 | 53 · 谨慎使用 | ★ 3.1k | 8 个月前 | MIT |
| 动效设计原则 | 62 · 推荐 | ★ 1.3k | 5 个月前 | MIT |
| OpenChamber 拖拽排序技能（drag-to-reorder） | 59 · 推荐 | ★ 12k | 13 天前 | MIT |
| 深色主题 React 前端设计技能 ✓ Microsoft · 官方 | 52 · 谨慎使用 | ★ 2.7k | 3 个月前 | MIT |
FollowSkills 如何评估这个 Skill？
技能声明使用 Read、Write、Bash、web_fetch 及 shadcn/MCP 工具，且会执行 npx 安装并写入项目，但未要求用户确认、未说明数据流、回滚或敏感数据处理；因此仅保留基础安全分，扣除最小权限、确认和恢复机制分。
文档覆盖安装、配置、故障排查和静态验证脚本，快乐路径较清晰；但未提供针对该技能的测试，脚本存在 CSS_FILE 选择不确定、依赖检查为文本匹配等脆弱性，且部分版本和 Radix/Base UI 说明可能不一致，故静态上限内扣分。
目标场景、提示示例、前置条件和主要工作流较明确，覆盖 React、Next.js、Vite 及迁移场景；未定义明确的非适用边界、触发排除条件或中文使用指导，且依赖 npm、npx、海外文档和 MCP 环境，部分网络环境可达性未说明，故扣分。
SKILL.md、README、资源文档和脚本形成了较好的分层结构，安装说明、示例、故障排查、Apache-2.0 许可证和安全政策均有；但缺少明确维护责任人、更新路径、变更日志和稳定版本策略，且 README 所列 examples 与 resources 未在本次材料中逐一提供，故扣分。
组件发现、安装、定制、迁移和质量检查均有可直接参考的命令与代码片段，能够覆盖核心任务；但没有该技能实际生成结果或端到端验证证据，部分建议需要用户根据项目版本自行修正，仍需中等复核，静态上限内扣分。
材料包含固定修订版源码、脚本和仓库级 CI，但 CI 只验证 react-components，未覆盖 shadcn-ui；文档引用官方站点但未提供可核验的执行结果或第三方复现证据，因此仅给有限静态可审计分。
点击维度查看打分理由
证据充分度：低 — 主要依赖静态检查、作者材料或有限演示；适合发现线索，不适合做高风险决策。
查看完整评分方法 →