building-components

モダンでアクセシブル、かつコンポーザブルなUIコンポーネントを構築するための包括的なガイド。コンポーネントの分類（プリミティブ、コンポーネント、ブロック、テンプレート）、コアデザイン原則、ARIA、キーボードナビゲーション、WCAG準拠を含むアクセシビリティ実装について解説。コンポーザブルAPI、ポリモーフィズム、制御/非制御状態、柔軟な要素構成のためのas-childパターンに関するパターンを提供。デザイントークン、テーマシステム、スタイリングアプローチ、および...の使用に関するガイダンスを提供。

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

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

Building Components

When to use this skill

References

vercelのその他のスキル