SuperAPI AI 工具集

shadcn

通用与其它

查看项目

更新于 10-16 01:06

技能介绍

用途:这是一份由社区维护的 shadcn/ui 最佳实践指南,作为技能供 AI 在编写新组件、组合原语、评审代码或自动重构时遵循,覆盖组件、表单、数据展示、主题等场景。

主要能力:按优先级给出 8 类共 42 条规则。组件架构(CRITICAL,arch-)含 asChild 自定义触发器、保持 Radix 复合组件结构、用 CVA 扩展变体、用 cn() 合并类名、转发 ref、隔离组件变体;无障碍(CRITICAL,ally-)要求保留 ARIA 属性、为图标按钮加屏幕阅读器标签、维持焦点管理与键盘导航、保证颜色对比度;样式与主题(HIGH,style-)建议用 CSS 变量做主题、避免 !important、扩展 Tailwind 主题、统一间距、移动优先、支持深色模式;表单(HIGH,form-)集成 React Hook Form 与 Zod 校验并正确处理错误、异步与重置;数据展示(MEDIUM-HIGH,data-)用 TanStack Table、虚拟化长列表、Skeleton 加载态、服务端分页与空状态;组合(MEDIUM,comp-)用复合组件、移动端用 Drawer、Command+Popover 做可搜索选择、嵌套对话框焦点、可复用表单字段与插槽模式;性能(MEDIUM,perf-)懒加载大组件、memo 优化、按需导入 Lucide 图标、隔离表单监听、防抖搜索;状态管理(LOW-MEDIUM,state-)简单输入用非受控、状态提升到合适层级、受控对话框、就近放置状态。

使用方式:资料未提供具体安装命令或调用方式,仅说明可读取各参考文件,完整规则见 AGENTS.md,分类定义见 references/_sections.md,模板见 assets/templates/_template.md,元数据见 metadata.json。

适用场景:React 项目中编写或重构 shadcn/ui 组件、表单校验、大数据表格展示、主题与深色模式定制、无障碍审查。

限制:资料未说明收费、价格、支持平台或授权信息;所有规则为社区建议,具体实现细节需查阅对应参考文件。