
building-components
โ Officialโ 776by vercel ยท part of vercel/components.build
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.
๐ฅ๐ฅ๐ฅ๐ฅโ VerifiedFreeQuick setup
๐งฐ Not standalone. This skill ships with vercel/components.build and only works together with that tool โ install the tool first, then add this skill.
This is the playbook your agent receives when the skill activates โ you don't need to read it to use the skill, but it's here to audit before installing.
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
Copy & paste โ that's it
npx skills add vercel/components.build --skill "building-components" --full-depthRun this in your project โ your agent picks the skill up automatically.
No common issues documented yet. If you hit a problem, the repository's GitHub Issues page is the best place to look.