What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, non-accelerated properties, and missing reduced-motion support make interfaces feel sluggish or broken. This Skill turns a motion request into a reviewed implementation by enforcing a strict decision sequence before any code is written. ## Core Features & Use Cases - Gated build sequence: Decides first whether the element should animate at all (frequency tiers, keyboard-initiated disqualifiers), then names the purpose (feedback, spatial consistency, state indication, delight) before choosing tools. - Tool and property selection: Picks the cheapest working tool (CSS transitions, @starting-style, CSS animation, WAAPI, or Motion) and restricts animation to transform and opacity with correct transform-origin handling. - Concrete values, no guessing: Provides exact easing curves (cubic-bezier tokens), duration tables per component, and spring configs, plus ready-made recipes for buttons, popovers, tooltips, modals, drawers, toasts, accordions, drag-to-dismiss, and more. - Use Case: When asked to add a dropdown entrance animation, it produces a 200ms ease-out scale-from-trigger transition with reduced-motion and hover gating, rather than a generic keyframe fade. ## Quick Start Ask the agent to animate a component, for example: add an entrance animation to the settings dropdown menu in this Next.js app.
