building-components skill: build accessible, composable UI components

Makes your agent build UI components to the components.build specification: accessible, composable and themeable.

Installs: 14.9K; on skills.sh
Stars: 802; on GitHub
Files: 15; besides SKILL.md
Updated: Aug 2026; last repo commit

This skill points your agent at the components.build specification while it designs a component. Its SKILL.md lists when to use it and links 15 reference pages on accessibility, composition, the asChild pattern, polymorphism, types, state, data attributes, design tokens, styling, registries, npm, marketplaces and docs.

It triggers when you build new components, add ARIA and keyboard support, create composable APIs, set up design tokens, publish to npm or a registry, or write component documentation. Examples use React and TypeScript, and the README says the principles apply to Vue, Svelte and Angular too.

Good for

Open-source maintainers publishing a component library
Front-end engineers building design-system primitives
Teams adding accessibility and keyboard support to components

Install building-components

Claude Code

Copy this prompt.

Install the building-components skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

When to use this skill
References

Key facts

Author: Vercel (vercel/components.build); the README names Hayden Bleasel and shadcn as co-authors of the specification
Repo: vercel/components.build, folder skills/building-components
Installs on skills.sh: 14,889 as of 2 Nov 2026
GitHub stars: 802 for the whole vercel/components.build repo, 2 Nov 2026
License: Apache 2.0 in the LICENSE file; the README says MIT
Last commit in the repo: 2026-08-20
What is inside: 16 files including SKILL.md: 15 reference pages in .mdx; no scripts
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk pass

What it includes

Terms: primitives, components, blocks, templates
The artifact taxonomy the spec uses.
Read · definitions.mdx
Composable, accessible, customizable, performant, transparent
The values behind the spec.
Read · principles.mdx
Semantic HTML, keyboard navigation, ARIA, focus, contrast
Patterns and common pitfalls.
Try: “Build an accessible dialog component with focus trapping and Escape to close.”
Read · accessibility.mdx
Compound components and the asChild prop
Break big components into subcomponents and let callers swap the rendered element.
Read · composition.mdx and as-child.mdx
The as prop, Slot, and prop typing
Typing patterns for extending HTML attributes and avoiding prop name conflicts.
Read · polymorphism.mdx and types.mdx
Controlled and uncontrolled state
Supporting both modes, including useControllableState from Radix UI.
Read · state.mdx
data-state, CSS variable tokens, tailwind-merge and cva
How to expose state for styling, layer theme tokens and compose class names.
Read · data-attributes.mdx, design-tokens.mdx, styling.mdx
Three ways to distribute components
Source-code registries on the shadcn model, npm packages, and marketplaces such as 21st.dev.
Read · registry.mdx, npm.mdx, marketplaces.mdx
What a component doc page needs
Demos, install steps, API reference, accessibility notes and a changelog.
Read · docs.mdx

From the official docs

Permissions

Low risk

The skill bundles no scripts, but its reference pages show install and publish commands such as npx shadcn and npm install. Read any command the agent proposes before you approve it.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

Reference pages contain install commands
The docs, marketplaces and registry pages include npx shadcn@latest add and npm install examples, some with third-party URLs. Check the URL before you run one. github.com

Technical details

Turning on read-only	The SKILL.md defines no read-only switch.
Scopes	Reads reference pages Reference pages show npx shadcn@latest add and npm install examples

Questions

What does the building-components skill do?

It makes your agent follow the components.build specification when it builds UI components, and read the matching reference page for the topic at hand.

How do I install it?

Use the install box on this page. The skill is a SKILL.md plus 15 reference pages, so adding the skill folder is the whole install.

Does it only work for React?

The examples use React and TypeScript. The components.build README says the core principles apply to Vue, Svelte, Angular and other frameworks.

What license is it under?

The repo has two statements. The LICENSE file is Apache 2.0, and the README says MIT. Check with the repo owner if the license matters for your use.

Is it safe to run?

It bundles no scripts, only reference pages. Some pages show commands like npx shadcn@latest add and npm install as examples, some with third-party URLs, so read any command the agent proposes before you approve it.

Information

updated Nov 2, 2026

Repository: vercel/components.build
Folder: skills/building-components

vercel/components.build skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 5

building-components SKILL.md · github.com
components.build README · github.com
marketplaces reference · github.com
docs.mdx · github.com
registry.mdx · github.com