用途:在 Next.js 项目中使用 shadcn/ui 构建美观且可访问的界面组件,适用于创建表单、对话框、表格、侧边栏等 UI。
主要能力:覆盖按钮变体与尺寸、react-hook-form 加 Zod 表单校验、Dialog 与 AlertDialog、基于 TanStack 的数据表格、Card、Sonner 通知、Sidebar 导航以及 next-themes 深色模式等常见模式。
使用方式:先初始化 npx shadcn@latest init,再按需添加组件,例如 npx shadcn@latest add button form dialog table sidebar。组件从 @/components/ui/ 导入使用。依赖包括 @hookform/resolvers、@radix-ui/react-*、@tanstack/react-table、class-variance-authority、clsx、lucide-react、next-themes、react-hook-form、sonner、tailwind-merge、zod。
验证:运行 python3 scripts/verify.py,预期输出 ✓ styling-with-shadcn skill ready;若失败需检查 references/ 目录及 component-examples.md。
限制:资料未提供收费、价格、平台支持范围及具体效果数据;完整代码示例见 references/component-examples.md 与 references/taskflow-theme.md。