How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/vercel/components.build --skill building-componentsBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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
