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의 다른 스킬