What problem does it solve? Hand-tuning CSS transitions for common UI moments (dropdowns, modals, badges, error shakes) is repetitive and error-prone, and ad-hoc snippets often break accessibility or replay incorrectly. This Skill provides twelve tested, drop-in CSS transition patterns with semantic custom properties and built-in reduced-motion guards. ## Core Features & Use Cases - Twelve ready-made transitions: card resize, number pop-in, notification badge, text swap, dropdown, modal, panel reveal, page slide, icon swap, success check, avatar group hover, and error state shake. - Semantic design tokens: a single :root block of CSS custom properties controls every duration, easing, distance, and blur across all transitions. - Accessibility built in: every snippet ships a prefers-reduced-motion guard, and JS orchestration snippets handle reflow-based replay and close-state cleanup. - Use Case: A user asks to "make the modal open smoothly" — the Skill matches the request to the modal pattern, pastes the tuned CSS verbatim, wires the .is-open / .is-closing state classes, and keeps the diff minimal. ## Quick Start Ask the assistant to add a smooth open and close transition to your dropdown menu using the transitions-dev patterns.
