transitions-polish Skill for Claude: Polish UI Animation Timing

Makes Claude audit your existing animations against a set of motion tokens, then tune durations, easing, stagger and delays.

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

transitions-polish makes Claude review the motion already in your project against the transitions.dev motion tokens: 7 durations, 6 easings, 5 distances, 4 scales and 3 blurs (25 in total). It matches each value by what the motion does, such as modal close or dropdown open, and never by the nearest number. A value whose usage fits no token is left alone.

You run it with two commands. transitions review scans the whole project and lists the values that should change, without editing anything. transitions polish shows a proposal, asks for confirmation, and then edits the motion values only. It also applies rules for open and close timing, hover in and out, stagger and delays. It is an add-on to the transitions-dev skill, which SKILL.md says is optional.

Good for

Front-end developers whose animations feel too slow, too fast or inconsistent
Teams that want one shared set of timing and easing values across a project
Users of the transitions.dev transitions skill who want to tune what they added

Install transitions-polish

Claude Code

Copy this prompt.

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

npx skills add Jakubantalik/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.

The README's command installs the repo's skills; the repo has 3 skill folders: transitions-dev, transitions-polish and transitions-ui-generation. SKILL.md says transitions-polish also works on its own, so the second command is enough.

From the project README. Source.

What's in the skill

When it loads

Polish and refine existing motion against the transitions.dev motion-token scale — duration, distance, scale, blur, and easing — plus the rules for WHEN each token applies (open/close asymmetry, hover-in vs hover-out, stagger offsets, and intent delays). An add-on to the transitions-dev skill, focused on tuning what already animates rather than adding new transitions. Use when the user asks to "polish my transitions", "refine the motion", "tune the timing / easing", "make the animation feel better / less janky", "tighten the durations", "fix the stagger", "align to the motion tokens", "audit the motion", "review my animations", "scan for ad-hoc transitions", "tokenize my animations", or runs the commands transitions review or transitions polish. Also drives the Refine panel's Small refinement feature. Triggers on "motion polish", "transition polish", "refine motion", "timing feels off", "too slow / too fast", "stagger", "delay", "open close timing", "hover in out".

Sections in SKILL.md

Core doctrine: match on usage, never on the nearest number
The five dimensions
Durations
Easings
Distances
Scales
Blur
Polish rules — when a value is right
Open/close asymmetry
Hover in vs hover out
Stagger and delay
Commands
transitions review — audit motion against the tokens
transitions polish — apply motion-token refinements
Relationship to the Refine panel
Future expansion

Key facts

Author: Jakub Antalik / Transitions.dev (LICENSE copyright)
License: Transitions.dev License: free for personal and commercial use; do not republish the library as a competing kit (README: tooling is MIT)
Installs on skills.sh: 11,933 (Nov 2, 2026)
GitHub stars: 6,006 (repo, Nov 2, 2026)
Files: 4 including SKILL.md: LICENSE.txt, _refine-rules.md and _root.css, no scripts
Commands: transitions review and transitions polish
Last commit: Oct 29, 2026 (repo)

What it includes

Scans the project and lists motion values that should use a token. Edits nothing.
Covers CSS, inline styles, CSS-in-JS, styled-components, style blocks and Tailwind arbitrary values. Output is a numbered list grouped by file.
Try: “transitions review”
Files · transitions review
Shows a proposal, asks you to confirm, then edits the motion values.
Replaces values with var(--...) tokens if _root.css is imported, or writes the literal value. It touches motion values only.
Try: “polish my transitions”
Write · transitions polish
Durations, easings, distances, scales and blur, matched by usage.
Seven durations from 40ms to 500ms, six easings, five distances from 4px to 30px, four scales and three blurs.
Five token dimensions
Closes are faster than opens; some pairs stay symmetric.
For example dropdown and modal open 250ms and close 150ms. Tabs, accordion and icon swap stay the same both ways.
Open and close asymmetry
Quick hover in, softer hover out, 40ms stagger and no delay on closes.
Total stagger should stay under about 300ms. A tooltip waits 80ms before appearing.
Hover, stagger and delay rules
The token definitions as CSS custom properties, to copy into your project once.
The skill offers to install it if it is missing.
Write · _root.css
Compact rules the transitions.dev Refine panel uses for Small refinement jobs.
Used when this skill is installed alongside that panel.
_refine-rules.md

From the official docs

Permissions

Low risk

transitions polish edits motion values in your source files, but only after it shows a proposal and you confirm. Run it on a clean git branch and read the diff.

What it can do

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

Watch out for

Polish edits your source files
After you confirm, transitions polish rewrites motion values in CSS, styled components, Tailwind classes and similar files. Use version control so you can undo it. github.com
It can add _root.css to your project
If the token file is missing, SKILL.md says the skill offers to install it once. You can say no and take literal values instead. github.com

Technical details

Turning on read-only	Use transitions review, which SKILL.md says does not edit anything.
Scopes	project source files

Questions

What does transitions-polish do?

It makes Claude audit your existing animations against 25 motion tokens and tune them. It checks durations, easing, distances, scale, blur, stagger and delays by what each motion does.

How do I install transitions-polish?

Use the install box above. The README's command installs the whole transitions.dev skills repo. The command with --skill installs only this skill, which SKILL.md says also works on its own.

Do I need the transitions-dev skill?

No. SKILL.md says you can install it alongside transitions-dev or on its own, because the token values are restated in the skill. transitions-dev adds whole transitions, while this skill tunes motion you already have.

Does review change my code?

No. SKILL.md says transitions review does not edit anything. transitions polish shows a proposal and asks for confirmation before it edits.

Is it free?

Yes. The LICENSE says the skill is free for everyone, including companies, and needs no plan. It forbids republishing the collection as a competing transitions library or kit. Paid plans cover the Pro transitions and other paid features.

Is it safe to install?

It bundles no scripts. Polish edits motion values in your project files after you confirm, so use a clean git branch. It may also offer to copy _root.css into your project.

Information

updated Nov 2, 2026

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

jakubantalik/transitions.dev skills.sh

Sources

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

Show all 6

transitions.dev README · github.com
transitions-polish SKILL.md · github.com
_refine-rules.md · github.com
LICENSE.txt · github.com
transitions-polish on skills.sh · skills.sh
jakubantalik/transitions.dev · github.com