building-components

SKILL.md

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