用途：当用户询问 shadcn/ui，或希望在 Stitch 生成的 React 应用中添加 shadcn 组件时使用。该技能面向熟悉 shadcn/ui 的前端工程师，帮助在 Stitch 生成的 React 项目中发现、安装、定制和扩展组件。
主要能力：shadcn/ui 并非组件库，组件代码被复制到项目的 src/components/ui/ 目录，由开发者完全拥有，无版本锁定，可自由修改样式、行为与结构，且只打包已添加的组件。组件基于 Radix UI 原语构建，默认具备无障碍支持、键盘导航与 ARIA 合规。
使用方式：前置条件为带 Tailwind CSS 的 React 应用（Vite 或 Next.js），理想情况下已通过 stitch-react-components 或 stitch-nextjs-components 转换 Stitch 设计。第一步运行 npx shadcn@latest init 初始化，生成 components.json。第二步将 Stitch 设计系统的 design-tokens.css 颜色映射到 globals.css 中 shadcn 的 CSS 变量（如 --background、--primary、--border、--radius 等），并处理 .dark 暗色模式。第三步用 npx shadcn@latest add button 等命令安装单个组件，或安装 login-01、dashboard-01 等完整区块。第四步按对照表将 Stitch 的 HTML 元素替换为对应 shadcn 组件，如 button 替换为 Button、input 替换为 Input、select 替换为 Select、弹层替换为 Dialog 等。第五步使用 cn() 工具（clsx + tailwind-merge，位于 lib/utils.ts）合并类名。
自定义与无障碍：可通过 cva() 扩展组件变体，或包装组件提供项目默认值；定制时不要移除基础组件的 ARIA 属性与键盘处理。
典型流程：stitch-mcp-get-screen 下载 HTML，stitch-design-system 提取 token，stitch-react-components 或 stitch-nextjs-components 生成基础组件，本技能替换为 shadcn 组件并对齐 globals.css，stitch-animate 添加过渡，stitch-a11y 验证无障碍。
限制与排错：需处理导入路径别名、颜色不匹配、暗色模式未生效、缺少 peer 依赖、cn() 未找到等问题。具体收费、价格与平台信息暂未提供。