From components-build
Open standard specification for building modern UI components (by Vercel). Covers composition, accessibility, polymorphism, state management, styling with Tailwind, design tokens, type-safe props, data attributes, and distribution via npm/registry/marketplace. Use when designing reusable component APIs, building design systems, or following component best practices. Common triggers: "component composition", "compound components", "asChild", "data-slot", "component registry", "design tokens", "components.build". Do NOT use for: general React questions unrelated to component design spec, specific library APIs (Radix, shadcn/ui installation).
npx claudepluginhub totto2727-org/monorepo --plugin components-buildThis skill uses the workspace's default tool permissions.
<!-- Generated from https://www.components.build/sitemap.xml -->
Generates design tokens/docs from CSS/Tailwind/styled-components codebases, audits visual consistency across 10 dimensions, detects AI slop in UI.
Records polished WebM UI demo videos of web apps using Playwright with cursor overlay, natural pacing, and three-phase scripting. Activates for demo, walkthrough, screen recording, or tutorial requests.
Delivers idiomatic Kotlin patterns for null safety, immutability, sealed classes, coroutines, Flows, extensions, DSL builders, and Gradle DSL. Use when writing, reviewing, refactoring, or designing Kotlin code.
components.build is an open-source specification established by Vercel for designing and building modern UI components. It defines a formal standard for creating composable, accessible, and adoptable components for the web.
The specification is framework-agnostic in its principles but uses React for examples. It covers the full lifecycle of component development — from API design and composition patterns to styling, state management, accessibility, and distribution.
as/asChild), type-safe props, data attributescn utility, Class Variance Authority, design tokenscurl or WebFetch before answering questions about that topic.https://www.components.build/.curl https://www.components.build/llms.mdx/{slug}
curl https://raw.githubusercontent.com/vercel-labs/agent-skills/refs/heads/main/skills/composition-patterns/AGENTS.md
| Slug | Title | Description |
|---|---|---|
accessibility | Accessibility | Building components that are usable by everyone, including users with disabilities who rely on assistive technologies. |
as-child | asChild | How to use the asChild prop to render a custom element within the component. |
composition | Composition | The foundation of building modern UI components. |
data-attributes | Data Attributes | Using data attributes for declarative styling and component identification. |
definitions | Definitions | This page establishes precise terminology used throughout the specification. Terms are intentionally framework agnostic, but we will use React for examples. |
design-tokens | Design Tokens | How semantic naming conventions and design tokens create a flexible, maintainable theming system. |
docs | Docs | How to document your components. |
marketplaces | Marketplaces | Using component marketplaces to share your components. |
npm | NPM | How to publish your components to NPM. |
polymorphism | Polymorphism | How to use the as prop to change the rendered HTML element while preserving component functionality. |
principles | Core Principles | When building modern UI components, it's important to keep these core principles in mind. |
registry | Registry | Understand the concept of component registries, how they work, and why they're revolutionizing how developers share and discover UI components. |
state | State | How to manage state in a component, as well as merging controllable and uncontrolled state. |
styling | Styling | Conditional and composable styling with Tailwind classes. |
types | Types | Extending the browser's native HTML elements for maximum customization. |
Should trigger:
Should NOT trigger: