# Redesign Audit

> Audits and upgrades existing web codebases with high-end typography, color, layout, and interaction polish.

- Skill: `kok-o/redesign-audit` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kok-o/redesign-audit`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kok-o/redesign-audit/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Design & Media
- Author: kok-o (https://skillmd.com/u/kok-o)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kok-o/redesign-audit

---

# Redesign Skill & UI Audit

## Overview

A systematic redesign and auditing protocol designed to elevate existing websites, dashboards, and web applications to world-class agency quality. It diagnoses and eradicates generic AI design fingerprints, sloppy typography, inconsistent palettes, and absent interaction states without breaking business logic or underlying component contracts.

## When to Use

- When auditing an existing UI codebase for design quality, responsiveness, or accessibility.
- When modernizing a legacy application or uplifting generic templates.
- When tasked to "redesign", "clean up the layout", "audit UI", or "make it look expensive and modern".

## Rules & Patterns

### 1. Workflow: Scan → Diagnose → Fix

1. **Scan:** Read the codebase. Identify the framework, styling method (Tailwind v3/v4, vanilla CSS, CSS Modules), and established design tokens.
2. **Diagnose:** Run through the design audit categories. Catalog generic patterns, missing states, and optical alignment flaws.
3. **Fix:** Apply surgical, targeted upgrades working within the existing stack. Do not rewrite from scratch.

### 2. Design Audit Categories

#### Typography

- **Replace Browser Defaults:** Swap generic `Inter`, `Roboto`, or system fonts with expressive typefaces (`Geist`, `Outfit`, `Cabinet Grotesk`, `Satoshi`).
- **Presence & Scale:** Increase display text size, tighten letter-spacing (`-0.02em` to `-0.04em`), reduce line-height on headlines.
- **Reading Comfort:** Limit body text to 65 characters per line (`max-w-prose`), increase line-height to 1.6.
- **Figures:** Enable tabular figures (`font-variant-numeric: tabular-nums`) for numbers in tables and data readouts.
- **Orphan Prevention:** Apply `text-wrap: balance` on headlines and `text-wrap: pretty` on paragraphs.

#### Color and Surfaces

- **No Pure Black Backgrounds:** Replace `#000000` with tinted dark charcoal (`#0A0A0A`, `#121212`).
- **Desaturate Accents:** Keep accent saturation below 80% so it blends harmoniously with neutrals.
- **Single Accent Color:** Commit to one dominant accent hue; remove conflicting secondary tints.
- **Tinted Shadows:** Tint shadows to match the background hue rather than harsh black opacity.
- **Background Depth:** Prevent sterile flat sections by layering subtle noise overlays, ambient gradients, or masked imagery.

#### Layout and Space

- **Asymmetry & Bento Grids:** Break repetitive 3-column Bootstrap grids with asymmetrical spans or offset cards.
- **Mobile Viewport Bug Fix:** Never use `height: 100vh`; always use `min-height: 100dvh`.
- **Vertical Alignment:** Pin action buttons to the bottom of card groups (`mt-auto` or grid alignment) to maintain horizontal baseline harmony across differing text heights.
- **Optical Centering:** Adjust icons, badges, and play buttons optically by 1-2px rather than relying solely on pure mathematical centering.

#### Interactivity and States

- **Interactive Feedback:** Add 200-300ms transitions, distinct hover shifts, and physical active presses (`scale(0.98)`).
- **Visible Focus Rings:** Mandatory `:focus-visible` styling for keyboard navigation.
- **States Completeness:** Always provide designed skeleton loaders, empty states, and inline error messages.

#### Content & Code Quality

- **Eradicate AI Clichés:** Remove buzzwords ("Elevate", "Seamless", "Unleash", "Next-Gen") and placeholder latin text.
- **Semantic HTML:** Replace nested div containers with `<nav>`, `<main>`, `<article>`, `<section>`, `<aside>`.
- **Relative Units:** Use `rem`, `%`, and CSS Grid rather than hardcoded pixel widths.

### 3. Fix Priority

1. **Font Swap:** Biggest instant aesthetic elevation with lowest regression risk.
2. **Palette Cleanup:** Eliminate clashing or oversaturated colors.
3. **States & Feedback:** Add hover, active, focus, loading, and empty states.
4. **Layout & Alignment:** Fix container widths, baseline alignment, and mobile viewport heights.
5. **Component Polish:** Replace generic cards and accordion boxes with modern minimal equivalents.

## Code Examples

```tsx
// [BEFORE] Generic, misaligned card with generic shadow
<div className="bg-white border rounded shadow p-4">
  <h2>{title}</h2>
  <p>{desc}</p>
  <button className="bg-blue-500 text-white p-2">Click</button>
</div>

// [AFTER] Polished card with optical baseline alignment, tinted surface, and micro-interaction
<div className="flex flex-col bg-[#FFFFFF] dark:bg-[#121212] border border-black/5 dark:border-white/10 rounded-2xl p-6 hover:shadow-[0_4px_20px_rgba(0,0,0,0.04)] transition-all duration-200">
  <h3 className="font-semibold text-lg tracking-tight text-neutral-900 dark:text-neutral-100 text-balance mb-2">
    {title}
  </h3>
  <p className="text-sm text-neutral-600 dark:text-neutral-400 leading-relaxed text-pretty mb-6">
    {desc}
  </p>
  <button 
    type="button" 
    className="mt-auto inline-flex items-center justify-center font-medium text-sm px-4 py-2.5 rounded-xl bg-neutral-900 dark:bg-neutral-100 text-white dark:text-black hover:bg-neutral-800 active:scale-[0.98] transition-transform duration-150 focus-visible:ring-2 focus-visible:ring-neutral-400"
  >
    Continue
  </button>
</div>
```

## Validation Checklist

- [ ] All headings have `text-wrap: balance` and appropriate negative letter tracking.
- [ ] No pure black `#000000` backgrounds or oversaturated accent colors (>80% saturation).
- [ ] All interactive elements include `:hover`, `:active`, and `:focus-visible` styles.
- [ ] Cards in side-by-side grids align primary CTA buttons along the same bottom baseline.
- [ ] Viewport containers use `100dvh` instead of `100vh`.
- [ ] All lists, tables, and feeds have a designed empty state.

## Common Mistakes

- Rewriting components from scratch and breaking existing prop contracts or unit tests.
- Forcing full-width sections without `max-w` constraints on ultra-wide screens.
- Leaving action buttons at random heights inside differing text content cards.
- Introducing external UI libraries without checking existing `package.json` dependencies.

## Integration Notes

- Complements `impeccable-design` for hard 50-rule QA verification.
- Works alongside `ui-ux-pro` for token generation and color theory.