About building-components
Building Components is a guidance skill for developing UI components and design systems. It is aimed at component developers and design-system maintainers, covering accessibility, composition, state, theming, distribution, and documentation.
Key features
- 01Component taxonomy and design principles
- 02ARIA and keyboard accessibility
- 03Composable and polymorphic API patterns
- 04State management and data attributes
- 05Design tokens, theming, and distribution
- 06Component documentation
Use cases
- 01Design a composable UI component API
- 02Implement keyboard navigation and focus management
- 03Build a theming and design-token system
- 04Distribute components and write documentation
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/building-componentsin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
references/accessibility.mdxas-child.mdxcomposition.mdxdata-attributes.mdxdefinitions.mdxdesign-tokens.mdxdocs.mdxmarketplaces.mdxnpm.mdxpolymorphism.mdxprinciples.mdxregistry.mdxstate.mdxstyling.mdxtypes.mdxDetails
From the project READMEBuilding 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
Comments
Markdown supported