redesign

name	redesign
description	Activate when a user wants to improve, upgrade, or fix the design quality of an existing web project without changing its functionality or migrating its tech stack.
version	1
category	frontend-code
outputs	code

Redesign

Purpose

This skill audits an existing web project for design quality issues, then applies targeted improvements within the existing tech stack. It does not rewrite from scratch. It identifies the highest-impact changes — font quality, color calibration, layout patterns, interaction states, content quality — and implements them surgically without touching business logic or data handling.

When to Activate

• User says their UI looks generic, cheap, or AI-generated and has existing code to share
• User wants to upgrade an existing project's design without a full rewrite
• User asks to "clean up" or "polish" a project they already have
• User wants a design review with actionable code fixes

When Not to Activate

• User is building from scratch (use frontend)
• User wants a visual redesign concept image (use web-image)
• User only wants architectural or performance improvements
• The project has no UI (pure API or library)

Core Principles

1. Work with the existing stack. Identify the framework and styling method first. Make changes that fit. Do not propose switching from CSS Modules to Tailwind or from React to another framework.

2. Highest visual impact first. Font replacement delivers the biggest immediate improvement at lowest risk. Fix typography, then color, then layout, then components, in that order.

3. Test after every change. Targeted changes carry less risk than full rewrites, but any change can break layout. Verify each fix renders correctly before moving to the next category.

4. Never break existing functionality. Interactive behavior, routing, data fetching, and form handling must remain identical after all visual changes.

5. Check all dependencies before adding any. Before importing a new font, icon set, or animation library, verify the project can support it. Check package.json for conflicts and Tailwind version before touching config.

6. Accessibility gaps are bugs, not design preferences. Missing focus rings, absent alt text, and low-contrast text are bugs. Fix them as part of the audit, not as optional enhancements.

Workflow

1. Scan the project. Read the codebase to identify: framework, styling method (Tailwind version, CSS Modules, styled-components, vanilla CSS), current font stack, current color palette, and existing component patterns.

2. Run the full audit. Work through every category in the Audit Checklist below. List every issue found with a severity: Critical (accessibility or legal), High (strong visual degradation), Medium (generic pattern to replace), Low (polish detail).

3. Fix by priority order: (1) Typography, (2) Color palette, (3) Hover and active states, (4) Layout and spacing, (5) Component pattern replacements, (6) Interaction states (loading/empty/error), (7) Content quality, (8) Accessibility gaps.

4. Deliver targeted patches. Show before and after for each changed section. Do not deliver a full file rewrite unless the change spans more than 60% of the file.

Audit Checklist

Typography

• Browser default fonts or overused typefaces (Roboto, Open Sans) as the only option — replace with a font with more character (Geist, Outfit, Switzer, Cabinet Grotesk, Satoshi)
• Headlines lack presence — too small, wrong weight, or insufficient tracking
• Body text line too wide — constrain paragraphs to 60–65 characters (max-w-[65ch])
• Only two weights used (400 + 700) — add Medium (500) and SemiBold (600) for nuance
• Numerical data in proportional font — use monospace or tabular figures (font-variant-numeric: tabular-nums) for tables and dashboards
• All-caps subheadings everywhere — try lowercase italic, sentence case, or small-caps as alternatives
• Single words orphaned on the last line of paragraphs — fix with text-wrap: balance

Color and Surfaces

• Pure #000000 background — replace with off-black (#0a0a0a, #121212, or a dark tinted value)
• Oversaturated accent colors — reduce saturation below 80%
• More than one accent color — reduce to one
• Warm and cool grays mixed — standardize to one gray family with a consistent hue tint
• Purple/blue gradient as the primary design identity — replace with neutral base + a considered accent
• Shadows use pure black at low opacity — tint shadows to the background hue
• Backgrounds are perfectly flat with no visual depth — add subtle noise, grain, or low-opacity background image
• A single dark section breaks an otherwise light page without justification — either commit to a full dark section system or maintain consistent tone throughout

Layout

• Everything centered and symmetrical — introduce at least one asymmetric element per major section
• Three equal-column card layout as the feature section — replace with 2-column zig-zag, asymmetric grid, or horizontal scroll
• height: 100vh on full-screen sections — replace with min-height: 100dvh
• Complex flexbox percentage math (calc(33% - 1rem)) — replace with CSS Grid
• No max-width container — add container with auto margins (1200–1440px)
• No overlap or depth — add one negative-margin layering to create visual depth
• Buttons not bottom-aligned in card groups — pin CTAs to card bottom with CSS Grid or flex
• Missing whitespace — double the spacing between major sections

Interactivity and States

