106.9K+Download
Skip to the usage guide
Building Componentsby vercel

Building Components Skill.

Design reusable UI component APIs with accessibility and distribution in mind.

  • Component APIs
  • Accessibility
Download OpenDesignView Usage Guide
Source Review · building-componentsSKILL.md
Task Design reusable UI component APIs with accessibility and distribution in mind. Produces For an implementation request, a component with an explicit composition and state model. Before You Start The short SKILL.md depends on its bundled references for detailed implementation guidance.
Editorial summary · source reviewed 2026-11-02 · not a generated example

01 What It Does

Design reusable UI component APIs with accessibility and distribution in mind

Plan accessible component APIs, controlled state, styling, tokens and distribution using Vercel's Building Components skill.

Source-based workflowNot an execution benchmark

The Working Approach

Building Components is a guide to the engineering decisions behind a reusable UI library. It routes an agent to focused references for composition, keyboard behavior, state management, TypeScript interfaces and styling. The entry point covers primitives, components, blocks and templates, so the level of abstraction can match the actual deliverable.

This skill is useful when a component must serve several consumers rather than one isolated screen. It brings API shape, accessibility and distribution into the same discussion. The source is primarily a reference index: the linked files are part of the working skill and should accompany the entry file.

Expected Deliverables

  • For an implementation request, a component with an explicit composition and state model.
  • For a documentation request, usage guidance covering the component API and relevant behavior.
  • An appropriate packaging or registry plan when distribution is part of the request.
See the Example Brief

From Brief to Review

  1. 01
    Identify the component contract

    Decide whether the task concerns a primitive, component, block or template. Establish its public interface and the contexts in which callers will compose it.

  2. 02
    Read the relevant engineering guidance

    Read state.mdx for controlled versus uncontrolled behavior, composition.mdx for the public composition model, and accessibility.mdx for keyboard and focus requirements. Consult types.mdx and styling.mdx for the implementation. Add the polymorphism or as-child references only when callers need those API patterns.

  3. 03
    Implement and document the surface

    Connect state and presentation through the chosen API. Explain intended usage and choose npm, a registry or another documented distribution route only when needed.

02 When to Use It

When to Use It

The short SKILL.md depends on its bundled references for detailed implementation guidance.

A Good Fit

  • Shared component APIsA shared component needs a considered public API before several teams adopt it.
  • Library engineeringA UI library needs consistent accessibility, theming and documentation practices.

Limits to Check

  • Bundled referencesThe short SKILL.md depends on its bundled references for detailed implementation guidance.
  • Verification scopeThe entry file does not certify a component's accessibility or guarantee compatibility with every framework.

Bring These Inputs

  • Intended consumersThe component's intended consumers and usage examples.
  • Repository conventionsThe repository's component stack, token system and TypeScript conventions.
  • Behavior and distributionRequired keyboard behavior, state ownership and distribution target.

03 Decisions That Matter

Decisions That Matter

  1. Explicit state ownership

    Controlled and uncontrolled state become deliberate API choices.

  2. Composition choices

    References cover slots, render props and as-child patterns for composing a public component API.

  3. Distribution planning

    Publishing and documentation are considered alongside implementation.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Source and Setup

The component's intended consumers and usage examples.

Upstream Source File
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md

The reference below opens the upstream instructions. Review the repository setup before using them; it is not an installation command.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use building-components to design a reusable disclosure component for our React component library. Inspect our existing primitives, tokens and TypeScript patterns first. Propose the public API, including controlled and uncontrolled state, before implementation. Read the relevant composition, accessibility and state references. Cover keyboard interaction and focus behavior, provide examples of composing the trigger and content, and document styling through our existing tokens. Keep registry or npm publishing as a separate proposal unless the current task explicitly includes a release.

Inspect the Result

Check the actual output against these observable criteria.

  • Usage examples exercise the documented public API rather than private internals.
  • Keyboard, focus and state behavior have explicit verification results.
  • Any packaging instructions match the intended distribution channel.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
vercel
Repository
vercel/components.build
Skill File
SKILL.md
License
Not confirmed
Reviewed Snapshot
2026-11-02 · ba7274504373

Reading Notes

  1. License ScopeConflicting upstream declarations at the same pinned revision: root LICENSE explicitly states Apache License 2.0, while README.md License section says MIT and links that file. No local override exists under skills/building-components. Do not display an unqualified MIT label; upstream clarification is needed to resolve the conflict.
Editorial Source Summary
Design reusable UI component APIs with accessibility and distribution in mind.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does this skill supply a ready-made visual theme?

Its entry point focuses on component engineering and routes to token and styling references. The product still supplies its visual requirements.

Does every component need polymorphism?

No. Polymorphism and as-child are available reference topics, to be selected when the API needs them.

Can it help with registry distribution?

Yes. Registry distribution, npm publishing and component marketplaces each have a dedicated linked reference.

OpenDesign

Keep Your Brief and Design Work Together.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/vercel/components.build/blob/ba727450437385af662810329fa19896215f76d5/skills/building-components/SKILL.md