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 dire...
Scanned 9/4/2026
Install to Claude Code
npx -y skills add NeverSight/skills_feed --skill 21st-ui-explore --agent claude-codeInstalls into .claude/skills of the current project.
Are you the author of 21st Ui Explore?
Add the live security badge to your README — it updates automatically with every re-scan.
[](https://www.skillsdirectory.com/skills/neversight-21st-ui-explore)More formats (shields.io, HTML) on the badges page.
---
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.
Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.
No comments yet. Be the first to comment!