用途:面向 React 应用的 shadcn/ui 组件库专家技能,用于实现 UI 组件、搭建设计系统与定制主题。
主要能力:提供 shadcn/ui 组件架构、设计系统与主题定制、无障碍实现、性能优化及复杂实现模式等知识;覆盖表单、展示、导航、数据、反馈等组件类别;涉及 React Hook Form 与 Zod 表单校验、Context7 MCP 集成、CSS 变量主题、深色模式等。
使用方式:先运行 npx shadcn-ui@latest init(资料写作 shadcn-ui init 并配合 npx 最新版本)初始化,再配置 components.json(schema 指向 ui.shadcn.com/schema.json,启用 RSC 与 TSX,配置 Tailwind 路径、基础色、CSS 变量等);随后用 npx shadcn-ui@latest add 组件名 逐个添加组件。
适用场景:shadcn/ui 组件库讨论、React 组件架构规划、Tailwind CSS 集成与设计令牌、无障碍实现、设计系统定制。
限制与要求:资料强调使用 CSS 变量管理颜色、所有交互元素包含无障碍属性、实现键盘导航、用 Tailwind 类而非内联样式、组件树加错误边界、按需提供加载状态与深色模式。shadcn/ui 并非 npm 包,而是复制到项目的组件集合。具体收费、价格与许可等事实资料暂未提供。