What problem does it solve? Deciding whether and how to animate a UI element is error-prone: developers often animate things that should stay static, pick wrong easings, or use non-performant properties. This Skill turns a motion request into a reviewed implementation by enforcing a strict build sequence. ## Core Features & Use Cases - Gated decision sequence: First determines whether the element should animate at all based on usage frequency, then names the animation's purpose before writing any code. - Tool and property selection: Chooses the cheapest working tool (CSS transitions, @starting-style, WAAPI, or Motion) and restricts animation to transform and opacity for GPU-accelerated rendering. - Ready-made recipes: Provides implementations for buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, drag-to-dismiss, and more in RECIPES.md. - Use Case: When asked to add a dropdown entrance animation, the Skill selects a CSS transition with transform-origin at the trigger, a strong ease-out curve at 150-250ms, and ships reduced-motion and hover gating alongside it. ## Quick Start Ask the assistant to animate a component, such as adding an entrance transition to a modal or a press effect to a button, and it will produce the implementation with its reasoning.
