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

21st-ui-explore

Skill9 starsChanged 2 months agoApache-2.0View on GitHub

Explore and compare multiple meaningfully different UI directions grounded in the current project's design system and 21st inspiration. Use when the user wants options, variants, concepts, a redesign direction, visual experimentation, or is unsure how a new interface should look. Trigger for requests such as "show me three directions", "explore alternatives", "what could this page look like", or "generate variants". Do not use for a straightforward implementation with an already-selected direction.

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

7 rules. About 0 are common, 4 are distinctive, and 3 are very specific to this project.

  • ≈0

    Common · estimate

    Many files like this have a rule of this kind.

  • ≈4

    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. Distinctive:

    Create real choices without abandoning the project's visual identity.

    line 8
  2. Very specific:

    Read .21st/design.json and the relevant product UI.

    line 12
  3. Distinctive:

    Search 21st for multiple relevant references before generating:

    line 14
  4. Distinctive:

    Keep shared constraints fixed: real stack, tokens, brand assets, required content, accessibility, and responsive behavior.

    line 24
  5. Very specific:

    Create comparable previews.

    line 26
  6. Very specific:

    After selection, remove abandoned local variants and record the decision in .21st/design.json.

    line 42
  7. Distinctive:

    Do not generate random style mutations.

    line 57

≈ “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

Explore grounded UI directions

Create real choices without abandoning the project's visual identity.

Workflow

  1. Read .21st/design.json and the relevant product UI. If context is missing, run 21st init --design-context.

  2. Search 21st for multiple relevant references before generating:

    21st search "<interface and product context>" --context auto
  3. Define three named directions. Each direction must differ on at least two meaningful axes such as hierarchy, information density, navigation model, content emphasis, interaction pattern, or composition. Color-only variants do not count.
  4. Keep shared constraints fixed: real stack, tokens, brand assets, required content, accessibility, and responsive behavior.

  5. Create comparable previews. 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, use hosted generation with available AI credits:

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

    Otherwise, implement the previews 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. Present the options together when the host supports a picker. Otherwise give each option a preview/deep link and a compact comparison.
  7. Recommend one direction with concrete tradeoffs, but let the user choose.
  8. After selection, remove abandoned local variants and record the decision in .21st/design.json.

Direction contract

For every direction provide:

  • a short, descriptive name;
  • the core idea and intended user effect;
  • the 21st/project references used;
  • what stays consistent with the project;
  • two or more meaningful differences;
  • accessibility or responsive risks;
  • the best-fit scenario.

Do not generate random style mutations. Every difference must support a product or usability hypothesis that a user can evaluate.

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