What problem does it solve? Interfaces often feel unpolished because of small animation mistakes: transition: all, scale(0) entrances, ease-in on dropdowns, or hover effects that misfire on touch devices. This Skill provides a structured decision framework and review format for UI motion craft so animations feel intentional, performant, and accessible. ## Core Features & Use Cases - Animation decision framework: Decide whether to animate at all based on usage frequency, then choose easing curves, durations, and springs with concrete values (e.g. ease-out for entering, 150–250ms for dropdowns). - Component and CSS guidance: Press feedback with scale(0.97), origin-aware popovers, @starting-style enter animations, clip-path reveals, and gesture patterns like momentum-based dismissal and rubber-band damping. - Performance and accessibility rules: Prefer transform and opacity, respect prefers-reduced-motion, and guard hover effects with @media (hover: hover) and (pointer: fine). - Use Case: When reviewing a pull request that adds a modal and toast animations, use this Skill to produce a Before/After/Why table flagging issues like keyframes on rapid toggles or missing reduced-motion handling. ## Quick Start Review the animation CSS in my component and suggest improvements using the Before/After/Why table format.
