What problem does it solve? Deciding whether and how to animate a UI element is error-prone: wrong easings, sluggish durations, non-accelerated properties, and missing reduced-motion support make interfaces feel broken. This Skill turns a motion request into a reviewed implementation by enforcing a fixed decision sequence. ## Core Features & Use Cases - Gated build sequence: Decides first whether the element should animate at all based on usage frequency, then names the motion's purpose before writing any code. - Opinionated ingredient tables: Provides exact easing curves, duration ranges, and spring configs so no values are approximated, plus rules for transform/opacity-only properties and transform-origin placement. - Ready-to-build recipes: RECIPES.md ships implementations for button presses, 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) + opacity, a strong ease-out curve at 200ms, transform-origin at the trigger, and ships reduced-motion and hover gating alongside. ## Quick Start Ask the AI to animate the dropdown menu opening on my settings page using the animate skill.
