SKILL.md
readonly只读
name
building-components
description
构建现代、可访问且可组合的UI组件的指南。适用于构建新组件、实现无障碍功能、创建可组合API、设置设计令牌、发布到npm/注册表或编写组件文档时使用。
构建组件
何时使用此技能
当用户处于以下情况时使用:
- 构建新的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 - 编写组件文档






