What problem does it solve? Deciding whether and how to animate a UI element is error-prone: developers often animate things that shouldn't move, pick wrong easing curves, or use expensive properties that drop frames. This Skill turns a motion request into a reviewed-quality 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 interaction 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 GPU-friendly transform and opacity properties. - Ready-made recipes: Provides implementations for buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, drag-to-dismiss, and more via RECIPES.md. - Use Case: When asked to add an entrance animation to a dropdown menu, the Skill picks a CSS transition with transform-origin anchored to the trigger, a strong ease-out curve at 150-250ms, and ships reduced-motion and hover gating alongside it. ## Quick Start Ask the AI to animate a component, for example: add an open and close animation to my dropdown menu built with Base UI.
