What problem does it solve? Hand-tuning micro-interactions like dropdowns, modals, error shakes, and skeleton reveals is slow and inconsistent; this Skill provides ready-made, production-tuned CSS transition recipes with matching HTML and JavaScript wiring. ## Core Features & Use Cases - Ready-made transition recipes: 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. - Tunable design tokens: Every transition reads from semantic CSS custom properties (durations, easings, distances, blurs) so one :root block themes the whole set. - Accessibility built in: Each snippet ships with a required prefers-reduced-motion guard that disables animation for users who request less motion. - Use Case: A developer building a settings page needs a dropdown that grows from its trigger, a tooltip with delayed appear, and a success check after saving — they copy three snippets, drop the :root variables into their global stylesheet, and toggle the documented classes from their existing state logic. ## Quick Start Ask the AI to add the menu dropdown transition from the transitions-dev skill to your component, including the :root variables and the open/close JavaScript wiring.
