building-components

vercel/components.build

Guide for building modern, accessible, and composable UI components with best practices.

What is building-components?

A comprehensive reference for designing and building production-ready UI components. Use this skill when creating new components, implementing accessibility features, setting up design systems, publishing to registries, or writing component documentation.

Learn component taxonomy (primitives, components, blocks, templates)
Implement accessibility features (ARIA, keyboard navigation, WCAG compliance)
Design composable component APIs (slots, render props, controlled/uncontrolled state)
Apply polymorphic patterns (as-child, element polymorphism)
Set up design tokens and theming systems
Publish components to npm or registry with proper distribution

How to install building-components

npx skills add https://github.com/vercel/components.build --skill building-components

Claude Code

Cursor

Windsurf

Cline

How to use building-components

1.Review the component taxonomy in definitions.mdx to understand artifact types
2.Check principles.mdx for core component design guidelines
3.Consult accessibility.mdx when implementing ARIA and keyboard navigation
4.Use composition.mdx and polymorphism.mdx for API design patterns
5.Reference types.mdx for TypeScript component typing
6.Apply state.mdx patterns for controlled/uncontrolled components
7.Use data-attributes.mdx for styling and state representation
8.Set up design tokens using design-tokens.mdx

Use cases

Good for

Building a reusable component library for a design system
Implementing accessible form components with proper ARIA labels and keyboard support
Creating a polymorphic button component that accepts different HTML elements
Setting up a shadcn-style registry for distributing components
Designing a theming system with design tokens for multiple brand variants

Who it's for

Component library developers
Design system engineers
Frontend developers building reusable UI components
Accessibility specialists implementing WCAG compliance
Teams publishing open-source component packages

building-components FAQ

What's the difference between primitives, components, blocks, and templates?

Primitives are basic building blocks (button, input). Components combine primitives with logic (form field). Blocks are page sections (hero, footer). Templates are full page layouts. See definitions.mdx for details.

How do I make a component accessible?

Implement proper ARIA attributes, keyboard navigation, focus management, and semantic HTML. Reference accessibility.mdx for WCAG compliance patterns and keyboard interaction guidelines.

What's the as-child pattern?

The as-child pattern allows a component to render as its single child element instead of a wrapper, enabling polymorphism without prop drilling. See as-child.mdx for implementation details.

How should I handle component state?

Choose between controlled (parent manages state) and uncontrolled (component manages state) patterns based on use case. See state.mdx for patterns and trade-offs.

What's the best way to publish components?

Choose based on your needs: npm.mdx for standard npm packages, registry.mdx for shadcn-style registries, or marketplaces.mdx for component marketplaces.

Full instructions (SKILL.md)

Source of truth, from vercel/components.build.

name: building-components description: 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.

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