shadcn/ui 组件集成

你在对接 shadcn/ui 时卡在哪

shadcn/ui 不是传统「装一个包就完事」的组件库，而是把 Radix UI / Base UI + Tailwind 的源码复制进 components/ui/，再由你改样式和行为。新人常卡在：不知道该装哪个组件、依赖和 components.json 怎么对齐、主题变量和 cn() 合并类名后样式冲突、以及改组件时把无障碍能力弄丢。

这个技能怎么帮你落地

技能把角色设定为熟悉 shadcn/ui 的前端工程师，围绕 发现 → 安装 → 定制 → 排错 一条线工作：

• 目录与元数据：通过 MCP 能力列举组件、查 props/依赖、看 demo，必要时在 Registry / 自定义 registry 里搜索条目。
• 安装路径：优先走 CLI 直装（拉源码、装 peer deps、写入 components/ui/、更新 components.json）；需要时再用手动拷贝与改 import。
• 工程结构：说明 components.json 里 style、baseColor、aliases、RSC/RTL 等配置含义，以及 cn() + class-variance-authority 做变体的惯例。
• 块级 UI：除原子组件外，可按分类处理 login、dashboard、sidebar 等 blocks（多文件组合）。
• 质量与排错：类型检查、lint、无障碍（键盘、ARIA、焦点）、亮暗色与响应式；并覆盖别名/tsconfig、Tailwind/CSS 变量、缺依赖与版本兼容等常见问题。

适用边界

它指导的是 React 18+、Tailwind 3+ 技术栈下的集成与定制，不会替你跑构建或改仓库；若你选 Base UI 而非 Radix，安装与依赖列表会随配置变化。大版本（如 v4 与 Next.js 13+）的破坏性变更仍需对照官方文档与 get_component_metadata 返回的依赖信息核对。