Transitions Dev

Twenty-one production-ready CSS transitions you can drop into any web app without a framework. Each pattern is namespaced under `t-*` classes with semantic custom properties and ships with a prefers-reduced-motion guard. You get modals, dropdowns, notification badges, skeleton loaders, success checks, error shakes, 3D card tilts, and more. The skill matches your request to the right transition based on the UI element and action, so saying "animate the dropdown" or "shake on invalid" pulls the correct snippet with documented HTML hooks. If you're polishing motion that already exists, use the companion transitions-polish skill instead. No guessing which easing curve to use or how long a modal should take to open.

skills.sh installs: 24.5K
GitHub stars: 6.2K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add jakubantalik/transitions.dev --skill transitions-dev --agent claude-code

Installs into .claude/skills of the current project.

Files

Transitions.dev

Thirty-six portable CSS transitions, each namespaced under t-* selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a prefers-reduced-motion guard.