New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Components Build

by Asymmetric-al in Asymmetric-al/core

Build modern, composable, and accessible React UI components following the components.build specification.

MITAuto-check passedFrontend & Design

Install Components Build

skills CLI
$ npx skills add Asymmetric-al/core --skill components-build -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Asymmetric-al/core components-build --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Asymmetric-al/core.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/components-build .claude/skills/components-build && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
components-build
GitHub stars
381
Token cost
~2.1k tokens
SKILL.md length
763 words
Files
22 (incl. references)
Skills in repo
45
Repo updated
First seen
Licence
MIT

At a glance

Build modern, composable, and accessible React UI components following the components.build specification.

  • Works in 12 steps: Overview → Principles → Definitions → …
  • Refactoring component libraries
  • SKILL.md covers This repository…, When to Apply, Rule Categories by Priority and Quick Reference, plus 4 more sections
  • Calls bun

What it does

Components Build is an agent skill from Asymmetric-al/core. Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.

Its SKILL.md is about 2.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 23 other files, including reference files (for example `AGENTS.md`, `README.md` and `references/upstream.md`).

It sits in Frontend & Design, covering Design systems, Accessibility and Design patterns. It works with React, TypeScript and shadcn/ui. The repository describes itself as: A high-performance, enterprise-grade Next.js 16 application for mission-focused non-profit organizations. Built for high impact teams. The licence is MIT.

When your agent uses it

  • Refactoring component libraries
  • Any reusable UI components
  • Tasks involving component APIs
  • Composition patterns

Example prompts

  • “/components-build”

Workflow steps

12 steps, taken from the step headings in SKILL.md.

  1. Overview
  2. Principles
  3. Definitions
  4. Composition
  5. Accessibility
  6. State
  7. Types
  8. Polymorphism
  9. As-Child
  10. Data Attributes
  11. Styling
  12. Design Tokens

What it can do on your machine

Read from SKILL.md and the folder at commit 225c02e. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • bun

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    Links to these hosts (documentation or services it may open):

    • x.com
    • components.build

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Components Build loads about 2.1k tokens when it runs, and up to ~2.4k if it reads all its reference files. Until then it costs about 89 tokens; SKILL.md has 763 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~89
When it runs · the whole SKILL.md, loaded when a task matches
~2.1k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~2.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Asymmetric-al/core at commit 225c02e, republished under its MIT licence (© Asymmetric-al). 763 words, ~2,073 tokens.

Download SKILL.mdSave it as .claude/skills/components-build/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.
name
components-build
description
Build modern, composable, and accessible React UI components following the components.build specification. Use when creating, reviewing, or refactoring component libraries, design systems, or any reusable UI components. Triggers on tasks involving component APIs, composition patterns, accessibility, styling systems, or TypeScript props.
license
MIT
metadata.author
components.build
metadata.version
1.0.0

Components.build Specification

This repository (Asymmetric-al/core)

These repo-owned sections are intentionally kept on top of the vendored components.build skill. If upstream refreshes replace this file, reconcile this overlay before running bun run skills:sync.

Base UI only: shared primitives come from @base-ui/react via the shadcn base-maia style in packages/ui. Where the vendored spec references Radix or asChild, use Base UI's render prop instead and never add radix-ui/@radix-ui/*. See docs/ai/rules/frontend.md.

Triggers
  • Creating, reviewing, or refactoring reusable React components, component APIs, slots, or composition patterns.
  • Design-system work in packages/ui/, shadcn-compatible primitives, or shared app UI surfaces.
  • Accessibility, controlled/uncontrolled state, polymorphism, or TypeScript prop contract decisions for components.
Workflow
  1. Read docs/ai/rules/frontend.md and any nested AGENTS.md for the target package/app.
  2. Search existing shared components before adding a new primitive or abstraction.
  3. Prefer repo patterns and shadcn-compatible composition over bespoke APIs.
  4. Keep behavior and accessibility test coverage proportional to the component's reuse surface.
  5. Run focused type/lint/unit checks for touched component packages.
