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

building-components