21st-ui-explore

Shows you multiple design directions for a new interface so you can pick the best look.

Installation
Run `npx skills add "https://github.com/21st-dev/skill" --skill "21st-ui-explore"` to install this skill, then follow its SKILL.md instructions for my next request.

Paste this into Claude Code, Cursor, or any agent that can run commands.

SKILL.mdShow the author's original SKILL.md
---
name: 21st-ui-explore
description: 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.
---

# 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:

   ```bash
   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. Generate or implement comparable previews. Prefer:

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

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.

Ships with 1 supporting file:

  • agents/openai.yaml

Mirrored from the author's public source. Install counts from the open skills registry.

The systems behind these skills get built for partners every week.

Partner with us