# Transitions.dev By **jakubantalik** ยท Software & Tools 18 production-ready CSS transitions for web apps, plus an AI agent skill that applies them directly inside your project. - Source: https://transitions.dev/ - Repository: https://github.com/Jakubantalik/transitions.dev - Tags: css, animation, ui, open-source, agent-skill, react, cli, copy-paste - Pricing: free - Upvotes: 0 ## Features - 18 interactive CSS transitions with copy-ready snippets - t-* namespaced CSS classes with semantic custom properties - prefers-reduced-motion guard on every snippet - Agent skill installable via npx for Cursor, Claude Code, Copilot, Codex, Gemini CLI - transitions reveal / review / apply skill commands - Refine CLI tool: injects live timeline panel into running app, no source edits - LLM-backed suggestions via --llm flag wiring Cursor CLI - Skill payload auto-regenerated from index.html to stay in sync with the showcase --- ## Why it matters Generic AI output produces flat, one-size-fits-all transitions. Transitions.dev gives your coding agent a curated vocabulary of 18 production-ready patterns, each tuned with real motion tokens (duration, easing, distance, blur, scale), so the AI applies the *right* transition instead of a guess. ## What it is Transitions.dev is two things that ship from one GitHub repo. The main site is an interactive showcase of 18 CSS transitions with a "copy CSS" button on each card. The same transitions are packaged as an agent skill and an optional live-refinement tool called Refine, both installable via npx. The snippets are framework-agnostic: semantic CSS custom properties on `:root`, transition rules under `t-*` classes, and a `@media (prefers-reduced-motion: reduce)` guard. Paste a snippet, wire the documented HTML hooks, done. ## How to use it **Copy-paste path:** visit transitions.dev, pick a pattern, hit the copy button, paste the CSS block into any project. **Agent skill path:** run `npx skills add Jakubantalik/transitions.dev` once in your repo. Then instruct your AI tool using plain commands: - `transitions reveal` lists all 18 transitions. - `transitions review` scans the project for ad-hoc keyframes and hardcoded durations, read-only. - `transitions apply` auto-detects the best-fit pattern at cursor context, proposes it with a rationale, and installs after confirmation. **Live refinement path:** `npx transitions-refine live` injects a timeline panel into your running app. Every "Refine" click asks the agent to align the selected transition to the library's motion tokens. Add `--llm` to wire the Cursor CLI and get LLM-backed suggestions persistently. ## The Refine tool Refine is the most novel part of the stack. One command, no source edits, no npm install to your own project. It injects a slide-in panel, you click Refine on any live element, and the agent proposes a replacement aligned to the transitions.dev motion tokens. Suggestions are live and reversible. Run `npx transitions-refine stop` to remove the injected script tag cleanly. ## Yes, but This library covers 18 carefully chosen patterns, not every animation scenario. Projects already deep in Framer Motion or a full animation library should treat the skill as a *vocabulary reference* for the agent rather than a migration target: the CSS snippets are standalone and won't integrate with Framer's motion values directly. The skill works best on projects using plain CSS or Tailwind where dropping a `t-*` class is enough. ## The bottom line Transitions.dev solves the "generic AI animation output" problem by giving your agent a concrete, citable library to pull from. Start at [transitions.dev](https://transitions.dev/) to browse the patterns, or run `npx skills add Jakubantalik/transitions.dev` to wire the skill into Cursor, Claude Code, or Copilot today. Made by Jakub Antalik. CSS and React snippets, no framework lock-in. ## FAQ ### What is Transitions.dev? Transitions.dev is an open-source collection of 18 production-ready CSS transitions for web app UIs, each available as a self-contained copy-paste snippet and as an installable agent skill. Every snippet uses t-* namespaced CSS classes, semantic custom properties, and a prefers-reduced-motion guard, so it drops into any project without pulling in demo markup or framework dependencies. The project also ships a Refine CLI tool that injects a live panel into your running app so you can iterate on motion with an AI agent without editing source files directly. It was created by Jakub Antalik. ### How do I install and use the agent skill? Run `npx skills add Jakubantalik/transitions.dev` once in your project root to install the skill, which works with Cursor, Claude Code, GitHub Copilot, Codex, and Gemini CLI. Once installed, use `transitions reveal` to list all 18 patterns, `transitions review` to audit the project for ad-hoc keyframes and hardcoded durations (read-only), or `transitions apply` to let the agent auto-detect the best-fit transition at your cursor context and install it after confirmation. You can also name a transition directly, for example `transitions apply menu-dropdown`, to skip auto-detection. ### Is Transitions.dev free or open-source? Transitions.dev is free and open-source. The showcase site at transitions.dev, the agent skill payload, and the Refine CLI (published to npm as the `transitions-refine` package) are all available at no cost, per the GitHub repository. The source for the skill lives in the `skills/transitions-dev/` directory of the repo and is regenerated automatically from `index.html` to keep snippets in sync with the live site. ### What is Transitions.dev best for? Transitions.dev is best for web app teams using AI coding agents who want consistent, named motion patterns instead of the generic easing curves AI tools produce by default: the skill gives Cursor, Claude Code, and Copilot a concrete 18-pattern vocabulary and a decision tree for matching UI elements to the right transition. It is also ideal for CSS and Tailwind projects where dropping a t-* class is enough to wire a transition without a runtime animation library. Designers handing off motion specs will find the named motion tokens (duration, easing, distance, blur, scale) useful as a shared reference. For copy-paste use without any AI tooling, the interactive showcase lets you browse, previe ### How does Transitions.dev compare to a full animation library like Framer Motion? Transitions.dev is a CSS-first snippet library, not a runtime animation framework, so it has no JavaScript API and does not integrate with Framer Motion's motion values or React Spring's spring system. Projects already invested in those libraries should treat the Transitions.dev skill as a vocabulary reference for the AI agent rather than a migration target, since the t-* CSS classes are standalone and won't compose with framework-level animation primitives. Transitions.dev wins on simplicity and agent-readiness: there is nothing to install in your project beyond pasting a CSS block, and the skill gives your AI a named, documented pattern set instead of a blank canvas. ### What are the limitations or risks of using Transitions.dev? The library covers 18 carefully chosen DOM and CSS transitions; it does not include 3D, canvas, SVG path, or scroll-driven animations beyond what the 18 named patterns provide. The Refine live panel requires a running local dev server to inject into, and LLM-backed suggestions require the --llm flag plus the Cursor CLI installed. Per the README, the skill payload is regenerated from index.html, so custom transitions added outside the official library will not appear in the skill until a rebuild is run. --- [View on Analog](https://analoghq.ai/jakubantalik/software-tools/transitions-dev)