Back to Details

building-components

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Building Components

组件构建

When to use this skill

何时使用本技能

Use when the user is:
  • Building new UI components (primitives, components, blocks, templates)
  • Implementing accessibility features (ARIA, keyboard navigation, focus management)
  • Creating composable component APIs (slots, render props, controlled/uncontrolled state)
  • Setting up design tokens and theming systems
  • Publishing components to npm or a registry
  • Writing component documentation
  • Implementing polymorphism or as-child patterns
  • Working with data attributes for styling/state
适用于以下场景：
  • 构建新的UI组件（基础组件、复合组件、区块、模板）
  • 实现无障碍功能（ARIA、键盘导航、焦点管理）
  • 创建可组合的组件API（插槽、渲染属性、受控/非受控状态）
  • 设置设计令牌和主题系统
  • 将组件发布至npm或组件注册表
  • 编写组件文档
  • 实现多态或as-child模式
  • 使用数据属性进行样式/状态管理

References

参考资料

  • definitions.mdx - Artifact taxonomy (primitives, components, blocks, templates)
  • principles.mdx - Core principles for component design
  • accessibility.mdx - ARIA, keyboard navigation, WCAG compliance
  • composition.mdx - Composable component patterns
  • as-child.mdx - The as-child pattern for element polymorphism
  • polymorphism.mdx - Polymorphic component patterns
  • types.mdx - TypeScript typing patterns for components
  • state.mdx - Controlled vs uncontrolled state management
  • data-attributes.mdx - Using data attributes for styling and state
  • design-tokens.mdx - Design token systems and theming
  • styling.mdx - Component styling approaches
  • registry.mdx - shadcn-style registry distribution
  • npm.mdx - Publishing components to npm
  • marketplaces.mdx - Component marketplace distribution
  • docs.mdx - Writing component documentation
  • 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 - 编写组件文档