components-build-skill
指导AI智能体构建现代、可组合、无障碍的React UI组件库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：components-build-skill。 它的用途是：指导AI智能体构建现代、可组合、无障碍的React UI组件库。 完整的 Skill 内容见：https://321skill.com/skills/components-build-skill/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
‘帮我构建一个可访问的、支持受控与不受控状态的对话框组件。’，它会根据Skill中的原则（如语义HTML、ARIA、状态模式）生成组件代码结构。或者说：‘评审一下我这个按钮组件的代码，看是否符合现代最佳实践。’，AI会依据规则检查组件的可组合性、类型导出和样式处理等方面。
介绍
这个Skill为AI编码智能体提供了一套完整的指导规则，用于构建符合现代前端开发最佳实践的React UI组件。它解决了开发者在设计组件API、实现无障碍访问、管理组件状态和样式时缺乏统一标准的问题。
Skill以详细的规则形式嵌入到AI的上下文中，当AI处理相关任务时，会自动调用这些规则来生成或审查代码。用户可以通过安装Skill文件或将其内容粘贴到对话中来启用。
它非常适合前端开发、全栈开发和UI设计师，特别是那些正在创建可复用组件库或希望提升现有组件质量的开发者。
使用建议：在开始一个新组件项目或重构旧组件时启用此Skill，能确保架构的一致性。注意，它主要针对React生态，且深度集成了Tailwind CSS、CVA和Radix UI等特定技术栈。
核心特点
与通用组件生成Skill不同，它严格遵循由Hayden Bleasel和shadcn共同制定的components.build规范，提供了从设计原则到发布分发的16个具体规则类别，确保了组件在可组合性、无障碍访问和类型安全上的工业级质量。
注意事项
不适合非React项目或完全不使用Tailwind CSS、TypeScript技术栈的场景。
常见问题
这个Skill能帮我写Vue或Svelte组件吗？
不能，它专为React生态设计，规则基于React和JSX/TSX语法。
使用这个Skill需要预先了解哪些技术？
建议熟悉React、TypeScript、Tailwind CSS以及Radix UI或类似的无障碍基础组件库概念。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/components-build-skill/raw/index.md 读取 components-build-skill 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/components-build-skill/raw/index.md（查看排版版本）