transitions-dev skill: drop-in CSS transitions for your web app

Gives your agent a library of ready CSS transitions to add to a web app, with four commands to find and tidy motion.

Installs: 22.5K; on skills.sh
Stars: 6K; on GitHub
Files: 37; besides SKILL.md
Updated: Oct 2026; last repo commit

transitions-dev makes your agent add CSS transitions from a fixed library. Each one is a snippet plus HTML hooks, namespaced under t-* classes, with a prefers-reduced-motion guard. It triggers on requests like "animate the dropdown", "make the modal open smoothly" or "add a skeleton loader".

It also defines four commands: transitions reveal, transitions review, transitions apply and transitions refine. The skill bundles no scripts. Installing a transition adds CSS (and sometimes JavaScript) to your project, so you confirm each one first.

Good for

Front-end developers adding modals, dropdowns, toasts or tabs
Designers who want consistent animation timing across an app
Teams that want ad-hoc transitions replaced with shared tokens

Install transitions-dev

Claude Code

Copy this prompt.

Install the transitions-dev skill in Claude Code. Run this command:

npx skills add https://github.com/jakubantalik/transitions.dev --skill transitions-dev

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

Requires Node.js.

From its listing on skills.sh. Source.

What's in the skill

When it loads

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, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. 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", "toast", "snackbar", "like button", "heart animation", "learn more arrow", "checkbox", "check animation", "spinning counter", "odometer", "slot machine digits", "toggle", "switch", "thinking states", "AI status line", "agent reasoning", "reasoning stream", "streaming text", "stream words in", "matrix loader", "dot loader", "banner stack", "stacked toasts". 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.

Sections in SKILL.md

Quick reference
Decision rules
Commands
transitions reveal — list every transition
transitions review — audit the project for fit
transitions apply — install the best-fit transition
transitions refine — replace ad-hoc motion with the motion tokens
Motion tokens
Universal install
Output format
Common mistakes to avoid
Reference files

Key facts

Author: Jakub Antalik (Transitions.dev)
Repository: jakubantalik/transitions.dev (skills/transitions-dev)
Installs on skills.sh: 22,510 as of 2026-11-02
GitHub stars: 6,006 for the whole jakubantalik/transitions.dev repo, 2026-11-02
License: Free for personal and commercial use; see LICENSE.txt (no redistribution of the library itself)
Last commit to the repo: 2026-10-29
What is inside: 38 files: SKILL.md, 35 numbered transition reference files, _root.css and LICENSE.txt
Transition count: 35 reference files in the folder; the SKILL.md text says "thirty-two"

What it includes

Lists every transition with a one-line summary
Prints the catalog as a numbered list. It does not touch your project.
Try: “transitions reveal”
Read · transitions reveal
Scans your project and suggests where a transition fits
Searches for transition declarations, keyframes and hardcoded durations, then lists suggestions by file and line. The SKILL.md says it edits nothing.
Try: “transitions review”
Files · transitions review
Installs the best-fit transition after you confirm
Reads the file near your cursor, picks one transition, proposes it in one line, and on your confirmation adds the root CSS block, snippet, HTML hooks, reduced-motion guard and any JavaScript.
Try: “transitions apply menu-dropdown”
Write · transitions apply
Maps hardcoded durations and easings to shared motion tokens
Scans CSS, CSS-in-JS and Tailwind values, matches each by what the motion does, and lists the changes. The SKILL.md says it edits nothing until you confirm.
Files · transitions refine
Match the UI element, then the verb, to a transition
Examples: a trigger plus a surface that grows is a dropdown or modal, a clear-field button is input clear with dissolve. With no clear match the agent shows the list and asks.
Read · Decision rules
Durations and easings such as --duration-fast and --ease-smooth-out
Seven duration tokens from 40ms to 500ms, plus easing tokens, defined at the top of _root.css.
Write · Motion tokens in _root.css
Modal, dropdown, toast, tabs, tooltip, accordion, skeleton and more
Numbered files 01 to 35, from card resize to donut chart, each with a snippet and hooks.
Write · 35 transition files

From the official docs

Permissions

Low risk

The skill reads your project and, after you confirm, writes CSS and JavaScript into it. Commit first so you can review or undo the changes.

What it can do

Read your data
Create and change things
Delete things
Read-only modeHow to turn it on

Watch out for

It edits your CSS and JavaScript
transitions apply adds a root CSS block, a snippet, HTML hooks and sometimes JavaScript. Commit first and review the diff.
The license has limits
LICENSE.txt allows use in your own products and bars repackaging the collection as a competing library. Read it before bundling the transitions in something you sell.

Technical details

Turning on read-only	transitions reveal, transitions review and transitions refine are described as making no edits.
Scopes	Reads your project files to find transitions and hardcoded durations Writes CSS and sometimes JavaScript into your project after you confirm

Questions

What does the transitions-dev skill do?

It makes your agent add ready-made CSS transitions to your web app. It has 35 transition files, four commands (reveal, review, apply, refine) and a set of shared motion tokens.

How do I install it in Claude Code, the Claude app or Codex?

Use the install box at the top of this page. The transitions.dev README says the agent skill is for tools such as Cursor, Claude Code and Codex, and shows npx skills add Jakubantalik/transitions.dev. The same command also installs a second skill in that repo, transitions-ui-generation.

Is it free?

The skill is free. Its LICENSE.txt says the skill is free for everyone, including companies, and that paid plans cover Pro transitions and paid agent features. It limits repackaging or reselling the collection as a competing library.

Does it need an API key or account?

Not for the skill. The README says npx transitions-dev add --free needs no account, while Pro transitions need npx transitions-dev login.

Will it change my code without asking?

Not by the SKILL.md. transitions apply proposes one transition and installs it after you confirm, and transitions review and transitions refine say they edit nothing.

Is it safe to install?

It bundles no scripts. It reads your project files to find motion and, after you confirm, writes CSS and sometimes JavaScript into it. Review the diff and commit first so you can undo it.

Does it work with Tailwind and CSS-in-JS?

For transitions refine, yes. The SKILL.md says it scans inline styles, CSS-in-JS, styled-components, style blocks and Tailwind arbitrary values like duration-[300ms]. The transitions themselves are plain CSS under t-* selectors.

Information

updated Nov 2, 2026

Repository: jakubantalik/transitions.dev
Folder: skills/transitions-dev

jakubantalik/transitions.dev skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

transitions-dev SKILL.md · github.com
transitions.dev README · github.com
transitions-dev LICENSE.txt · github.com