Checklist
  • Existing components and exports were checked before adding new API surface.
  • Composition, keyboard, ARIA, focus, and disabled/loading states were considered.
  • Props/types follow the local package's public export pattern.
  • Styling uses repo tokens/utilities and avoids layout-shifting dynamic content.
  • Verification covered the touched component behavior or contract.

Comprehensive guidelines for building modern, composable, and accessible UI components. Contains 16 rule categories covering everything from core principles to distribution, co-authored by Hayden Bleasel and shadcn.

When to Apply

Reference these guidelines when:

  • Creating new React components or component libraries
  • Designing component APIs and prop interfaces
  • Implementing accessibility features (keyboard, ARIA, focus management)
  • Building composable component architectures
  • Styling components with Tailwind CSS and CVA
  • Publishing components to registries or npm

Rule Categories by Priority

PriorityCategoryFocusPrefix
1OverviewSpecification scope and goalsoverview
2PrinciplesCore design philosophyprinciples
3DefinitionsCommon terminologydefinitions
4CompositionBreaking down complex componentscomposition
5AccessibilityKeyboard, screen readers, ARIAaccessibility
6StateControlled/uncontrolled patternsstate
7TypesTypeScript props and interfacestypes
8PolymorphismElement switching with as proppolymorphism
9As-ChildRadix Slot composition patternas-child
10Data Attributesdata-state and data-slotdata-attributes
11StylingTailwind CSS, cn utility, CVAstyling
12Design TokensCSS variables and themingdesign-tokens
13DocumentationComponent documentationdocumentation
14RegistryComponent registriesregistry
15NPMPublishing to npmnpm
16MarketplacesComponent marketplacesmarketplaces

Quick Reference

1. Overview
  • overview - Specification scope, goals, and philosophy
2. Principles
  • principles - Composability, accessibility, customization, transparency
3. Definitions
  • definitions - Common terminology (primitive, compound, headless, etc.)
4. Composition
  • composition-root - Root component with Context for shared state
  • composition-item - Item wrapper components
  • composition-trigger - Interactive trigger components
  • composition-content - Content display components
  • composition-export - Namespace export pattern
5. Accessibility
  • accessibility-semantic-html - Use appropriate HTML elements
  • accessibility-keyboard - Full keyboard navigation support
  • accessibility-aria - Proper ARIA roles, states, and properties
  • accessibility-focus - Focus management and restoration
  • accessibility-live-regions - Screen reader announcements
  • accessibility-contrast - Color contrast requirements
Show full SKILL.md (292 more words)Show less
6. State
  • state-uncontrolled - Internal state management
  • state-controlled - External state delegation
  • state-controllable - Support both patterns with useControllableState
7. Types
  • types-extend-html - Extend native HTML attributes
  • types-export - Export prop types for consumers
  • types-single-element - One component wraps one element
8. Polymorphism
  • polymorphism-as-prop - Change rendered element type
  • polymorphism-typescript - Type-safe polymorphic components
  • polymorphism-defaults - Semantic element defaults
9. As-Child
  • as-child-slot - Radix Slot for prop merging
  • as-child-composition - Compose with child components
10. Data Attributes
  • data-attributes-state - Use data-state for styling states
  • data-attributes-slot - Use data-slot for targeting sub-components
11. Styling
  • styling-cn-utility - Combine clsx and tailwind-merge
  • styling-order - Base → Variants → Conditionals → User overrides
  • styling-cva - Class Variance Authority for variants
  • styling-css-variables - Dynamic values with CSS variables
12. Design Tokens
  • design-tokens-css-variables - Define tokens as CSS variables
  • design-tokens-theming - Support light/dark modes and themes
13. Documentation
  • documentation-props - Document all props with JSDoc
  • documentation-examples - Provide usage examples
14. Registry
  • registry-structure - Registry file structure
  • registry-schema - Component metadata schema
