Transitions.dev
A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules
Low risk
We rate an entry low when it mostly gives the agent instructions and reference material.
Why this level
- The skill consists of instructions and CSS snippets
- The CLI and the Refine tool additionally write files into the project and reach a service for Pro recipes
Install
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/transitions-devDetects the agents on your machine, checks the risk and pins the version.
Other ways to install
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a claude-code -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .claude/skills
cp -R "$tmp/skills/transitions-dev" .claude/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a cursor -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a github-copilot -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .github/skills
cp -R "$tmp/skills/transitions-dev" .github/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a codex -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a gemini-cli -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .devin/skills
cp -R "$tmp/skills/transitions-dev" .devin/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Formerly Windsurf.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a cline -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .cline/skills
cp -R "$tmp/skills/transitions-dev" .cline/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a roo -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .roo/skills
cp -R "$tmp/skills/transitions-dev" .roo/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
A fork of Roo Code, same .roo folders.
Run in a terminal in the project folder
npx skills add jakubantalik/transitions.dev --skill transitions-dev -a opencode -yThe skills tool installs the current version from the repository. Add the -g flag to use the skill in every project.
Without third-party tools, from commit e2d5551
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Run in a terminal in the project folder
tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/jakubantalik/transitions.dev.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/transitions-dev/
git -C "$tmp" checkout e2d5551656e4d3274e075d1cbd9a95af50f53225
mkdir -p .agents/skills
cp -R "$tmp/skills/transitions-dev" .agents/skills/transitions-devCommands for macOS and Linux, on Windows run them in Git Bash.
Install the skill with npx skills add Jakubantalik/transitions.dev. Then ask to apply a transition to an element, and the transitions review command finds spots in the project where transitions would help.
Other ways from the author
npx skills add Jakubantalik/transitions.devInstalls the transitions skill into the agent's skills directory.
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a collection of portable CSS transitions, each scoped under t- classes with semantic CSS custom properties and shipped with a prefers-reduced-motion guard. The description holds matching rules: from the visible element and the action the agent picks the right transition, for example a dropdown menu, a modal, a panel reveal, an icon swap or a field shake on error. There are commands to list the catalog, review a project and suggest where transitions fit, apply one transition to an element, and replace ad-hoc animation with shared motion tokens. The same set installs through a CLI that pulls the needed CSS into the project, and the Refine tool adds a live panel for tuning animations on a running app.
Who it is for. For frontend developers and designers who want tidy interface transitions without building animations from scratch.
Good fit when
- You need to add a smooth transition to a modal, dropdown or toast
- You need to pick an animation for an element by clear rules rather than by feel
- You need to fold ad-hoc durations and easings into shared motion tokens
Not a fit when
- You need complex JavaScript-library animation rather than portable CSS
- The project already has its own motion system and outside tokens are unwanted
Example request
Make the modal open smoothly and pick a transition for it from transitions.devLimitations
The transitions are CSS snippets; some need the documented HTML hooks wired up, and a few need JavaScript orchestration. Part of the set is marked Pro and unlocks after a browser sign-in to a Transitions Pro account, while the free set works without an account. The CLI and the Refine tool install from npm, Pro recipes are fetched from the api.transitions.dev service, and installed transitions fall under the site's own license while the CLI code is MIT.
How to disable. Remove the skill folder from the agent's skills directory, for example transitions-dev or transitions-pro from ~/.claude/skills/. If you added the Refine live panel, remove it with npx transitions-refine stop.
Security check
- The skill consists of instructions and CSS snippets
- The CLI and the Refine tool additionally write files into the project and reach a service for Pro recipes
README in short
The README describes Transitions.dev as a collection of reusable CSS transitions with an interactive site and copy-ready snippets. There are three ways to use it: a CLI that pulls a transition into the project with npx transitions-dev add, an installable agent skill via npx skills add, and the Refine tool that injects a live panel and a local relay to align animations with motion tokens. The skill is generated from index.html so the snippets match the showcase. Free transitions work without an account, Pro unlocks by a browser sign-in. The CLI code is MIT licensed.
SKILL.md
--- name: transitions-dev description: 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", and the commands transitions reveal, transitions review, transitions apply, transitions refine. --- # Transitions.dev Thirty-two portable CSS transitions, each namespaced under `t-*` selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a `prefers-reduced-motion` guard. ## Quick reference | Transition | When to use | Reference | | --- | --- | --- | | **Card resize** | Tween a container's width or height when its layout state changes. | 01-card-resize.md | | **Menu dropdown** | Open an origin-aware dropdown that grows from its trigger. | 05-menu-dropdown.md | | **Modal open / close** | Scale-up modal dialog with a softer scale-down on close. | 06-modal.md |
FAQ
Are all transitions free?
Part of the set is free and works without an account. Some are marked Pro and unlock after a browser sign-in to a Transitions Pro account.
How does the agent pick a transition?
By the matching rules in SKILL.md: first by the visible element, then by the action, and when several fit it takes the lighter option.
Related
Official Claude Code plugin from the Next.js repo: adopting Cache Components and Partial Prefetching, and verifying changes on a running dev server
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys