it scans the five motion-token dimensions —
duration, distance, scale, blur, easing
— and suggests the token each value should reference, plus the higher-order rules for
when
a value is right (open/close asymmetry, hover in/out, stagger, delay).
Install it alongside
transitions-dev
, or on its own — the token values are restated below so this skill can audit a project standalone. When it is installed, the transitions.dev
Refine panel
automatically feeds these rules into every
Small refinement
job.
Core doctrine: match on usage, never on the nearest number
A value is not "wrong" because it is off by 20ms. It is wrong when it does not fit
what the motion does
. Always infer the usage first — modal close, dropdown open, tooltip, badge appear, page slide, text reveal, shake — then pick the token whose documented usage matches. A
300ms
modal close maps to
--duration-quick
(150ms) because both are "modal close", even though the numbers differ. If a value's usage matches
no
token usage, leave it untouched. Never force a swap just because a number is close.
The five dimensions
Same scale the
transitions.dev
Motion tokens tab exposes. Copy this skill's
_root.css
into your project once; once imported, reference any token as
var(--…)
. The
transitions-dev
transitions ship literal values, so they work without these tokens — install this skill to tune them against the shared scale.
Durations
Show more
Installs
804
Repository
jakubantalik/tr…ions.dev
GitHub Stars
2.3K
First Seen
12 days ago
Security Audits
Gen Agent Trust Hub
Pass
Socket
Pass
Snyk
Pass