transitions-polish

SKILL.md

Transitions Polish

An add-on to the transitions-dev skill. Where transitions-dev installs whole transitions, this skill polishes motion that already exists: 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