What problem does it solve? Hand-written UI animations often feel mechanical, use wrong easing curves, ignore reduced-motion accessibility, or scale in from the wrong origin. This Skill provides nine copy-ready CSS transition patterns plus a coherent motion language so generated animations feel polished and stay accessible. ## Core Features & Use Cases - Nine canonical CSS snippets: card resize, number pop-in, notification badge, text swap, menu dropdown, modal, panel reveal, page slide, and icon swap — each with semantic CSS tokens, a t-* class namespace, and a mandatory prefers-reduced-motion guard. - Motion language and review bar: canonical cubic-bezier curves (out-quint, spring overshoot, ease-in-out), per-element duration budgets, a ten-standard review checklist, and a decision gate for whether to animate at all. - Gesture and performance references: spring physics, momentum projection, rubber-banding for draggable UI, plus jank diagnosis covering scroll-driven animation, runaway rAF loops, animated blur, and the FLIP technique. - Use Case: A user asks to make a filter modal pop out from its trigger button. The Skill selects the modal pattern, pastes the snippet, tunes --modal-open-dur, and sets data-origin from the trigger position so the scale-up grows from the correct corner. ## Quick Start Ask the agent to add a smooth open and close transition to your dropdown menu or modal using the motion-and-transitions skill.
