Skip to main content

21st-ui-build: Implement project-aware interfaces

Builds or substantially changes a web interface using the current project's design context, components, and selected 21st references.

Source facts

Repository
21st-dev/claude-code-plugin
Last source activity
September 9, 2026 at 20:02
Detected SKILL.md language
English
Stars
20
Forks
2

How to use

Read the project's 21st design context and existing tokens, inspect the target route and nearby components, then implement and hand off the selected direction.

Limitations

Use 21st-ui-explore first when the visual direction is still open; this Skill is for implementation.

Install options

The review-first prompt is selected by default. You can switch to a direct command or download a local copy.

Review the source files

Read SKILL.md and any companion files shown by SkillsMP before deciding whether to install.

File Explorer
2 files

Showing SKILL.md

SKILL.md
Source instructions · Read-only preview
name
21st-ui-build
description
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, 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: ```bash 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.
View on GitHub