transitions-polish
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 bett
Оригинален текст · няма потвърден превод на българскиПърво прочетете инструкцията.
Файлът се зарежда от посочения източник само по ваше действие. Можете да го прочетете тук, да го копирате или да го запазите като .md.
GitHub хранилище- Звезди на репото
- 4285
- Лиценз
- Не е посочен. Проверете в репозитория.
- Последна проверка на записа
- 21.09.2026 г.
Добавете в своя инструмент.
Командата отваря избора на skills от репозитория. Прочетете файла и условията на автора преди изпълнение.
npx skills add Jakubantalik/transitions.devСтраницата копира текст. Не инсталира и не изпълнява нищо на устройството ви.
Откъс от 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
| Token | Value | Usage |
|---|---|---|
--duration-stagger | 40ms | per-item stagger offset |
--duration-micro | 80ms | tooltip/path delay, shake segment, large stagger |
--duration-quick | 150ms | modal/dropdown close, text swap, tooltip appear |
--duration-fast | 250ms | icon swap, dropdown/modal open, tabs sliding, page slide |
--duration-medium | 350ms | panel close, toast close |
--duration-slow | 400ms | panel open, skeleton content reveal, input clear |
--duration-very-slow | 500ms | emphasis moments, badge appear, text reveal, success check |