redesign

Auto-load

Attaches itself automatically when a prompt matches.

Upgrade or redesign an existing site or app by auditing first, then fixing design problems. Detect preserve-vs-overhaul, extract existing brand tokens, protect SEO and information architecture, and modernize typography, spacing, color, and motion without breaking what works.

Scaffolds

react

vanilla

Source

Adapted from leonxlnx/taste-skill (MIT), adapted for Codebase scaffolds

Instructions

The full instruction set the agent receives when this skill is active.

Redesign Protocol

Layer this on top of frontend-design. Misclassifying the mode is the biggest source of bad redesign output, so detect the mode first.

1. Detect the mode (first action)

Preserve: modernize without breaking the brand. Audit first, extract brand tokens, evolve gradually.
Overhaul: new visual language on top of existing content. Treat visuals as greenfield; keep content and information architecture.
Greenfield: the brand itself is changing. Use the base skill from scratch.

If ambiguous, ask ONCE (use ask_user): "Should this preserve the existing brand, or start visually from scratch?"

2. Audit before touching anything

Read the current code/site and document, briefly, before proposing changes:

Brand tokens: primary/accent colors, type stack, logo treatment, radii. Extract these from the existing files.
Information architecture: page tree, primary nav, key conversion paths.
Content blocks: what exists, what is doing work, what is filler.
Keep vs retire: signature interactions and recognizable hero (keep); AI-slop tells, broken layouts, dead links, perf traps (retire).
Current dial reading: infer the existing VARIANCE / MOTION / DENSITY. That is your starting point, not the base defaults.
SEO baseline: existing meta titles, headings, OG cards, structured data. SEO migration is the #1 redesign risk.

3. Preserve unless asked otherwise

Do not change information architecture, page slugs, or anchor IDs (SEO + muscle memory).
Extract the existing accent color and keep it: a brand that is already purple stays purple (apply the Lila-rule override).
Preserve copy voice. Visual modernization is not a content rewrite.
Do not regress accessibility (focus states, alt text, keyboard nav, contrast).
Do not rename buttons, form fields, or section IDs that analytics may depend on.

4. Modernization levers (apply in priority order, stop when the brief is satisfied)

Typography refresh (biggest lift per unit of risk).
Spacing & rhythm: increase section padding, fix vertical rhythm.
Color recalibration: desaturate, unify neutrals, keep the brand accent.
Motion layer: add dial-appropriate micro-interactions to existing components.
Hero & key-section recomposition.
Full block replacement: only when a block is unsalvageable.

If IA/content/SEO are sound -> targeted evolution (levers 1-4): ~70% of the value at ~40% of the risk. Only go to full redesign when the visual debt is structural (broken IA, no design system, broken mobile).

5. Never change silently (require explicit user approval)

URL structure / route slugs, primary nav labels, form field names or order, brand logo/wordmark, existing legal/consent/cookie copy.