# transitions.dev: Copy-Ready CSS Transitions and an Agent Skill for AI Coding Tools > transitions.dev packages eighteen named CSS interaction patterns into portable, self-contained snippets and publishes them as an installable agent skill, letting front-end developers add production-ready motion to any project without a runtime dependency. **Jakubantalik/transitions.dev** — Collection of the most essential transitions for web apps, skill for agents and Refine tool for agents - Repository: https://github.com/Jakubantalik/transitions.dev - Website: https://transitions.dev/ - Stars: 4,452 · Forks: 188 - Language: HTML - License: not declared - Published: 2026-09-23 · Updated: 2026-09-23 · Language: en - Canonical page: https://hysenlabs.com/projects/jakubantalik-transitions-dev ## CSS Transitions as Copy-Paste Components transitions.dev addresses a recurring friction point in front-end work: reproducing a polished UI motion pattern in a production codebase typically means either installing a full animation library or spending time hand-tuning timing curves. This project sidesteps both by publishing each transition as a self-contained CSS snippet, so a developer can paste it into any component without pulling in a dependency or touching demo-specific markup. The target user is a front-end developer building or iterating on a web interface who wants a card-resize animation or a notification-badge slide that already handles edge cases and timing correctly. The project also targets AI coding agents: the same eighteen transitions are published as an installable skill, giving tools like Cursor and Claude Code a concrete vocabulary to draw on when writing animation CSS rather than synthesising values from scratch. A third component, the Refine panel, targets developers working on an existing interface who want to bring its animations in line with the library's motion tokens. The index page at https://transitions.dev/ demonstrates all eighteen patterns with a copy button on each card that emits the full snippet. A separate prototypes page provides a live tuning playground with controls for durations, distances, and easings. ## How the CSS Snippet Architecture Works The structure of each snippet is the central design choice. The :root block for a given transition defines CSS custom properties prefixed with --pX-*, where X is the transition number. These variables cover durations, easing curves, distances, and blur amounts. The transition rules sit under t-* class names rather than being tied to component-specific selectors. Applying a transition to a button or a modal means adding the class; the snippet does not force any particular markup shape. Every snippet includes a @media (prefers-reduced-motion: reduce) block. Under that media query all transition durations collapse, so the snippet degrades correctly for users with that accessibility preference without any additional work from the developer. The agent skill payload lives in skills/transitions-dev/. It contains SKILL.md, a _root.css file with the shared property block, and eighteen per-transition reference files named 01-card-resize.md through 18-texts-reveal.md. These files are generated by build/extract.mjs, which parses the PROTO_TEMPLATES and the :root block from index.html and renders each reference file from templates in build/templates/. Running the following command after editing index.html regenerates every skill file and keeps it in sync with the live demonstration site: ```bash npm run build ``` ## Installing Transitions with the CLI The transitions-dev npm package provides a CLI to pull transitions into a project directly from the terminal. To see everything available: ```bash npx transitions-dev list ``` To pull a single free transition: ```bash npx transitions-dev add card-resize ``` This writes the self-contained CSS snippet for the card-resize transition into the project. To pull every free transition at once: ```bash npx transitions-dev add --free ``` Pro transitions are behind a browser-based authentication step that uses a device flow. The CLI opens the browser to confirm a short code rather than storing an API key in the terminal: ```bash npx transitions-dev login npx transitions-dev add confetti-burst ``` After login, the CLI fetches the Pro CSS and React snippet from the authenticated API. The package was previously published as transitions-pro; that name still forwards to transitions-dev but holds no premium source. To run the showcase site locally without a build step: ```bash python3 -m http.server 8765 ``` Then open http://127.0.0.1:8765/ to see all eighteen transitions in the browser. ## The Agent Skill and AI Coding Tools The agent skill packages the same transitions in a format that AI coding tools can install: ```bash npx skills add Jakubantalik/transitions.dev ``` Once installed, an agent can reference a specific transition by name from SKILL.md or from any of the eighteen numbered reference files. The _root.css file provides the shared :root property block. Because the skill is regenerated from index.html by the build script, its tokens always match what the live site demonstrates. This matters in practice when an agent writes UI code: rather than generating duration and easing values from scratch, it draws on the library's defined tokens. The result is CSS that a design reviewer or another engineer would recognise as coming from a consistent system rather than from an ad hoc estimate. The skill source in skills/transitions-dev/ is regenerated by running npm run build, so a developer maintaining a fork can keep their local skill in step with any changes to the source site. The README notes that the skill is also referenced by the Refine tool and by tools like Codex, not only by Claude Code and Cursor. ## Live Iteration with the Refine Panel The Refine tool ships as the transitions-refine npm package. One command injects a timeline and a side panel onto a running local page without editing source files: ```bash npx transitions-refine live ``` Clicking Refine on any animated element sends a request to the coding agent to align that element's CSS to the library's motion tokens, or to replace it with a named library transition. The suggestion appears in a panel that slides in from the right and can be applied as a live, reversible override before being committed to the source. To back the panel with an LLM for persistent, context-aware suggestions: ```bash npx transitions-refine live --llm ``` This variant also installs and wires the Cursor CLI so the relay answers with the language model. Without --llm, running /refine live in the IDE backs the panel with the in-IDE agent instead. To remove the injected script tag from the page: ```bash npx transitions-refine stop ``` The Refine tool is aimed at developers iterating on an existing UI rather than starting fresh. It assumes a running local development server to inject the panel into, and its value is highest when a codebase already has animations that do not yet follow a consistent motion system. ## Limitations, Alternatives, and Licensing transitions.dev provides plain CSS. It does not cover JavaScript-driven animation orchestration, scroll-driven animations, or physics-based spring motion beyond what CSS transition approximations can express. For gesture-responsive animations that depend on drag velocity, or for complex sequencing tied to React component state, the plain-CSS model will reach its limit. Framer Motion is a widely used alternative for React projects that need JavaScript-driven animation. It supports spring physics, layout animation across component tree changes, and gesture hooks. The trade-off is an additional JavaScript runtime dependency and a React-specific API. transitions.dev produces no runtime dependency in the consuming project, and its snippets work in any framework or in vanilla HTML. The repository lists no license. Default copyright terms apply to unlicensed code. The README does not state any terms for commercial use, redistribution, or modification of the CSS source. Before shipping these snippets in a production product, the applicable terms should be confirmed with the repository owner. The Pro transition tier depends on an external authenticated API. The README does not document offline usage or what happens to Pro transitions if the service becomes unavailable. Teams that require guaranteed offline access should factor that constraint in before relying on Pro transitions in a build pipeline. ## Conclusion Front-end developers who want polished CSS transitions without a runtime dependency, and teams using AI coding agents who want to give those agents a defined motion vocabulary, are the right audience for transitions.dev. Anyone who needs JavaScript-driven animation sequencing, scroll-linked effects, or gesture-responsive motion will find the plain-CSS model insufficient. Before using the snippets in a production product, confirm the license terms with the repository owner, since the repository does not publish one. ## FAQ ### What is the transitions-dev skill? The transitions-dev skill is an installable package for AI coding tools such as Claude Code and Cursor. It contains a shared CSS property block in _root.css and eighteen per-transition reference files, giving an agent a defined vocabulary of named motion tokens to apply rather than generating animation values from scratch. ### How do I add a single transition to my project using the transitions-dev CLI? Run npx transitions-dev add followed by the transition slug, such as npx transitions-dev add card-resize. The command writes the self-contained CSS snippet for that transition into the project. Running npx transitions-dev list first prints the full catalogue of available transitions. ### Do free transitions require an account or login? Free transitions require no account. Running npx transitions-dev add --free pulls every free transition without any login step. An account is required only for Pro transitions, which use a browser-based device flow triggered by npx transitions-dev login. ## Sources - [Issues](https://github.com/Jakubantalik/transitions.dev/issues) - [Jakubantalik/transitions.dev on GitHub](https://github.com/Jakubantalik/transitions.dev) - [Project website](https://transitions.dev/) - [README](https://github.com/Jakubantalik/transitions.dev/blob/main/README.md) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/jakubantalik-transitions-dev