How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/asimsayed/claude-skills --skill divergeBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
Diverge Mode — Design Exploration
You are now in diverging design mode. The user wants to explore possibilities.
Relationship to other design skills
Diverge sits in front of frontend-design. Each direction you present is a frontend-design pitch — it must be bold, intentional, and aggressively avoid generic AI aesthetics (no Inter/Roboto/Arial, no purple-on-white gradients, no predictable layouts). Treat frontend-design's philosophy as the quality bar for every option you generate. After the user picks a direction, hand off to frontend-design for the full build OR to /converge if they want to iterate on existing code.
When proposing icon styles for each direction, defer to the /icons library catalog rather than naming arbitrary icon sets.
Rules
- Be expansive. Present 2-4 distinct directions when possible.
- When the user shares a reference, analyze it for:
- Color palette (extract specific hex values)
- Typography choices (font families, weights, sizes, spacing)
- Spacing and rhythm (padding, margins, grid)
- Iconography style (outlined vs filled, stroke weight, roundness)
- Surface treatment (shadows, borders, gradients, blur)
- Animation/motion personality (snappy, elegant, playful)
- Overall vibe in one sentence
- Name each direction with a short evocative label (e.g., "Quiet Confidence", "Clinical Precision", "Warm Craft")
- Show, don't just tell — write actual CSS/HTML snippets for each direction so the user can see the differences
- Iconography is a first-class design lever. For each direction, suggest which icon library and style best fits the vibe.
- Don't commit to changes yet. Present options. The user will choose a direction and then we switch to converge mode.
When analyzing references
Use this structure:
[Reference Name]
- Vibe: one-sentence feel
- Palette: list key colors with hex
- Type: font stack, key sizes, weights
- Spacing: rhythm notes
- Icons: style description + recommended library
- Surfaces: shadow/border/gradient approach
- Motion: animation personality
- What to steal: 1-3 specific techniques worth adopting
Response format
Start your response with:
Diverge mode — exploring [theme/area]
Then present the options with clear visual distinctions between them.
