mcpField
2
21st-ui-build

21st-ui-build

github.com/21st-devDesign & UI311.4k installsUpdated 7w ago
Repository

About 21st-ui-build

A skill for implementing UI that fits an existing project's design and codebase, using 21st references and components where useful. It guides coding agents through inspection, search, implementation, and verification.

Key features

  1. 01Reads project design context
  2. 02Inspects routes and components
  3. 03Searches 21st before generation
  4. 04Reuses project primitives
  5. 05Checks accessibility and responsive behavior
  6. 06Runs project checks and 21st review

Use cases

  1. 01Building a feature consistent with existing UI
  2. 02Selecting reusable 21st components
  3. 03Verifying a UI implementation

MCP support

The workflow can use 21st MCP's search, get_component, and get_usage tools to find components and check whether AI generation is enabled.

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/21st-dev/skill --skill 21st-ui-build

After installing, type/21st-ui-buildin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

Build project-aware UI

Preserve the product's identity while using 21st supply to accelerate implementation.

Workflow

  1. Read .21st/design.json and .21st/DESIGN.md. If neither exists, run 21st init --design-context.

  2. Inspect the target route, its closest components, project instructions, and existing tokens. Treat explicit project facts as stronger than generic taste.

  3. Search before generating:

    21st search "<specific UI need>" --context auto

  4. Reuse installed project primitives first. Retrieve or install a 21st result only when it reduces duplication or materially improves the result.

  5. If no result fits, check MCP get_usage.aiGenerationEnabled or run 21st usage and read the 21st AI generation line. CLI 1.17.1+ also supports 21st usage --json. Only when AI is explicitly enabled, generate project-aware alternatives using available AI credits:

    21st generate "<goal and constraints>" --context auto --variants 3

    Otherwise, implement alternatives with your own coding agent, grounded in 21st search and 21st get (MCP: search and get_component). Do not call or suggest hosted generate or iterate_generation without AI access.

  6. Implement the selected direction in the project's real framework. Do not paste sketch HTML when the project expects React components, tokens, or established APIs.

  7. Preserve responsive behavior, keyboard interaction, visible focus, semantics, reduced motion, loading states, empty states, and error states.

  8. Run the project's checks and 21st review <changed paths>. Apply only safe, deterministic fixes automatically.

Design rules

  • Prefer project tokens over new arbitrary values.
  • Prefer existing components over parallel lookalikes.
  • Preserve established density, radii, typography, iconography, and layout rhythm unless the user explicitly requests a redesign.
  • Use real product copy and states when available.
  • Avoid decorative gradients, excessive cards, glass effects, huge headlines, and animation unless supported by the project or requested.
  • Never claim a component, token, or capability exists without inspecting it.

Handoff

Report the direction used, reused 21st/project components, files changed, and verification performed. Record a durable visual choice in .21st/design.json under decisions when the user selects a new direction.

Comments

Markdown supported