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