15. NPM
  • npm-package-json - Package configuration
  • npm-exports - Module exports
16. Marketplaces
  • marketplaces-distribution - Component distribution strategies

How to Use

Read individual rule files for detailed explanations and code examples:

rules/composition/SKILL.md
rules/accessibility/SKILL.md
rules/styling/SKILL.md

Each rule file contains:

  • Brief explanation of why it matters
  • Incorrect code example with explanation
  • Correct code example with explanation
  • Best practices and common pitfalls

Full Compiled Document

For the complete guide with all rules expanded: AGENTS.md

Key Principles

  1. Composition over Configuration - Break components into composable sub-components
  2. Accessibility by Default - Not an afterthought, but a requirement
  3. Single Element Wrapping - Each component wraps one HTML element
  4. Extend HTML Attributes - Always extend native element props
  5. Export Types - Make prop types available to consumers
  6. Support Both State Patterns - Controlled and uncontrolled
  7. Intelligent Class Merging - Use cn() utility with tailwind-merge

Authors

Co-authored by:

Adapted as an AI skill by:

Based on the components.build specification.

© Asymmetric-al, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 21 other files (references) in .agents/skills/components-build of Asymmetric-al/core.

  • SKILL.md
  • AGENTS.md
  • README.md
  • references/upstream.md
  • rules/_sections.md
  • rules/_template.md
  • rules/accessibility.md
  • rules/as-child.md
  • rules/composition.md
  • rules/data-attributes.md
  • rules/definitions.md
  • rules/design-tokens.md
  • rules/documentation.md
  • rules/marketplaces.md
  • rules/npm.md
  • rules/overview.md
  • rules/polymorphism.md
  • rules/principles.md
  • rules/registry.md
  • … and 3 more

Open the folder on GitHubat commit 225c02e

Compare with similar skills

Components Build next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Components Build compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Components Build this skillAsymmetric-al/core381—~2.1kAutomated safety check: PassMIT
Ss Learnbitjaru/styleseed974—~1.3kAutomated safety check: PassMIT
Avoid AI Designsunkaifei/FlyCms656—~3.5kAutomated safety check: PassMIT
Animated React Component LibrariesHainrixz/editor-pro-max2641 repos~5.7kAutomated safety check: PassCustom licence
Extract DesignManavarya09/design-extract4.2k—~786Automated safety check: NotesMIT
Morphous CatalogAmeyanagi/morphos102—~2.1kAutomated safety check: PassApache-2.0

Similar skills

  • Ss Learn

    bitjaru/styleseed

    Capture a human-approved UI design lesson as a privacy-minimized local StyleSeed candidate, review it, and prepare an opt-in share package without transmitting project code, prompts, screenshots, or…

    974 GitHub stars~1.3k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Avoid AI Design

    sunkaifei/FlyCms

    Audit and rewrite frontend UI to remove generic AI design patterns ("AI slop"), both the first-order defaults (purple gradients, Inter, a centered hero over three cards, untouched shadcn) and the…

    656 GitHub stars~3.5k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

  • Animated React Component Libraries

    Hainrixz/editor-pro-max

    Helps choose and drop in animated React components from Magic UI and React Bits for landing pages, marketing sites and dashboards, instead of hand-coding animations.

    264 GitHub starsUsed in 1 repo~5.7k tokens
    Frontend & DesignAuto-check passed

  • Extract Design

    Manavarya09/design-extract

    Extract the full design language from any website URL. An agent skill from Manavarya09/design-extract.

    4.2k GitHub stars~786 tokensUpdated yesterday
    Frontend & DesignAuto-check: notes

  • Morphous Catalog

    Ameyanagi/morphos

    Create or refresh Morphous website design-system/theme bundles from animal, insect, plant, landscape, mineral, weather, or other nature motifs.

    102 GitHub stars~2.1k tokensUpdated 1 mo ago
    Frontend & DesignAuto-check passed

  • Connect Component To Figma

    dequelabs/cauldron

    Add a Figma Code Connect (.figma.tsx) file for a Cauldron React component.

    129 GitHub stars~2k tokensUpdated yesterday
    Frontend & DesignAuto-check passed

