用途
shadcn-ui Expert 用于指导开发者使用 shadcn-ui 构建高质量、可访问的 React 组件。shadcn-ui 是一组设计精美、可访问的 React 组件集合，基于 TypeScript、Tailwind CSS 和 Radix UI 原语构建。该技能覆盖组件选择、实现、定制与最佳实践，适用于构建表单、布局、对话框、表格或任何 UI。
主要能力
- 组件选择指导：通过提问帮助判断应使用哪种组件（如文本输入用 input、选项选择用 select 或 combobox、是/否决策用 checkbox 或 switch、多字段用 form）。
- 组件分类说明：涵盖表单与输入（form、input、textarea、select、checkbox、radio-group、switch、date-picker、combobox）、布局与导航（sidebar、tabs、accordion、breadcrumb、navigation-menu、scroll-area）、覆盖层与对话框（dialog、alert-dialog、drawer、popover、tooltip、dropdown-menu、context-menu）、数据展示（table、data-table、avatar、badge、card）、反馈与状态（alert、toast、progress、skeleton、spinner）。
- 常见实现模式：提供带校验的基础表单（React Hook Form + Zod）和对话框（Dialog）的代码示例。
- 样式与定制：通过 Tailwind 类、CSS 变量（主题色）、暗色模式、组件变体进行定制。
- 组合与最佳实践：组合优于定制、类型安全、内置可访问性、性能考量。
- 框架特定说明：Next.js、Vite、Remix 的注意事项。
- 常见定制任务：更改主色、添加自定义组件、多品牌主题。
- 校验与表单：React Hook Form + Zod、TanStack Form。
- 故障排查：样式不生效、TypeScript 错误、表单校验不工作。
使用方式
首先在项目中初始化 shadcn-ui：
npx shadcn-ui@latest init
这会创建 components.json 配置文件。可选择框架：Next.js（推荐 App Router）、Vite、Remix、Astro、Laravel、Gatsby、React Router、TanStack Router/Start。
使用 CLI 安装单个组件：
# 安装按钮组件
npx shadcn-ui@latest add button
# 安装表单组件
npx shadcn-ui@latest add form input select checkbox
# 安装数据表格
npx shadcn-ui@latest add data-table
也可以通过自然语言请求（如“添加一个登录表单”），技能可使用 MCP 服务器处理安装。
适用场景
- 构建带校验的复杂表单（登录、注册、多步骤等）。
- 构建应用布局与导航（侧边栏、标签页、面包屑）。
- 构建模态框、确认提示、浮动内容（对话框、抽屉、弹出框、工具提示）。
- 展示结构化数据（基础表格、带排序/筛选/分页的高级数据表格）。
- 提供用户反馈与加载状态（警告、通知、进度条、骨架屏、加载指示器）。
- 需要主题定制与多品牌主题的场景。
限制
资料未提供该技能的具体收费、价格、平台支持范围或效果保证等信息。部分内容（如 MCP 服务器）仅提及可处理自然语言安装，未提供详细配置说明。具体组件的完整 API 与更多模式需参考资料中列出的文档（COMPONENT_GUIDE.md、FORMS_GUIDE.md、PATTERNS.md、CUSTOMIZATION.md）及外部资源（shadcn/ui 文档、Radix UI、Tailwind CSS、React Hook Form、Zod）。