transitions-dev

The transitions-dev skill provides eighteen production-ready CSS transition patterns for common web interface animations. It solves the problem of implementing smooth, professional animations without writing transitions from scratch or pulling in heavy framework dependencies. Each transition is namespaced under `t-*` selectors with semantic CSS custom properties, making them portable and conflict-free across projects.

The skill covers essential UI animation patterns including notification badges, dropdown menus, modal dialogs, panel reveals, page transitions, card resizes, number updates, text swaps, icon transitions, success animations, error state shakes, input clearing effects, skeleton loaders, shimmer text, sliding tabs, tooltips, and staggered text reveals. Every transition snippet includes a `prefers-reduced-motion` guard for accessibility. The patterns are framework-agnostic and require only documented HTML hooks to wire up—no demo-specific markup or JavaScript dependencies.

This skill is ideal for frontend developers building web applications who need polished, accessible animations without reinventing common patterns. It's particularly valuable for product teams shipping notification systems, form interfaces, navigation components, loading states, and multi-step workflows. The decision rules help match user requests like "animate the dropdown" or "shake on invalid" to the appropriate transition pattern, making it easy to implement consistent motion design across an application.