english/.opencode/skills/frontend-design/references/redesign-audit-checklist.md

Redesign Audit Checklist

Use when upgrading an existing project. Follow Scan → Diagnose → Fix in order.

Workflow

1. Scan — Read the codebase. Identify framework, styling method (Tailwind, vanilla CSS, styled-components), and current design patterns.
2. Diagnose — Run through each category below. List every generic pattern, weak point, and missing state.
3. Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch.

Rules:

• Work with the existing tech stack. Do not migrate frameworks.
• Do not break existing functionality. Test after every change.
• Check package.json before adding any new dependency.
• Keep changes focused and reviewable — small targeted improvements over big rewrites.

---

Audit Categories

1. Typography

• Browser default fonts or Inter everywhere → replace with Geist, Outfit, Cabinet Grotesk, or Satoshi
• Headlines lack presence → tighten tracking, reduce line-height, increase display size
• Body text too wide → limit to ~65ch, increase line-height
• Only 400 + 700 weights → introduce 500/600 for subtler hierarchy
• Numbers in proportional font → use monospace or font-variant-numeric: tabular-nums
• All-caps subheaders everywhere → try lowercase italic or sentence case
• Orphaned last words → fix with text-wrap: balance or text-wrap: pretty
• Serif fonts on dashboard UI → use high-end sans-serif pairs only

2. Color and Surfaces

• Pure #000000 → replace with off-black or tinted dark
• Oversaturated accents → desaturate below 80%
• More than one accent color → reduce to one
• Mixing warm and cool grays → pick one family, stay consistent
• Purple/blue AI gradient aesthetic → replace with neutral base + singular accent
• Generic box-shadow → tint shadows to background hue
• Flat surfaces with zero texture → add subtle noise/grain overlay
• Perfectly even linear gradients → use radial, mesh, or noise-overlaid gradients
• Random dark section in light-mode page (or vice versa) → commit to consistent tone or use slightly darker shade of same palette

3. Layout

• Everything centered and symmetrical → break with offset margins, mixed aspect ratios
• Three equal card columns as feature row → use 2-col zig-zag, asymmetric grid, or horizontal scroll
• h-screen / height: 100vh → replace with min-height: 100dvh
• Complex flexbox calc() math → replace with CSS Grid
• No max-width container → add 1200-1440px constraint with auto margins
• Uniform border-radius everywhere → vary inner/outer elements
• No overlap or depth → use negative margins for layering
• Dashboard always has left sidebar → consider top nav, command menu, or collapsible panel
• Buttons not bottom-aligned in card groups → pin CTAs to card bottom
• Missing whitespace on marketing pages → double spacing, let design breathe

4. 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
• Instant transitions → add 200-300ms smooth transitions
• Missing focus ring → visible focus indicator (accessibility requirement)
• Generic circular spinner → replace with skeleton loader matching layout shape
• No empty state → design a composed "getting started" view
• No error state → inline error messages on forms (no window.alert())
• Dead links (href="#") → link real destinations or visually disable
• No current-page indicator in nav → style active link distinctly
• Scroll jumping on anchor links → add scroll-behavior: smooth
• Animations using top/left/width/height → switch to transform + opacity

5. Content

• Generic placeholder names → use diverse, realistic names
• Round fake numbers → use organic messy data
• AI copywriting clichés → plain, specific language
• Lorem Ipsum → real draft copy
• Exclamation marks in success states → remove
• Title Case On Every Header → use sentence case
• Same avatar for multiple users → unique assets per person
• Blog post dates all identical → randomize

6. Components and Code

• Generic card (border + shadow + white bg) at high density → use spacing/dividers
• Always one filled + one ghost button → add text links, reduce visual noise
• Lucide/Feather icons only → try Phosphor or Heroicons for differentiation
• Cliché icon metaphors (rocketship, shield) → less obvious alternatives
• Div soup → use semantic HTML: nav, main, article, aside, section
• Inline styles mixed with CSS classes → move all styling to the project's system
• Arbitrary z-index values (z-[9999]) → establish a clean z-index scale
• Missing alt text on meaningful images → describe content for screen readers
• Missing meta tags → add title, description, og:image

---

Fix Priority Order

Apply in this order for maximum impact with minimum risk:

1. Font swap — biggest instant improvement, lowest risk
2. Color cleanup — remove clashing or oversaturated colors
3. Hover and active states — makes interface feel alive
4. Layout and spacing — proper grid, max-width, consistent padding
5. Replace generic components — swap cliché patterns for modern alternatives
6. Add loading, empty, error states — makes it feel finished
7. Polish typography scale — the premium final touch

---

Strategic Omissions (What AI Typically Forgets)

These are rarely in AI-generated output. Check explicitly:

• No legal links → add privacy policy + terms in footer
• No "back" navigation → every page needs a way back
• No custom 404 page → design a helpful branded "not found" experience
• No form validation → client-side validation for emails, required fields, formats
• No "skip to content" link → essential for keyboard users
• No favicon → always include a branded favicon
• No social sharing meta → og:image, og:title, twitter:card