What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, missing reduced-motion support, and animations on elements that should never move. This Skill turns a motion request into a reviewed-quality 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 (frequency tiers), names the motion's purpose, then picks the cheapest tool — CSS transition, @starting-style, CSS animation, WAAPI, or Motion. - Opinionated values: Provides exact easing curves (cubic-bezier tokens), duration tables per component, and spring configs, plus a Never Ship checklist covering scale(0), ease-in, transition: all, and ungated hover. - Ready-made recipes: RECIPES.md contains implementations for button press, popover, tooltip, modal, drawer, toast, accordion, stagger, hold-to-confirm, tab indicator, scroll reveal, and drag-to-dismiss. - Use Case: Ask to animate a dropdown menu, and receive a transform-origin-anchored scale/opacity transition at 200ms with the strong ease-out curve, reduced-motion fallback, and hover gating included. ## Quick Start Use the animate skill to build an entrance animation for this modal component with proper easing and reduced-motion support.
