---

name: building-components description: Guide for building modern, accessible, and composable UI components. Use when building new components, implementing accessibility, creating composable APIs, setting up design tokens, publishing to npm/registry, or writing component documentation.

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