transitions-dev

Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, or accordions. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", "open / close transition", "make it animate", "fade between", "success animation", "form error", "shake on invalid", "hover lift", "avatar stack hover", "clear the search", "skeleton loader", "loading shimmer", "shimmer text", "sliding tabs", "segmented control", "tooltip", "reveal text", "tilt card", "3D hover tilt", "cursor glare", "plus to menu", "FAB morph", "accordion", "collapsible", "expand / collapse", "disclosure". Also "motion tokens", "scan for ad-hoc transitions", "replace hardcoded durations with motion tokens", "tokenize my animations", and the commands transitions reveal, transitions review, transitions apply, transitions refine. Trigger + small dot floating on top → notification badge. Trigger + surface that grows from it → dropdown (anchored, origin-aware) or modal (centered, no anchor).

transitions refine maps each existing value to a usage below, then suggests the token to reference. Match on usage, not on the raw number — a 300ms modal close still maps to --duration-quick (150ms). | Token | Value | Usage |

Run: npx -y skills add https://github.com/jakubantalik/transitions.dev --skill transitions-dev --agent claude-code — the source lives at github.com/jakubantalik/transitions.dev.