What problem does it solve? Deciding whether, why, and how to animate a UI element is error-prone: developers routinely ship animations that should not exist, use ease-in on entrances, scale from zero, or pick durations that make interfaces feel sluggish. This Skill turns a motion request into a reviewed implementation by enforcing a fixed decision sequence before any code is written. ## Core Features & Use Cases - Gated build sequence: Decides first whether the element should animate at all based on usage frequency, then names the motion's purpose (feedback, spatial consistency, state indication, delight) before choosing tools. - Opinionated tool and property selection: Walks from CSS transitions through @starting-style, WAAPI, and Motion, restricting animated properties to transform and opacity with exact easing curves and duration tables. - Ready-made recipes: Ships implementations for button press, dropdown, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal, and drag-to-dismiss in RECIPES.md. - Use Case: When asked to animate a dropdown menu, it produces a transform-origin-anchored scale-and-fade using the codebase's --ease-out token at 150-250ms, with reduced-motion and hover gating included. ## Quick Start Ask the assistant to animate a specific component, such as adding an entrance animation to a modal or a press effect to a button, and it will return the implementation with its reasoning.
