SuperAPI AI 工具集

components-build

编程与开发

查看项目

更新于 10-16 07:23

技能介绍

用途:该技能提供 components.build 规范,指导创建、审查或重构现代、可组合、无障碍的 React UI 组件与组件库,由 Hayden Bleasel 与 shadcn 共同编写,Jordan Gilliam 改编为 AI 技能。

主要能力:包含 16 个规则类别,按优先级为 Overview、Principles、Definitions、Composition、Accessibility、State、Types、Polymorphism、As-Child、Data Attributes、Styling、Design Tokens、Documentation、Registry、NPM、Marketplaces。具体规则覆盖:用 Context 共享状态的根组件、Item 包装、Trigger 交互、Content 展示与命名空间导出;语义 HTML、键盘导航、ARIA、焦点管理与恢复、实时区域、对比度;受控、非受控及 useControllableState 双模式;扩展原生 HTML 属性并导出 prop 类型;as prop 多态与类型安全;Radix Slot 的 as-child 组合;data-state 与 data-slot;cn 工具、样式顺序、CVA 变体、CSS 变量;设计令牌与明暗主题;JSDoc 与示例文档;注册表结构与元数据 schema;npm 包配置与模块导出;组件分发策略。

使用方式:按需阅读各规则文件,如 rules/composition/SKILL.md、rules/accessibility/SKILL.md、rules/styling/SKILL.md;每个规则文件含原因说明、错误示例、正确示例与最佳实践。完整指南见 AGENTS.md。

适用场景:创建新 React 组件或组件库、设计组件 API 与 prop 接口、实现无障碍、构建可组合架构、使用 Tailwind CSS 与 CVA 样式、发布到注册表或 npm。

限制:资料未提供具体安装命令、收费或价格信息;实际效果与平台支持暂未提供。