Modernize and Polish Existing UIs

This skill upgrades an existing website or app's UI by scanning the codebase (framework, styling method), diagnosing generic and weak visual patterns against a detailed audit, then fixing them with targeted changes that work within the existing stack rather than a rewrite. The audit covers typography (replacing default/Inter fonts, fixing weak headline presence, overly wide body text, missing font weights, orphaned words), color and surfaces (pure black backgrounds, oversaturated accents, the "purple/blue AI gradient" fingerprint, generic flat box-shadows, zero-texture flat design), layout (over-centered symmetry, the generic three-equal-card feature row, 100vh viewport bugs, missing max-width containers, misaligned card/pricing-table elements), interactivity and states (missing hover/active/focus states, missing loading/empty/error states, dead # links, window.alert() errors, non-GPU-accelerated animations), content (generic placeholder names, suspiciously round numbers, AI copywriting cliches like "Elevate"/"Unleash"/"Delve", Lorem Ipsum, Title Case headers), component patterns (generic card-with-border-and-shadow look, accordion FAQs, 3-tower pricing tables, modal overuse), iconography (default Lucide/Feather-only icon sets, cliche metaphor icons, inconsistent stroke widths), code quality (div soup instead of semantic HTML, hardcoded pixel widths, missing alt text, arbitrary z-index values), and strategic omissions AI commonly forgets (legal links, back navigation, custom 404, form validation, skip-to-content links). It also provides higher-impact upgrade techniques (variable font animation, broken-grid asymmetry, spring-physics motion, true glassmorphism with inner borders) and a fix-priority order: font swap first, then color cleanup, hover/active states, layout/spacing, component replacement, loading/empty/error states, and finally typography polish.

Use it when a user asks to redesign, restyle, modernize, polish, or improve an existing website or app UI; when auditing current frontend code for targeted visual improvements without changing product architecture; or when a design feels generic, AI-generated, poorly spaced, visually flat, or is missing responsive, interactive, loading, empty, or error states.

This skill upgrades existing UI but does not authorize framework migrations, information-architecture rewrites, or product-scope expansion by default - working functionality, routing, data flows, accessibility semantics, and tests must be preserved while making visual changes. Work with the existing tech stack (do not migrate frameworks or styling libraries), check the project's dependency file before importing any new library, check the Tailwind version before modifying config, and validate redesigned screens in the actual app across supported browsers and viewport sizes before considering the work complete. Keep changes small, targeted, and reviewable rather than big rewrites.

Input: an existing project's frontend codebase and a redesign/polish request. Output: a diagnosis listing generic patterns and missing states, followed by targeted code fixes applied in priority order.

Fix priority:
1. Font swap - biggest instant improvement, lowest risk
2. Color palette cleanup
3. Hover and active states
4. Layout and spacing
5. Replace generic components
6. Add loading, empty, and error states
7. Polish typography scale and spacing

Works within whatever styling system the project already uses - Tailwind (v3 or v4), vanilla CSS, or styled-components - and references specific font options (Geist, Outfit, Cabinet Grotesk, Satoshi), icon sets (Phosphor, Heroicons), and CSS techniques (text-wrap: balance, min-height: 100dvh, font-variant-numeric: tabular-nums).

Developers and designers who want to visually elevate an existing app or site past its current "generic AI-generated" look without a framework migration or architectural rewrite, using a concrete, prioritized audit checklist rather than vague design feedback.