Modernize and Polish Existing UIs

This skill upgrades an existing website or app's visual design by auditing generic UI patterns and applying targeted fixes, without rewriting the product architecture. It follows a three-step sequence: Scan the codebase to identify the framework and styling method (Tailwind, vanilla CSS, styled-components, etc.); Diagnose by running the full design audit and listing every generic pattern, weak point, and missing state found; and Fix by applying targeted upgrades that work with the existing stack rather than rewriting from scratch.

The design audit covers nine categories with concrete before/after fixes: Typography (replacing browser-default or Inter-everywhere fonts, fixing weak headline presence, over-wide body text, missing weight variation, orphaned words); Color and Surfaces (pure-black backgrounds, oversaturated accents, more than one accent color, the "purple/blue AI gradient" fingerprint, generic un-tinted shadows, flat zero-texture sections); Layout (everything centered/symmetrical, the three-equal-card-columns AI layout, 100vh vs 100dvh, missing max-width containers, uniform border-radius, misaligned card CTAs and feature lists); Interactivity and States (missing hover/active/focus states, zero-duration transitions, generic spinners instead of skeleton loaders, missing empty/error states, dead # links); Content (generic names like "John Doe", suspiciously round numbers, placeholder brand names, AI copywriting cliches like "Elevate" or "Seamless", Lorem Ipsum, Title Case headers); Component Patterns (generic card look, pill-shaped badges, 3-card testimonial carousels, modals for everything); Iconography (default Lucide/Feather icon sets, cliche metaphors like a rocketship for "Launch"); Code Quality (div soup instead of semantic HTML, hardcoded pixel widths, missing alt text, arbitrary z-index values, import hallucinations); and Strategic Omissions that AI commonly forgets (legal links, back navigation, custom 404 pages, form validation, skip-to-content links).

Beyond the audit, it offers higher-impact upgrade techniques across typography (variable font animation, outlined-to-fill text), layout (broken-grid asymmetry, parallax card stacks, split-screen scroll), motion (smooth scroll with inertia, staggered entry, spring physics), and surfaces (true glassmorphism with inner borders, spotlight borders, grain/noise overlays).

Use it when asked to redesign, restyle, modernize, or polish an existing website or app UI, or when the current design feels generic, AI-generated, poorly spaced, visually flat, or is missing responsive/interactive/loading/empty/error states. It does NOT authorize framework migrations, information-architecture rewrites, or product-scope expansion by default - it must preserve working behavior, routing, data flows, accessibility semantics, and tests while making visual changes, and redesigned screens must be validated in the actual app across supported browsers and viewport sizes before the work is considered complete.

Fixes are applied in a set priority order for maximum visual impact at minimum risk: font swap first (biggest instant improvement, lowest risk), then color palette cleanup, hover/active states, layout and spacing, replacing generic components, adding loading/empty/error states, and finally polishing the typography scale as the last touch.

Works within the project's existing tech stack - it does not migrate frameworks or styling libraries, checks the dependency file before importing any new library, and checks the Tailwind version (v3 vs v4) before touching config; on a project with no framework it falls back to vanilla CSS.

Developers and teams who need to visibly upgrade an existing, working UI - removing the generic "AI-generated" look - without a framework migration, an architecture rewrite, or breaking existing functionality along the way.