More from Asymmetric-al/core

All 45 skills in this repo

  • Idempotency Handling

    Asymmetric-al/core

    Implement idempotency keys and handling to ensure operations can be safely retried without duplicate effects.

    381 GitHub stars~867 tokensUpdated yesterday
    Auto-check passed

  • Accessibility Review

    Asymmetric-al/core

    Audit and fix accessibility in Core UI. An agent skill from Asymmetric-al/core.

    381 GitHub stars~1.1k tokensUpdated yesterday
    Auto-check passed

  • Agent Email Inbox

    Asymmetric-al/core

    A skill your agent uses when building any system where email content triggers actions — AI agent inboxes, automated support handlers, email-to-task pipelines, or any workflow processing untrusted…

    381 GitHub stars~4.1k tokensUpdated yesterday
    Auto-check: notes

  • Create Agent

    Asymmetric-al/core

    Guides a one-question-at-a-time design interview, captures alignment in agent/EVE-BRIEF.md, then scaffolds and implements a runnable eve agent with verbose teaching comments.

    381 GitHub stars~2.6k tokensUpdated yesterday
    Auto-check: notes

  • Emil Design Engineering

    Asymmetric-al/core

    Design engineering principles and patterns for building polished, accessible web interfaces.

    381 GitHub stars~1.4k tokensUpdated yesterday
    Auto-check passed

  • Grill For Unknowns

    Asymmetric-al/core

    Use only when the user explicitly invokes grill-for-unknowns or asks for a map-vs-territory unknowns pass, blindspot discovery, unknown-known prototypes, or a subagent launch packet before…

    381 GitHub stars~4.6k tokensUpdated yesterday
    Auto-check passed

Works with

Categories

Questions about Components Build

What does Components Build do?

Build modern, composable, and accessible React UI components following the components.build specification. Components Build is an agent skill from Asymmetric-al/core.build specification.

When should I use Components Build?

Components Build fits situations like: refactoring component libraries; any reusable UI components; tasks involving component APIs; composition patterns.

How do I install Components Build in Claude Code?

Run `npx skills add Asymmetric-al/core --skill components-build -a claude-code`. Or copy the skill folder (.agents/skills/components-build in Asymmetric-al/core) into .claude/skills/components-build in your project. Claude Code loads it when a task matches its description.

How do I install Components Build in Codex?

Run `npx skills add Asymmetric-al/core --skill components-build -a codex`. Or copy the skill folder (.agents/skills/components-build in Asymmetric-al/core) into .agents/skills/components-build in your project. Codex loads it when a task matches its description.

Can I use Components Build in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Asymmetric-al/core --skill components-build -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/components-build, .gemini/skills/components-build, .github/skills/components-build and .opencode/skills/components-build in your project.

What does Components Build need to run?

Going by SKILL.md and its folder, Components Build needs the command-line tools its instructions call (bun).

Does Components Build access the network?

SKILL.md names 2 domains. As links in the text: x.com and components.build. This is read from the text; nothing was executed.

Is Components Build safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Components Build use?

Components Build is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Components Build use?

About 2.1k tokens (SKILL.md is roughly 8.3k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 291 tokens, read only when the agent opens those files.

What are the alternatives to Components Build?

Skills that share tags, products or a category with Components Build: Ss Learn (bitjaru/styleseed, 974 stars), Avoid AI Design (sunkaifei/FlyCms, 656 stars), Animated React Component Libraries (Hainrixz/editor-pro-max, 264 stars) and Extract Design (Manavarya09/design-extract, 4.2k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Components Build?

Asymmetric-al (a GitHub organization) maintains it in Asymmetric-al/core, which has 381 GitHub stars. The repository holds 45 skills in this directory. The repository was last updated on October 8, 2026.

Source: Asymmetric-al/core on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.