SkillHub

Skills vercel components.build

building-components

Use it when:
You're building UI primitives, components, blocks or templates, especially ones other developers will install and customize.
It does:
Points the agent to the chapter of the components.build specification that fits the task.
Covers:
Accessibility, composition, as-child and polymorphism, TypeScript types, controlled and uncontrolled state, data attributes, design tokens, styling and docs.
Also:
Distributing components through npm, shadcn-style registries and marketplaces.

TL;DR

The skill is an index to components.build, an open specification for building UI components for the web, split into fifteen reference files. Its definitions separate primitives, unstyled building blocks that handle behaviour and accessibility such as Radix or React Aria, from styled components, blocks and templates. Its principles favour composition over inheritance, accessibility as a baseline with semantic HTML, ARIA and keyboard support, styles that can be overridden through tokens or class names, few dependencies, and code users can read and change, the idea behind copy-and-paste distribution. Other files cover patterns such as as-child, polymorphism, slots and controlled state, plus publishing and documenting components. Its terms are framework-agnostic, with React for examples. It holds guidance only and changes nothing by itself.

Summarizes the skill at ba72745.

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

skills.sh pageSource on GitHubAll skills from vercel/components.build

Total Downloads
15,100 on skills.sh, Nov 9, 2026
Repo stars
802 vercel/components.build
First seen
Feb 4, 2026 on skills.sh
Weekly Downloads
177
-54% over the 8 weeks to Nov 9
Weekly values
Week toInstalls
Sep 21381
Sep 28303
Oct 5305
Oct 12306
Oct 19282
Oct 26222
Nov 2217
Nov 9177
Category
category:designcategory:software-engineering

Taste for interfaces that don't look generated: direction, motion and accessibility.

Everything for building software: planning, coding, debugging, design, frameworks, cloud, agents and skills.
Type
type:guidelines

Knowledge and rules the agent applies while it works: best practices, design principles, API references.
Effect
effect:none

Adds no side effects of its own. It shapes how the agent thinks, writes or reviews. Guidelines and routers are always effect:none, even when the task they support edits code.
Needs
needs:none

Instructions only. Works in any agent that supports skills.
Publisher
by:official

A verified publisher on skills.sh, or the company or maintainer behind the product the skill operates.
Topics
design-systemaccessibilitydocs-writing
Stack
stack:reactstack:typescriptstack:shadcn

SKILL.md

From vercel/components.build at ba72745. Checked daily, last changed Nov 6, 2026.

Frontmatter
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

References