What problem does it solve? Hand-tuning micro-interactions like dropdowns, modals, error shakes, and skeleton reveals is slow and error-prone; this Skill provides ready-to-use, tunable CSS/JS transition snippets so you can add polished motion to a web UI without designing each animation from scratch. ## Core Features & Use Cases - Ready-made transition snippets: Covers card resize, number pop-in, notification badges, text swaps, dropdowns, modals, panel reveals, page slides, icon swaps, success checks, avatar hover springs, error shakes, input clear dissolve, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, and 3D card tilt. - CSS variable tuning: Every transition reads durations, easings, distances, and blurs from semantic custom properties in a shared :root block, so one theme tunes all transitions. - Accessibility built in: Each snippet includes a required prefers-reduced-motion guard that disables animation for users who request less motion. - Use Case: When building a settings page, use the modal, tooltip, and error-shake snippets together to animate dialog open/close, hover hints, and form validation feedback with consistent timing. ## Quick Start Add the dropdown transition from the transitions-dev skill to my menu component and wire up the open and close classes.
