What problem does it solve? Choosing and implementing the right animation pattern for UI interactions is error-prone: developers often animate layout properties, skip exit animations, ignore reduced-motion preferences, or pick the wrong library for the job. This Skill provides a decision framework and ready-to-use code patterns for every common motion scenario. ## Core Features & Use Cases - Animation Pattern Guide: Maps animation types (page transitions, layout, enter/exit, scroll-linked, drag, hover/tap, morphing, stagger) to the right library and key principles. - Quality Checklist & Anti-Patterns: Enforces rules like transform/opacity-only animation, spring curves, 200ms timing, exit animations, and prefers-reduced-motion support. - Library Routing: Recommends motion.dev for standard work and escalates to GSAP + ScrollTrigger + Lenis for showcase-tier (dial 3) experiences. - Use Case: When asked to add a page transition or button press feedback, the Skill supplies tuned motion.dev code with spring presets, AnimatePresence usage, and layoutId shared-element transitions. ## Quick Start Ask the agent to add animations or transitions to a component, such as adding a spring-based page transition and hover feedback to a React page.
