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