概述
components-build 是一个 AI 技能，基于 components.build 规范，用于构建现代化、可组合且无障碍的 React UI 组件。该规范由 Hayden Bleasel（@haydenbleasel）与 shadcn（@shadcn）共同编写，并由 Jordan Gilliam（@nolansym）改编为 AI 技能。
用途与适用场景
当需要进行以下工作时可参考该技能：
- 创建新的 React 组件或组件库
- 设计组件 API 与 props 接口
- 实现无障碍功能（键盘、屏幕阅读器、ARIA、焦点管理）
- 构建可组合的组件架构
- 使用 Tailwind CSS 与 CVA 为组件设置样式
- 将组件发布到注册表或 npm
规则类别
规范包含 16 个规则类别，按优先级排列：
- Overview（概述）：规范范围与目标，前缀 overview。
- Principles（原则）：核心设计理念，前缀 principles。
- Definitions（定义）：常用术语（primitive、compound、headless 等），前缀 definitions。
- Composition（组合）：拆分复杂组件，前缀 composition。
- Accessibility（无障碍）：键盘、屏幕阅读器、ARIA，前缀 accessibility。
- State（状态）：受控/非受控模式，前缀 state。
- Types（类型）：TypeScript props 与接口，前缀 types。
- Polymorphism（多态）：通过 as prop 切换元素，前缀 polymorphism。
- As-Child：Radix Slot 组合模式，前缀 as-child。
- Data Attributes（数据属性）：data-state 与 data-slot，前缀 data-attributes。
- Styling（样式）：Tailwind CSS、cn 工具函数、CVA，前缀 styling。
- Design Tokens（设计令牌）：CSS 变量与主题，前缀 design-tokens。
- Documentation（文档）：组件文档，前缀 documentation。
- Registry（注册表）：组件注册表，前缀 registry。
- NPM：发布到 npm，前缀 npm。
- Marketplaces（市场）：组件市场，前缀 marketplaces。
各规则要点
组合（Composition）：
- composition-root：带 Context 的根组件，用于共享状态
- composition-item：条目包装组件
- composition-trigger：交互式触发组件
- composition-content：内容展示组件
- composition-export：命名空间导出模式
无障碍（Accessibility）：
- accessibility-semantic-html：使用合适的 HTML 元素
- accessibility-keyboard：完整键盘导航支持
- accessibility-aria：正确的 ARIA 角色、状态与属性
- accessibility-focus：焦点管理与恢复
- accessibility-live-regions：屏幕阅读器播报
- accessibility-contrast：颜色对比度要求
状态（State）：
- state-uncontrolled：内部状态管理
- state-controlled：外部状态委托
- state-controllable：使用 useControllableState 同时支持两种模式
类型（Types）：
- types-extend-html：扩展原生 HTML 属性
- types-export：为消费者导出 props 类型
- types-single-element：一个组件包装一个元素
多态（Polymorphism）：
- polymorphism-as-prop：改变渲染的元素类型
- polymorphism-typescript：类型安全的多态组件
- polymorphism-defaults：语义化元素默认值
As-Child：
- as-child-slot：用于 props 合并的 Radix Slot
- as-child-composition：与子组件组合
数据属性（Data Attributes）：
- data-attributes-state：使用 data-state 设置状态样式
- data-attributes-slot：使用 data-slot 定位子组件
样式（Styling）：
- styling-cn-utility：结合 clsx 与 tailwind-merge
- styling-order：基础 → 变体 → 条件 → 用户覆盖
- styling-cva：使用 Class Variance Authority 处理变体
- styling-css-variables：使用 CSS 变量设置动态值
设计令牌（Design Tokens）：
- design-tokens-css-variables：将令牌定义为 CSS 变量
- design-tokens-theming：支持亮色/暗色模式与主题
文档（Documentation）：
- documentation-props：使用 JSDoc 记录所有 props
- documentation-examples：提供使用示例
注册表（Registry）：
- registry-structure：注册表文件结构
- registry-schema：组件元数据模式
NPM：
- npm-package-json：包配置
- npm-exports：模块导出
市场（Marketplaces）：
- marketplaces-distribution：组件分发策略
如何使用
可阅读各个规则文件获取详细说明与代码示例，例如：
rules/composition/SKILL.md
rules/accessibility/SKILL.md
rules/styling/SKILL.md
每个规则文件包含：
- 重要性的简要说明
- 带解释的错误代码示例
- 带解释的正确代码示例
- 最佳实践与常见陷阱
完整编译文档（所有规则展开）见 AGENTS.md。
核心原则
- 组合优于配置（Composition over Configuration）：将组件拆分为可组合的子组件
- 默认无障碍（Accessibility by Default）：不是事后补充，而是必要条件
- 单元素包装（Single Element Wrapping）：每个组件包装一个 HTML 元素
- 扩展 HTML 属性（Extend HTML Attributes）：始终扩展原生元素 props
- 导出类型（Export Types）：使 props 类型可供消费者使用
- 支持两种状态模式：受控与非受控
- 智能类名合并：使用带 tailwind-merge 的 cn() 工具函数
限制
本资料未提供该技能的具体安装命令、收费信息、支持平台或除上述规则外的其他功能说明，这些内容暂未提供。