What problem does it solve? Deciding whether and how to animate a UI element is error-prone: developers often animate things that should not move, pick wrong easing curves, or ship motion without reduced-motion support. This Skill turns a motion request into a reviewed implementation by enforcing a strict build sequence. ## Core Features & Use Cases - Gated decision sequence: First checks whether the element should animate at all based on usage frequency, then names the motion's purpose before writing any code. - Tool and property selection: Chooses the cheapest working tool (CSS transition, @starting-style, CSS animation, WAAPI, or Motion) and restricts animation to transform and opacity for GPU-accelerated rendering. - Ready-made recipes: Ships RECIPES.md with implementations for buttons, popovers, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, tab indicators, scroll reveals, and drag-to-dismiss. - Use Case: When asked to animate a dropdown menu, the Skill selects a CSS transition with scale(0.95) and opacity, transform-origin anchored to the trigger, a strong ease-out curve at 150-250ms, plus reduced-motion and hover gating. ## Quick Start Ask the assistant to animate a dropdown menu opening from its trigger button using the animate skill.
