# Building Components > 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. Use when this capability is needed. - Skill: `tomevault-io/building-components` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/building-components` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/building-components/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/building-components --- # 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 --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/masumi-network) — claim your Tome and manage your conversions.