components.build
构建现代、可组合、可访问UI组件的开源标准规范。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：components.build。 它的用途是：构建现代、可组合、可访问UI组件的开源标准规范。 完整的 Skill 内容见：https://321skill.com/skills/components-build/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“根据 components.build 规范，评审我这个按钮组件的代码，在可访问性和可组合性方面有哪些可以改进的地方？” 它会依据规范中关于 ARIA 属性、键盘导航、组件 props 设计等原则，对你的代码提供具体的改进建议。或者，你可以说：“我想基于 Vue 3 创建一个模态框组件，请根据 components.build 的原则给我一个实现框架。” AI 会为你勾勒出符合组合性、可访问性等核心要求的组件结构。
介绍
components.build 旨在解决开源UI组件库在开发过程中缺乏统一、高质量标准的问题。当前，许多组件库在可访问性、可组合性、性能和维护性方面参差不齐，导致开发者难以选择或集成，也增加了维护者的协作成本。
该规范通过提供一套详细的、框架无关的最佳实践指南来解决此问题。它并非一个可直接安装的库，而是一份需要开发者阅读并遵循的“说明书”。使用方式是将规范中的原则（如组合优于继承、遵循WCAG标准、确保代码透明等）应用到具体组件库的开发中，从而产出高质量的组件。
它主要适合开源组件库的维护者、资深前端工程师以及希望建立内部设计系统技术标准的团队。这些用户需要构建或重构一套经得起考验、易于协作和长期维护的UI组件体系。
与同类工具（如特定框架的组件库或单一功能的检查工具）相比，components.build 的核心区别在于其定位是“元规范”。它不提供具体的组件代码，而是定义了生成这些代码应遵循的通用原则和标准，其目标是提升整个开源前端组件生态的基线质量，而非解决某个特定框架或场景的问题。
核心特点
这是一个定义如何“制造组件”的元规范，而非一个现成的组件库。它由社区知名作者（Hayden Bleasel 和 shadcn）联合制定，旨在为整个开源前端组件生态建立统一的高质量标准，其原则适用于 React、Vue、Svelte 等多种框架。
注意事项
不适合需要直接复制粘贴代码、快速搭建原型的初学者或寻求开箱即用组件库的开发者。
常见问题
components.build 是 React 组件库吗？
不是，它是一个构建UI组件的开源标准规范，虽然示例用了React，但核心原则适用于所有现代前端框架。
如何在我的项目中使用 components.build？
通过阅读并遵循其规范来指导你开发或重构自己的组件库，确保组件具备可组合、可访问、高性能等特性。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/components-build/raw/index.md 读取 components.build 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/components-build/raw/index.md（查看排版版本）