关于 building-components
Building Components 是为构建 UI 组件及其设计系统提供指导的技能，面向组件开发者和设计系统维护者。内容涵盖无障碍、组合模式、状态管理、主题设计、分发与文档。
主要功能
- 01组件类型与设计原则
- 02ARIA 与键盘无障碍
- 03组合式与多态 API 模式
- 04状态管理与数据属性
- 05设计令牌、主题与组件分发
- 06组件文档编写
适用场景
- 01设计可组合的 UI 组件 API
- 02实现键盘导航与焦点管理
- 03建立主题和设计令牌体系
- 04发布组件并编写文档
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/building-components确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/accessibility.mdxas-child.mdxcomposition.mdxdata-attributes.mdxdefinitions.mdxdesign-tokens.mdxdocs.mdxmarketplaces.mdxnpm.mdxpolymorphism.mdxprinciples.mdxregistry.mdxstate.mdxstyling.mdxtypes.mdx详细介绍
构建组件
何时使用此技能
适用于以下情况：
- 构建新的 UI 组件（基础元素、组件、区块、模板）
- 实现无障碍功能（ARIA、键盘导航、焦点管理）
- 创建可组合的组件 API（插槽、渲染属性、受控 / 非受控状态）
- 设置设计令牌和主题系统
- 将组件发布到 npm 或注册表
- 编写组件文档
- 实现多态或 as-child 模式
- 使用数据属性设置样式 / 状态
参考资料
- definitions.mdx - 产物分类（基础元素、组件、区块、模板）
- principles.mdx - 组件设计的核心原则
- accessibility.mdx - ARIA、键盘导航、WCAG 合规性
- composition.mdx - 可组合组件模式
- as-child.mdx - 用于元素多态的 as-child 模式
- polymorphism.mdx - 多态组件模式
- types.mdx - 组件的 TypeScript 类型模式
- state.mdx - 受控与非受控状态管理
- data-attributes.mdx - 使用数据属性设置样式和状态
- design-tokens.mdx - 设计令牌系统和主题
- styling.mdx - 组件样式方案
- registry.mdx - shadcn 风格的注册表分发
- npm.mdx - 将组件发布到 npm
- marketplaces.mdx - 组件市场分发
- docs.mdx - 编写组件文档
评论
支持 Markdown