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 that should not exist at all. This Skill turns a motion request into a reviewed implementation that follows a strict decision sequence. ## Core Features & Use Cases - Gated decision sequence: First decides whether the element should animate at all based on usage frequency, then names the motion's purpose before writing any code. - Opinionated implementation rules: Enforces transform/opacity-only properties, strong custom easing curves, sub-300ms UI durations, spring configs for gestures, and mandatory reduced-motion and hover gating. - Ready-to-build recipes: RECIPES.md provides implementations for buttons, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, tab indicators, scroll reveals, and drag-to-dismiss. - Use Case: When asked to add an entrance animation to a dropdown menu, the Skill selects a CSS transition with scale(0.95) and opacity, transform-origin at the trigger, a 200ms strong ease-out curve, and ships the reduced-motion variant alongside it. ## Quick Start Ask the assistant to animate a component, for example: add an entrance and exit animation to this modal dialog following the animation guidelines.
