用途:该技能在用户要求添加组件、使用 shadcn、安装 Button、创建 Dialog、添加 Form、使用 DataTable 等场景下提供 shadcn/ui 开发指导,强调始终使用最新版本与现代模式。
主要能力:覆盖组件安装与使用,包括 Button、Card、Dialog、Input、Label、Select、Form、DataTable 等;提供表单处理(React Hook Form + Zod、Server Actions)、暗色模式(next-themes 主题提供者与切换按钮)、Toast 通知(Sonner)以及响应式 Sheet/Dialog、加载按钮等常见模式。
使用方式:在 Next.js 中初始化执行 npx shadcn@latest init,配置提示中推荐 Style 选 new-york,Base color 可选 neutral、slate、zinc、gray 或 stone,CSS variables 推荐 Yes。添加组件执行 npx shadcn@latest add button,可一次添加多个,如 npx shadcn@latest add button card dialog form input label textarea。组件从 @/components/ui/ 导入,类名合并使用 @/lib/utils 的 cn()。
现代与旧版对照:Style 用 new-york,避免已弃用的 default;Toast 用 sonner,替代 toast 组件;动画用 CSS/tw-animate-css,替代 tailwindcss-animate;React 19 中直接用 ref prop,替代 forwardRef 包装。
适用场景:使用 shadcn/ui 构建 React/Next.js 界面、表单、弹窗、通知与主题切换等前端开发任务。
限制:资料未提供收费、价格、平台支持范围与效果数据;具体组件目录与主题定制细节需查阅其 references/components.md 与 references/theming.md。