用途：当用户涉及 shadcn/ui、Stitch + React + shadcn，或用 shadcn 组件构建 React 界面时，提供组件发现、安装、定制和扩展的工程指导。
核心理念：shadcn/ui 不是普通依赖库，而是把组件源码复制进项目。代码位于仓库而非 node_modules，样式、行为和结构完全可改，无版本锁定，也不增加额外运行时体积，只包含自己加入的代码。
组件发现与安装：用 shadcn MCP 的 list_components 列出组件，或浏览 ui.shadcn.com。推荐安装命令：npx shadcn@latest add [component-name]，它会下载源码、安装依赖、放入 components/ui/ 并更新 components.json。也可用 MCP get_component 取源码后手动创建 components/ui/[name].tsx 并安装依赖。
项目初始化：新项目用 npx shadcn@latest create；已有项目用 npx shadcn@latest init，生成 components.json，可配置 style、baseColor、cssVariables、Tailwind 路径、别名、rsc、rtl 等。依赖包括 React 18+、Tailwind 3+、Radix UI 或 Base UI、class-variance-authority、clsx、tailwind-merge。还可通过 components.json 配置自定义注册表，用 MCP 的注册表工具发现和安装。
结构与定制：组件放 src/components/ui/，自定义组合组件放 src/components/[custom]/。组件统一用 cn()（clsx + tailwind-merge）合并类名，需保留 lib/utils.ts。主题在 Tailwind 配置和 globals.css 的 :root 与 .dark 中修改变量；变体用 cva 管理；扩展时在 components/ 下写包装组件，而不是改 components/ui/。
区块与复杂组件：shadcn 提供 auth、dashboard、sidebar 等区块，按类别组织，可用 MCP list_blocks、get_block 获取并安装。
质量与可访问性：提交前运行 tsc --noEmit 做类型检查，运行项目 lint，用 axe DevTools 等检查可访问性，测试明暗模式与不同断点。组件基于 Radix 原语，具备键盘导航、ARIA 和焦点管理，定制时应保留这些特性。
与 Stitch 集成：用 stitch-react-components 把 Stitch 界面转为 React 后，再用本技能加入表单、对话框、表格等 shadcn 组件；若项目使用 stitch-design-md，应让主题颜色与间距与 DESIGN.md 对齐。
排障：导入报错检查 components.json 和 tsconfig.json 的 @/* 路径；样式冲突确认 Tailwind 与 globals.css 配置并核对 CSS 变量名；缺少依赖可运行 npx shadcn@latest add [component] 自动安装，或用 get_component_metadata 查看依赖列表。
限制：资料未提供具体收费、价格、平台支持范围或性能承诺等信息。