agentleFS
Sign inStart free
21st-dev21st-dev/skill/skills/21st-ui-build/SKILL.md

21st-ui-build

Skill9 starsChanged 2 months agoApache-2.0View on GitHub

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.

1 other project uses a version of this.

Adopted by

Most recently taken up by

  • Other versions1 project uses a version of this.

    Word for word · 1

    1. masterpeteworld/claude-skills★ 0100% same

    Edited · 0

    None found.

    Wrote their own version · 0

    None found.

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • In this repository6 other files it gives its agents.

The file

We split this skill into the rules it gives an agent

8 rules. About 0 are common, 5 are distinctive, and 3 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈5

    Distinctive · estimate

    This author's own choices. Worth a look.

  • 3

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Very specific:

    Read .21st/design.json and .21st/DESIGN.md.

    line 12
  2. Very specific:

    If no result fits, check MCP get_usage.aiGenerationEnabled or run 21st usage and read the 21st AI generation line.

    line 24
  3. Very specific:

    Run the project's checks and 21st review <changed paths>.

    line 42
  4. Distinctive:

    Prefer project tokens over new arbitrary values.

    line 47
  5. Distinctive:

    Prefer existing components over parallel lookalikes.

    line 48
  6. Distinctive:

    Use real product copy and states when available.

    line 51
  7. Distinctive:

    Avoid decorative gradients, excessive cards, glass effects, huge headlines, and animation unless supported by the project or requested.

    line 52
  8. Distinctive:

    Never claim a component, token, or capability exists without inspecting it.

    line 54

≈ “Common” is an estimate: at least 1 in 5 of the 350,495 skill files we read have a rule of the same kind, not the same words. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

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.

Download now (ZIP)

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free