Copy-Paste CSS Motion, Packaged for Humans and Agents

What it does Transitions.dev is an interactive showcase of reusable CSS transitions—think card resizes, modal scales, and icon swaps—each distilled into a self-contained snippet. The snippets rely on semantic CSS custom properties and t-* namespaced classes, wrapped in a prefers-reduced-motion guard, so you can paste them into any codebase without dragging along demo markup. The same catalog is also published as an installable agent skill and a companion CLI called Refine.

The interesting bit The Refine tool is the unusual part: it injects a timeline and tuning panel into your locally running app, then pings your coding agent to align existing CSS motion with the library’s tokens or swap in a replacement. It acts as a live, reversible overlay that mediates between your app and an LLM without requiring source edits or an npm install. Meanwhile, a build script parses the showcase HTML to auto-regenerate the skill files, so the snippets stay in sync with the site.

Key highlights

• Snippets are genuinely portable: semantic custom properties on :root, t-* classes, and an accessibility media query included.
• Published as an agent skill consumable by tools like Cursor, Claude Code, and Codex through the skills CLI.
• The Refine CLI drops a live tuning panel onto a running app as a reversible overlay, optionally backed by an LLM relay.
• Includes prototypes.html, an interactive playground for live-tuning durations, distances, and easings.
• A build pipeline (build/extract.mjs) keeps the skill markdown and CSS in lockstep with index.html.

Caveats

• The README claims eighteen transitions but only catalogs twelve by name in its visible table; the full set appears to live on the site or in the skill folder.
• Refine’s full configuration and environment knobs are documented in a separate refine/README.md, not the main readme.
• The agent skill and Refine workflows assume you are already using an AI coding tool such as Cursor or Claude Code.

Verdict Worth bookmarking if you build UIs and want polished motion without hand-authoring keyframes, especially if you already have an AI agent in your workflow. Skip it if you are looking for a framework-specific animation library or do not use agent-assisted coding.