redesign-existing-projects

Upgrade what's already there. Work with the existing stack — do not migrate frameworks or rewrite from scratch.

Workflow

1. Scan — read the codebase. Identify the framework, styling method (Tailwind v3/v4, vanilla CSS, styled-components, …), and current design patterns.
2. Diagnose — first apply the shared aesthetic rules from the anti-slop-frontend skill (fonts, color, layout clichés, interactive states, copy tells — the one source of truth), then run the existing-code audit in references/audit-checklist.md. List every generic pattern, weak point, and missing state you find.
3. Fix — apply targeted upgrades within the existing stack. Improve what's there; keep changes small and reviewable.

Fix priority (max impact, min risk)

1. Font swap — biggest instant win, lowest risk.
2. Color cleanup — remove clashing / oversaturated colors; one accent.
3. Hover / active states — makes the interface feel alive.
4. Layout & spacing — proper grid, max-width container, consistent padding.
5. Replace generic components — swap cliche patterns for modern alternatives.
6. Loading / empty / error states — makes it feel finished.
7. Typography scale & rhythm — the premium final touch.