用途:这是一份面向编码智能体的 shadcn/ui 专家指南技能,帮助智能体正确使用 shadcn/ui 组件与注册表工作流。shadcn/ui 并非传统组件库,不通过包依赖安装,而是由 CLI 把组件源码复制进项目,用户拥有完整所有权与定制能力。
主要能力:覆盖 CLI 初始化与组件安装、组合模式、自定义注册表、主题定制、Tailwind CSS 集成,以及高质量界面设计方向。技能同时覆盖 Radix 与 Base UI 两种底层原语、更新后的 API、组件模式与注册表工作流,并知道何时调用 CLI、传哪些参数。
使用方式:初始化务必使用非交互模式,如 npx shadcn@latest init -d;可用 --preset 应用设计系统预设,用 --base radix 或 --base base-ui 选择底层库,用 --template next 等脚手架项目。添加组件用 npx shadcn@latest add button dialog card,支持 --all、--dry-run、--diff、--view 等选项;也可从自定义注册表添加,如 npx shadcn@latest add @v0/dashboard。搜索与列表用 search、list;构建自定义注册表用 build;CLI v4 提供 view、info、docs 命令,其中 docs 可返回代码示例、API 参考与用法模式。迁移用 migrate rtl、migrate radix、migrate icons。技能安装命令为 pnpm dlx skills add shadcn/ui。
适用场景:React 项目(Next.js、Vite、React Router、Astro、Laravel、TanStack Start)的界面开发,尤其是仪表盘、AI 应用、内部工具、设置页、CRUD 表格、认证页、全局搜索等。
限制与注意:init 默认交互,仅用 -y 不会跳过组件库选择,须用 -d;CLI v4 已移除 --style、--base-color、--src-dir、--no-base-style、--css-variables 等参数,registry:build 与 registry:mcp 已弃用,改用 registry:base 与 registry:font。若项目使用或可能使用 AI Elements,应始终使用 --base radix。init 可能破坏 Next.js 的 Geist 字体,需在 @theme inline 中使用字面字体名并把字体变量类名从 body 移到 html。Avatar 等组件没有 size 变体属性,需用 Tailwind 类控制尺寸。资料未提供收费、价格与效果数据。