What problem does it solve? Most products accumulate animations ad hoc, ending up with a dozen inconsistent durations and easings that make the UI feel disjointed. This Skill turns motion into a designed system with a scale, roles, and rules, then exports enforceable implementation artifacts instead of an aspirational spec. ## Core Features & Use Cases - Motion Audit and Scale Definition: Inventory every existing duration, easing, and effect in a codebase, then define calibrated duration tokens (instant, fast, base, slow) and a constrained easing vocabulary with at most one signature spring. - Choreography Rules and Signature Moves: Write rules for what animates, stagger timing, enter/exit asymmetry, and the reduced-motion contract, plus 3-5 named reusable compositions like card-lift or panel-reveal. - Exportable Implementation: Generate motion-tokens.json, motion.css with custom properties and reduced-motion guards, motion.ts with Framer Motion variants, and a MOTION.md spec. - Use Case: A team with 14 different animation durations scattered across components uses this Skill to audit the sprawl, consolidate onto a four-step duration scale, and ship drop-in Framer Motion variants every developer references. ## Quick Start Design a motion system for this product, including tokens, choreography rules, and Framer Motion variants.
