building-components skill
A skill based on the components.build specification: how to build composable, accessible and styleable UI components and publish them
- 801 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill consists of Markdown instructions and references and runs nothing itself
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/building-componentsDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of Markdown instructions and references and runs nothing itself
This is third-party code. Review the repository files before installing.
What it does
The building-components skill turns the open components.build specification into a reference for the agent. The specification was written by Hayden Bleasel and the author of shadcn, and the skill lives in `skills/building-components` with a `SKILL.md` file and fifteen reference documents. The documents move from definitions (primitive, component, block, template) and principles to concrete techniques: ARIA and keyboard control, composition, the `as-child` pattern, polymorphic components, TypeScript types, controlled and uncontrolled state, data attributes, design tokens and styling. Separate sections explain publishing components through a shadcn-style registry, through npm or on a marketplace, and how to write documentation. Examples use React and TypeScript, but the principles are written to fit Vue, Svelte and Angular. The reference files are synced from the site documentation sources, so the skill repeats the published version of the specification.
Who it is for. Maintainers of open component libraries and front-end engineers designing their own design system who let an agent write components.
Good fit when
- The agent writes a button, dialog or dropdown and needs correct ARIA roles and focus
- A library is designed as a set of composable parts instead of a monolithic component with ten props
- A component must accept another tag through `as-child` while keeping TypeScript types
- Colors and sizes move into design tokens with theme support
- A component set is being prepared for publishing to npm or a shadcn-style registry with documentation
Not a fit when
- The app is assembled from ready shadcn/ui components with none written in-house
- You need the concrete API of a ready library: the skill describes principles and does not list Chakra or Radix props
- The interface is not built on web technologies, for example a native mobile app
Example request
Using the building-components skill, build a Dialog from composable parts with focus kept inside and closing on EscapeLimitations
The author does not describe the `npx skills add vercel/components.build` command: it is generic for repositories with SKILL.md, and the README points to the specification and the contribution guide. The skill gives principles and is oriented to React and TypeScript. For other frameworks the techniques have to be ported by hand. The repository metadata does not define a license, while the README names MIT. The skill runs nothing, it is a set of Markdown files. Component quality depends on how closely the agent follows the specification.
How to disable. Delete the `building-components` folder from the agent skills directory, for example `.claude/skills/`.
FAQ
What is components.build and how does the skill relate to it?
It is an open specification of best practices for UI components written by Hayden Bleasel and the author of shadcn. The `building-components` skill moves its sections into a format the agent reads on demand.
Which topics does the reference cover?
It has fifteen files: definitions, principles, accessibility, composition, `as-child`, polymorphism, types, state, data attributes, design tokens, styling, registry, npm, marketplaces and documentation.
Does the skill suit Vue or Svelte?
The principles are described independent of framework, but all examples use React and TypeScript. The agent carries over the ideas of composition and accessibility, and the syntax has to be checked against your library.
How does the skill get updated?
The repository runs a `sync-skill-docs` process that pulls the reference files from the site documentation. To get a fresh version, reinstall the skill.
How does the skill differ from shadcn/ui?
shadcn/ui ships ready components, while `building-components` explains how to design your own. The agent combines them when you build a shadcn-style registry.
Discussion
No questions or reviews yet.
Related
Skillsshadcn-svelte skill for agents
shadcn-svelte
A shadcn-svelte skill: the agent reads components.json, adds components with the CLI and builds forms, dialogs and cards by the library's rules
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
shadcn-vue skill for agents
shadcn-vue skill
The shadcn-vue skill reads your project settings and teaches an agent to add components, forms and themes of the Vue port of shadcn/ui by its rules
A skill that picks and installs beUI animated React components through the public MCP or the shadcn registry instead of hand-built widgets
An MCP server and skill for interfaces: 31 design systems for shadcn/ui, UI and UX principles and accessibility review for agent-written code
Nuxt UI v4 skill: an agent builds Vue and Nuxt interfaces, picks components, sets up the theme and lays out forms and dashboards
README in short
The README presents components.build as a formal specification for open UI components and lists the properties it aims for. Then a pointer to the contribution guide and the MIT license.
README badge
Original SKILL.md
--- 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