106.9K+下载
跳转到使用指南
Building Components作者 vercel

Building Components Skill.

设计可复用的 UI 组件 API，同时考虑无障碍和分发。

  • 组件 API
  • 无障碍
下载 OpenDesign查看使用指南
源文件解读 · building-componentsSKILL.md
任务 设计可复用的 UI 组件 API，同时考虑无障碍和分发。 产出 实现任务：具备明确组合方式和状态模型的组件。 开始前的准备 简短的 SKILL.md 依赖随附参考文件提供详细实现指导。
编辑摘要 · 源文件核查于 2026-11-02 · 非生成示例

01 功能说明

设计可复用的 UI 组件 API，同时考虑无障碍和分发

使用 Vercel 的 Building Components Skill，规划无障碍组件 API、受控状态、样式、设计令牌和分发方式。

基于来源的工作流并非执行基准测试

工作方法

Building Components 是一份面向可复用 UI 组件库工程决策的指南。它引导智能体查阅组合方式、键盘行为、状态管理、TypeScript 接口和样式等专项参考。入口涵盖基础构件、组件、区块和模板，因此抽象层级可以与实际交付物对应。

当一个组件需要服务多个使用方，而不只是一个独立页面时，这款 Skill 就很有价值。它将 API 形式、无障碍和分发放在一起考虑。源文件主要是参考索引，链接的文件属于实际可用 Skill 的一部分，应与入口文件一同保留。

预期交付物

  • 实现任务：具备明确组合方式和状态模型的组件。
  • 文档任务：覆盖组件 API 及相关行为的使用指导。
  • 任务包含分发时，提供合适的打包或注册表方案。
查看示例简报

从简报到审查

  1. 01
    明确组件接口约定

    判断任务涉及基础构件、组件、区块还是模板。定义公开接口，以及调用方会在哪些场景下组合它。

  2. 02
    阅读相关工程指导

    查阅 state.mdx 了解受控与非受控行为，composition.mdx 了解公开组合模型，accessibility.mdx 了解键盘与焦点要求。实现时参考 types.mdx 和 styling.mdx。仅当调用方需要相应 API 模式时，才加入多态或 as-child 参考。

  3. 03
    实现并说明公开接口

    通过选定的 API 连接状态和呈现。解释预期用法，仅在需要时选择 npm、注册表或其他有文档说明的分发方式。

02 适用场景

适合什么场景

简短的 SKILL.md 依赖随附参考文件提供详细实现指导。

适合的场景

  • 共享组件 API共享组件在被多个团队采用前，需要经过充分设计的公开 API。
  • 组件库工程UI 组件库需要一致的无障碍、主题和文档实践。

需要检查的限制

  • 随附参考文件简短的 SKILL.md 依赖随附参考文件提供详细实现指导。
  • 验证范围入口文件不会认证组件的无障碍，也不保证兼容所有框架。

请提供这些输入

  • 使用方组件的预期使用方和使用示例。
  • 仓库约定仓库的组件技术栈、设计令牌系统和 TypeScript 约定。
  • 行为与分发所需键盘行为、状态归属和分发目标。

03 关键决策

影响结果的关键选择

  1. 明确状态归属

    有意识地选择受控或非受控状态作为 API 设计的一部分。

  2. 选择组合方式

    参考文件涵盖 slots、render props 和 as-child 等用于组合公开组件 API 的模式。

  3. 规划分发

    在实现过程中一并考虑发布和文档。

04 示例任务

从一份具体的需求开始

以下示例任务说明尚未经过测试。使用前请检查该技能的设置。

查看源文件和环境要求

组件的预期使用方和使用示例。

上游源文件
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md

下方链接会打开上游使用说明。使用前请查看仓库的环境配置要求；这不是安装命令。

先完成一项明确的交付物

运行该技能之前,请根据需要调整此需求中的范围、来源材料和约束。

示例简报
使用 building-components，为我们的 React 组件库设计一个可复用的展开/折叠组件。先检查现有基础构件、设计令牌和 TypeScript 模式。在实现前提出公开 API，包含受控和非受控状态。阅读相关的组合、无障碍和状态参考文件。覆盖键盘交互与焦点行为，提供触发器和内容组合的示例，并说明如何通过现有设计令牌设置样式。除非当前任务明确包含发布，否则将注册表或 npm 发布作为单独的提案。

检查结果

根据以下可观察标准检查实际输出。

  • 使用示例调用的是文档中的公开 API，而不是私有内部实现。
  • 键盘、焦点和状态行为有明确的验证结果。
  • 打包说明与预期分发渠道一致。

OpenDesign 为编码智能体提供本地设计工作区。此条目并不表示该技能已内置，也不表示其中包含其外部工具、凭据和软件依赖项。

下载 OpenDesign阅读快速入门指南

05 来源与许可证

来源与许可证

本页面描述的是下方链接所指向的固定来源修订版本。上游行为和要求可能会发生变化。

来源所有者
vercel
仓库
vercel/components.build
技能文件
SKILL.md
许可证
Not confirmed
已审查的快照
2026-11-02 · ba7274504373

阅读说明

  1. 许可证适用范围同一固定版本中，上游声明存在冲突：根目录 LICENSE 明确写明 Apache License 2.0，而 README.md 的 License 部分写的是 MIT，并链接到该文件。skills/building-components 下没有局部覆盖声明。不要直接显示不带限定说明的 MIT 标签；此冲突需要上游澄清。
编辑来源摘要
设计可复用的 UI 组件 API，同时考虑无障碍和分发。

由 OpenDesign 根据所链接来源撰写的原创摘要。仓库星标数只是带有时间属性的受欢迎程度指标，并不代表技能使用量或质量评分。

06 开始前的问题

开始前可能想问

这款 Skill 提供现成的视觉主题吗？

入口主要关注组件工程，并指向设计令牌和样式参考。产品仍需提供自身视觉要求。

每个组件都需要多态吗？

不需要。多态和 as-child 是可选参考主题，仅在 API 需要时选择。

它能帮助通过注册表分发吗？

可以。注册表分发、npm 发布和组件市场各有独立的链接参考。

OpenDesign

让需求和设计工作保存在一起。

将简报、来源材料和设计工作集中保存在本地工作区中。将该技能添加到工作流程前，请检查其自身的设置说明。

下载 OpenDesign浏览设计技能
上游源文件
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md