What problem does it solve? Deciding whether an element should animate at all, and then choosing the right tool, properties, easing curve, and duration, is where most UI motion goes wrong. This Skill turns a request for motion into an implementation that follows Emil Kowalski's animation philosophy, rejecting animations that should not exist and shipping reduced-motion and hover gating with every one that should. ## Core Features & Use Cases - Gated build sequence: Evaluates interaction frequency and purpose before writing code, so high-frequency actions like keyboard shortcuts get no animation instead of a bad one. - Opinionated ingredient selection: Picks the cheapest tool that works (CSS transition, @starting-style, CSS animation, WAAPI, or Motion), restricts properties to transform and opacity, and supplies exact cubic-bezier curves, duration ranges, and spring configs. - Ready-to-build recipes: Provides implementations for button presses, dropdowns, tooltips, modals, drawers, toasts, accordions, staggers, hold-to-confirm, tab indicators, scroll reveals, and drag-to-dismiss gestures. - Use Case: When asked to animate a dropdown menu, it produces a popover that scales from its trigger's transform-origin at 200ms with a strong ease-out curve, plus prefers-reduced-motion handling, rather than a generic fade. ## Quick Start Ask the AI to animate a component, for example: animate this modal so it feels right when it opens and closes.
