cli/assets/gemini/skills/redesign/SKILL.md
--- name: redesign description: "Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says "redesign", "modernize this site", "refresh the UI", "make this look current", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI,
npx skillsauth add educlopez/ui-craft cli/assets/gemini/skills/redesignInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
Context: this sub-skill is one lens of the broader ui-craft skill. If the ui-craft skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.
Redesign $ARGUMENTS. Load the ui-craft skill and read references/craft-intent.md. A redesign is not a greenfield build wearing the old content — most of its value is in what you deliberately keep.
Step 1 — Audit what exists (before any opinion):
npx ui-craft-detect <path>) or live page (npx ui-craft-detect <url>) and note findings..ui-craft/brief.md if present — prior constraints still bind.Step 2 — Classify what to preserve. Wrong-to-change unless the user explicitly asks:
Step 3 — Pick the scope and say it out loud:
| Scope | What changes | When | |---|---|---| | Refresh | Tokens only: type scale, spacing rhythm, radii, shadows, color tuning | Site is structurally fine, looks dated | | Reskin | Visual layer + component styling; layout skeleton and section order stay | Bones are good, skin is generic or old | | Rebuild | Layout and composition too; content, IA, and brand carry over | Layout itself is the problem |
Default to the smallest scope that fixes the stated complaint. For rebuild, print a short before/after section map and get a nod before writing code.
Step 4 — Declare the Craft Read (surface kind, audience, theme, DESIGN_VARIANCE, signature bet) per references/craft-intent.md. Redesigns default to variance 4–5: the brand is already committed, so spend boldness on typography and composition, not on a new identity.
Step 5 — Modernize with levers, in this order: typography (scale + pairing per references/typography.md) → spacing rhythm → color tokens (references/color.md) → imagery treatment → motion (entrance/hover only where focal). Fix every detector finding from Step 1 along the way.
Never: invent a new brand palette over a committed one, drop routes or pages, flatten heading semantics for looks, rewrite copy voice unasked, or ship the redesign with more detector findings than the original had.
Output: edit code directly (refresh/reskin) or section map first (rebuild). Print the Review Format table, the detector before/after counts, and end with the Craft Read line.
Next step: /critique — check the modernized surface against hierarchy and anti-slop before shipping (rung 1).
tools
--- name: quieter description: "Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: commands/quieter.md. After editing source, cop
tools
--- name: bolder description: "Amplify personality — raises layout variance and motion, strengthens typography and one signature detail, without slop. Use when the UI works but feels safe, flat, or "template-y", or when the user says "bolder", "more personality", "more creative", or "make it pop" (still professional). Invoke when the user asks for bolder on their UI, or mentions 'bolder' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: comman
tools
--- name: redesign description: "Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says "redesign", "modernize this site", "refresh the UI", "make this look current", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI,
tools
--- name: quieter description: "Tone down visual noise — lowers variance and motion, simplifies layout and color weight, keeps hierarchy clear. Use when the UI feels loud, busy, or over-designed, or when the user says "quieter", "more restrained", "simpler", or "tone it down". Invoke when the user asks for quieter on their UI, or mentions 'quieter' alongside design / UI / frontend work." --- <!-- HARNESS MIRROR — do not edit here. Canonical source: commands/quieter.md. After editing source, cop