用途:这是一份面向 shadcn/ui 应用的社区最佳实践指南,用于在编写新组件、组合原语、实现表单、构建数据表格、定制主题或审查无障碍时提供参考。
主要能力:按优先级列出八类规则——组件架构(CRITICAL)、无障碍保持(CRITICAL)、样式与主题(HIGH)、表单模式(HIGH)、数据展示(MEDIUM-HIGH)、组件组合(MEDIUM)、性能优化(MEDIUM)、状态管理(LOW-MEDIUM)。规则涉及使用生成原语的组合 API、通过当前 CLI(v4)管理组件生命周期、从统一 radix-ui 包导入、用 CVA 扩展变体、用 cn() 合并类名、保留 ARIA 属性与焦点管理、用 CSS 变量做主题与暗色模式、集成 React Hook Form 与 Zod、用 TanStack Table 处理复杂表格、虚拟化长列表、懒加载大组件等。
使用方式:在项目根目录先运行 npx -y @pymodel/react-frontend-skills detect 检查已安装与目标版本;再针对匹配任务的规则阅读 references/<rule-id>.md,其中包含原因说明与错误/正确代码对比。应用具体原语指南前,需先检查已提交组件使用的是 Radix UI 还是 Base UI,两者组合 API 不同,新项目默认 Base UI。
适用场景:shadcn/ui 项目的组件开发、代码审查、无障碍合规检查、表单与数据展示实现、主题定制。
限制:资料未提供具体版本兼容范围、收费信息或平台支持细节;规则为社区建议,实际效果与适用性需结合项目自行验证。