UI Enhancement + Staggered Animation Skill

This skill performs a full design upgrade of an existing website or component. It is NOT just about adding animations — it is a holistic visual refinement pass that touches typography, spacing, layout, depth, micro-interactions, and motion. The existing color palette is preserved; everything else can and should be improved.

Phase 1 — Audit & Understand Before Touching Anything

Before writing a single line of code, do a thorough read of the existing code. Extract and note:

1. Color palette — all hex/hsl/rgb values, CSS variables, Tailwind color classes. These are sacred and must be preserved exactly.
2. Font stack — what fonts are currently in use.
3. Layout structure — is it CSS Grid, Flexbox, plain blocks? What's the overall page structure?
4. Component inventory — list every distinct section/component: hero, navbar, cards, features, testimonials, CTA, footer, etc.
5. Current weaknesses — visually identify what looks amateur or generic: flat cards, no spacing rhythm, weak typography hierarchy, no depth/shadow, boring hover states, no visual flow, walls of text, etc.
6. Tech stack — React (use Framer Motion), plain HTML/CSS (use CSS animations + IntersectionObserver), Vue, etc.

Only after this audit should you begin making changes.