How do I install the 21st UI Build skill?

Run npx skillmds@latest add 21st-dev/21st-ui-build in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

Is 21st UI Build safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: reads secrets. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with 21st UI Build?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is 21st UI Build free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published 21st UI Build?

21st-dev (@21st-dev) published this skill. Their other Agent Skills are listed on their SkillMD profile.

21st UI Build by 21st-dev — Agent Skill

Name: 21st UI Build
Rating: 4.2 (5 reviews)
Author: 21st-dev

21st UI Build

Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.

21st-dev Updated Sep 9, 2026

File contents

Build project-aware UI

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

Workflow

Read .21st/design.json and .21st/DESIGN.md. If neither exists, run 21st init --design-context.
Inspect the target route, its closest components, project instructions, and existing tokens. Treat explicit project facts as stronger than generic taste.

Search before generating:

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

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

If no result fits, generate project-aware alternatives:

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

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.
Preserve responsive behavior, keyboard interaction, visible focus, semantics, reduced motion, loading states, empty states, and error states.
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.

---name: 21st-ui-builddescription: Build or substantially change production UI using the current project's design context, existing components, and grounded 21st inspiration. Use when implementing a page, section, component, responsive redesign, or visual polish in an existing web project. Trigger for requests such as "build this UI", "implement this screen", "make this page production-ready", or "use 21st to create the interface". Use 21st-ui-explore first when the visual direction is intentionally undecided, and 21st-ui-review for critique-only work.--- # 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: ```bash 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, generate project-aware alternatives: ```bash 21st generate "<goal and constraints>" --context auto --variants 3 ``` 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.

Frequently asked questions