Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

building-components — Claude Code skill: what it does, install

Guidance for accessible UI components, composable APIs, design tokens, documentation, and package distribution.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add vercel/components.build --skill building-components -a claude-code
Open on GitHub

What building-components does

This skill guides the creation of UI primitives, components, blocks, and templates. It covers accessibility with ARIA, keyboard navigation, and focus management, plus composable APIs built around slots, render props, and controlled or uncontrolled state.

Its reference material covers polymorphic components, the as-child pattern, TypeScript typing, data attributes, styling, and design tokens. Other sections address npm publishing, registry and marketplace distribution, and component documentation.

The skill supports Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode. The guidance is split across reference files, so the relevant file should be checked for the component concern being changed.

What it helps with

  • build an accessible UI component with ARIA and keyboard navigation
  • design a composable API with slots or render props
  • choose controlled or uncontrolled state handling
  • set up design tokens and theming
  • prepare a component for npm or registry distribution

Example prompts for the agent

  • Create a `Dialog` with focus management, ARIA attributes, and keyboard navigation.
  • Design a composable `Select` API with controlled and uncontrolled state, using `as-child` where appropriate.
  • Prepare component documentation and npm publishing using `references/npm.mdx` and `references/docs.mdx`.

How to install building-components

1Skills CLI (Vercel)

npx skills add vercel/components.build --skill building-components -a claude-code

2Manually: put the files in place

~/.claude/skills/building-components/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/building-components/

Similar

threejs-textures CloudAI-X Guides texture loading, color spaces, and transforms for Three.js r186. Useful when building 3D materials with WebGL or WebGPU. Claude Code CX Codex Cursor +1 12,400installs uncodixfy cyxzdev Teaches the agent to skip the default Codex aesthetic: soft gradients, floating panels, decorative copy. Use it when generated frontend looks too much like a template. Claude Code CX Codex Cursor +1 5,600installs ui-ux-pro-max AThevon Generates design systems, palettes, and typography pairs across 22 stacks using a local rule dataset. Helps with UI scaffolding and accessibility checks. Claude Code CX Codex Cursor +1 947installs create-design-md ibelick Creates or updates a DESIGN.md file from a code repository or website. It gives coding agents persistent UI context without altering application source code. Claude Code CX Codex Cursor +1 4,400installs debugging-streamlit streamlit Runs Streamlit full-stack debugging with hot-reload, dedicated session logs, and Playwright UI screenshot helpers for testing frontend and backend changes. Claude Code CX Codex Cursor +1 493installs design-dna zanwei Extracts design tokens, style and visual effects from references, then applies the profile to a design. Use it with screenshots, images, URLs or Design DNA JSON. Claude Code CX Codex Cursor +1 6,500installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about building-components

How do I install building-components in Claude Code?

Run npx skills add vercel/components.build --skill building-components -a claude-code, then run npx skills add vercel/components.build --skill building-components -a claude-code again. The skill file is placed at ~/.claude/skills/building-components/SKILL.md.

What does building-components do?

It guides accessible and composable UI component work, including API design, design tokens, documentation, and distribution through npm, registries, or marketplaces.

Which platforms support building-components?

The skill supports Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and OpenCode.

Source text

SKILL.md · Apache-2.0 
---
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

- [definitions.mdx](./references/definitions.mdx) - Artifact taxonomy (primitives, components, blocks, templates)
- [principles.mdx](./references/principles.mdx) - Core principles for component design
- [accessibility.mdx](./references/accessibility.mdx) - ARIA, keyboard navigation, WCAG compliance
- [composition.mdx](./references/composition.mdx) - Composable component patterns
- [as-child.mdx](./references/as-child.mdx) - The as-child pattern for element polymorphism
- [polymorphism.mdx](./references/polymorphism.mdx) - Polymorphic component patterns
- [types.mdx](./references/types.mdx) - TypeScript typing patterns for components
- [state.mdx](./references/state.mdx) - Controlled vs uncontrolled state management
- [data-attributes.mdx](./references/data-attributes.mdx) - Using data attributes for styling and state
- [design-tokens.mdx](./references/design-tokens.mdx) - Design token systems and theming
- [styling.mdx](./references/styling.mdx) - Component styling approaches
- [registry.mdx](./references/registry.mdx) - shadcn-style registry distribution
- [npm.mdx](./references/npm.mdx) - Publishing components to npm
- [marketplaces.mdx](./references/marketplaces.mdx) - Component marketplace distribution
- [docs.mdx](./references/docs.mdx) - Writing component documentation

© vercel · Apache-2.0 · vercel/components.build

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor