Building Components

vercel/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.

30k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

786

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

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

What comes with it

118 720 bytes besides the instruction

references/accessibility.mdx

references/as-child.mdx

references/composition.mdx

references/data-attributes.mdx

references/definitions.mdx

references/design-tokens.mdx

references/docs.mdx

references/marketplaces.mdx

references/npm.mdx

references/polymorphism.mdx

references/principles.mdx

references/registry.mdx

references/state.mdx

references/styling.mdx

references/types.mdx

The instruction itself

3 sections, as written by the author

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

How to use it

Copy the folder

Take vercel/building-components from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.