• No hover states on buttons — add background shift, scale, or translate
• No active/pressed feedback — add scale(0.98) or translateY(1px) on press
• No visible focus ring — add :focus-visible styles (required for keyboard accessibility)
• No loading states — add skeleton loaders matching layout shapes
• No empty states — design a "getting started" or "no content yet" view
• No error states — add inline error messages for all forms
• Dead links (href="#") — link to real destinations or visually disable with aria-disabled
• No current page indicator in navigation — style the active nav link differently

Content

• Generic placeholder names (John Doe, Acme Corp) — use realistic diverse names
• Fake round data (99.99%, $100.00, 50%) — use organic messy numbers (47.2%, $99.00)
• AI cliché copy (Elevate, Seamless, Unleash, Next-Gen, Game-changer) — replace with specific, concrete language
• Lorem ipsum — write real draft copy
• Title Case On Every Header — use sentence case
• Exclamation marks in success messages — remove
• "Oops!" error messages — use direct language ("Connection failed. Try again.")

Component Patterns

• Generic white bordered card on everything — use cards only for actual elevation hierarchy
• Pill-shaped "New" and "Beta" badges — try square flags or plain text labels
• 3-card carousel testimonials with dots — replace with masonry wall or single rotating quote
• Light/dark toggle always sun/moon — use dropdown or system preference detection
• Footer link farm with 4 equal columns — simplify to main nav paths and legal links

Iconography

• Lucide or Feather icons without customization — set strokeWidth explicitly; consider Phosphor or Heroicons for differentiation
• Cliché icon metaphors (rocket = launch, shield = security) — try less obvious alternatives
• Inconsistent stroke weights across icons — standardize to one strokeWidth value
• Missing favicon — add a branded favicon

Accessibility

• Missing alt text on meaningful images — describe image content (never alt="" on non-decorative images)
• No visible focus ring — add :focus-visible styles
• No "skip to content" link — add a visually hidden skip link as the first element in <body>
• No form validation — add client-side validation for required fields and email format
• <div> used for interactive elements without ARIA role and keyboard handler

Code Quality

• <div> soup — replace with semantic HTML (<nav>, <main>, <article>, <section>)
• Hardcoded pixel widths — use relative units or max-width
• Arbitrary z-index: 9999 — establish a clean z-index scale
• Commented-out dead code — remove
• Missing <meta> tags — add title, description, and og:image

Strategic Gaps

• No privacy policy or terms link in footer
• No "back" navigation on inner pages
• No custom 404 page
• No form validation feedback

Upgrade Techniques

When replacing generic patterns, pull from these high-impact techniques:

Typography upgrades:

• Variable font animation — interpolate weight or width on scroll or hover
• Outlined-to-fill transitions — text starts as stroke outline and fills on scroll entry
• Text mask reveals — large typography acting as a window to imagery behind it

Layout upgrades:

• Asymmetric broken grid — elements deliberately offset with calculated variance
• Aggressive whitespace — single element per section with massive surrounding space
• Parallax card stacks — sections that stick and physically layer during scroll

Surface upgrades:

• Grain and noise overlays — fixed pointer-events-none pseudo-element with subtle noise
• Colored, tinted shadows — shadows carrying the hue of the background
• Background image depth — full-width photo at low opacity behind hero or feature sections

Forbidden Patterns

When applying fixes, do not introduce:

• One generic font swapped for another generic font
• A more complex third-party component without justification
• Animations without prefers-reduced-motion support
• Any change to interactive behavior while fixing visual styles

Output Requirements

• Audit findings delivered as a structured list with severity ratings before any code
• Code changes shown as before/after patches (not full file rewrites unless >60% changed)
• Critical (accessibility) and High severity issues addressed before Medium and Low
• Each patch includes a comment referencing the audit item it resolves
• Apply complete behavior — no truncation

Quality Gates

• Framework and styling method identified before any changes
• All audit categories checked (not just typography)
• Critical accessibility issues addressed (focus rings, alt text, semantic HTML)
• Font change verified compatible with existing stack
• No new dependencies added without package.json verification
• Tailwind version checked before modifying config
• Hover, focus, and active states added to all modified interactive elements
• No functionality changed — only visual styles

Failure Modes

"Scope creep": The audit becomes a full rewrite. Detection: more than 80% of any file is changed. Fix: scope changes to visual properties only; keep markup structure intact.

"Stack mismatch": Tailwind v4 syntax used in a Tailwind v3 project (or vice versa). Detection: check Tailwind version in package.json before writing any utility classes. Fix: verify version first.

"Accessibility blind spot": The audit addresses visual quality but skips focus rings, alt text, and semantic HTML. Fix: accessibility checklist items are Critical severity — address them before any visual improvements.

Response Format

Deliver: (1) Audit findings list with severity ratings, (2) Fix priority order, (3) Targeted code patches in priority order. Use clear // BEFORE and // AFTER comments in each patch.