components-build

components-build 技能为开发人员和 UI 工程师提供了一套全面的工具，用于创建高质量、专业的 React 组件。此技能基于由 Hayden Bleasel 与 shadcn 共同撰写的行业标准规范，强制执行严格的架构模式，确保您的 UI 代码具有可扩展性、易于访问且易于维护。它专为在设计系统、组件库或复杂前端应用上工作的软件工程师而设计，在这些场景中，组件组合与无障碍访问至关重要。

• 实作包含组合、可访问性 (Accessibility)、状态管理与多态 (Polymorphism) 在内的 16 个核心规则类别。
• 强制执行组合优于配置、单一元素封装以及原生 HTML 属性扩展等最佳实践。
• 提供关于使用 ARIA、焦点管理与屏幕阅读器提示来实现可访问互动元素的指南。
• 通过整合 Tailwind CSS、CVA (Class Variance Authority) 与用于类名智能合并的 cn 工具，简化样式处理流程。
• 使用 TypeScript 为复杂组件接口提供强大的类型安全保障，包括适当的属性导出与定义结构。
• 支持受到 Radix UI 启发的 'as-child' 组合模式，实现无缝的组件互动与属性合并。
• 提供关于发布工作流程的详细指导，包括注册表结构、元数据架构与 npm 包导出。

使用技巧与实务建议：

• 在启动新组件文件或将旧版 UI 模式重构为现代化的无头架构时使用此技能。
• 对于需要检查是否符合可访问性标准 (WCAG) 或状态委托模式 (受控与非受控) 的代码审查非常有效。
• 此技能可追踪 React 组件设计中的常见陷阱，例如属性钻取 (prop drilling) 或低效的样式处理，并提供错误与正确代码模式的具体示例。
• 预期输入包含组件需求、功能规格或现有的代码片段。代理程序将根据 components.build 规则集输出重构后的代码、架构建议或验证报告。
• 请确保您的项目环境支持 Tailwind CSS 与 Radix UI 原语，以实现与这些准则的完全兼容性。