What problem does it solve? Deciding whether an element should animate, which tool to use, and which easing, duration, and properties to apply is error-prone, and wrong choices produce sluggish or jarring UI motion. This Skill turns a motion request into a reviewed implementation by walking a fixed decision sequence before writing any code. ## Core Features & Use Cases - Gated build sequence: Decides first whether the element should animate at all based on interaction frequency, then names the motion's purpose before choosing tools. - Concrete ingredient tables: Provides exact cubic-bezier curves, duration ranges per component type, and spring configurations so no values are approximated. - Ready-made recipes: Ships implementations for buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, tab indicators, scroll reveals, and drag-to-dismiss in RECIPES.md. - Use Case: When asked to animate a dropdown menu, the Skill selects a CSS transition on transform and opacity, applies the strong ease-out curve at 150-250ms with transform-origin at the trigger, and ships reduced-motion and hover gating alongside it. ## Quick Start Ask the assistant to animate a specific component, such as adding an entrance transition to a modal or a drag-to-dismiss gesture to a drawer.
