What problem does it solve? Adding animation to a web project often leads to unnecessary motion, duplicated motion systems, magic-number timings, and inaccessible experiences. This Skill provides a disciplined, ordered workflow for deciding whether motion is needed at all and then implementing it correctly within an existing project. ## Core Features & Use Cases - Motion Gate: Evaluates frequency, purpose, interference, and spatial continuity before writing any animation, treating "no animation" as a valid successful outcome. - Mechanism Selection: Chooses the cheapest suitable tool — CSS transitions, CSS animations, WAAPI, an existing motion library, or View Transition API — based on the interaction type rather than library availability. - Timing, Interruption & Reduced Motion: Derives duration from project tokens and reference hierarchies, ensures animations are interruptible and reversible, and defines reduced-motion variants for meaningful movement. - Use Case: When adding a route transition or a micro-interaction to a React/TanStack Start project, use this Skill to inspect existing motion tokens, pick the right mechanism, align direction with spatial continuity, and verify rendered behavior across input types. ## Quick Start Ask the agent to implement a specific animation, such as "add an enter transition to this modal following the motion-implement workflow," and it will gate, design, implement, and verify the motion.
