skills.rest
Jakubantalik
JakubantalikCOMMUNITY
Explore all skills by this author →
Website𝕏@jakubantalikGitHub

transitions-polish

Audits and refines existing CSS motion values against a shared motion-token scale.

3.4k|141|Updated Apr 21, 2026
Search Tags:#Frontend#stagger#easing#animation audit#motion tokens#CSS transitions#Design tokens
One-click install
npx skills add https://github.com/Jakubantalik/transitions.dev --skill transitions-polish
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: transitions-polish
Source: https://github.com/Jakubantalik/transitions.dev/tree/main/skills/transitions-polish
Command: npx skills add https://github.com/Jakubantalik/transitions.dev --skill transitions-polish

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Existing animations often use ad-hoc durations, easings, distances, scales, and blur values that feel inconsistent or janky. This Skill scans a project's motion code and maps each value to a documented motion token based on what the animation actually does, then applies the fixes on confirmation.

Core Features & Use Cases

  • Motion audit (transitions review): Scans stylesheets, inline styles, CSS-in-JS, styled-components, and Tailwind arbitrary values for durations, easings, translate distances, scales, and blur, then reports which values should change and why.
  • Token-based polish (transitions polish): Replaces hardcoded motion values with var(--…) token references from the included _root.css, or writes the token's literal value when tokens are not imported.
  • Higher-order timing rules: Enforces open/close asymmetry (closes faster than opens), hover-in vs hover-out easing differences, stagger totals under ~300ms, and intent delays, matching on usage rather than nearest number.
  • Use Case: A developer's modal closes in 300ms while it opens in 250ms. Running transitions review flags the close as slower than the open and suggests var(--duration-quick) (150ms); transitions polish applies the change after confirmation.

Quick Start

Ask the AI to run transitions review on my project to audit all animation durations and easings against the motion tokens.

Frequently Asked Questions about transitions-polish

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I audit CSS animations for inconsistent timing?▼

Run the transitions review command to scan the whole project for durations, easings, translate distances, scales, and blur values. It reports a numbered list grouped by file showing only values that should change, with the suggested token and reasoning, without editing anything.

How do I replace hardcoded transition values with CSS custom properties?▼

Run transitions polish after a review. It replaces hardcoded motion values with var(--…) references when the skill's _root.css token block is imported, or writes the token's literal value otherwise, touching only the motion values being polished.

Does this work with Tailwind and styled-components?▼

Yes. The scan covers Tailwind arbitrary values like duration-[300ms], styled-components and emotion, inline style objects, CSS Modules, and Motion/Framer variants, in addition to plain stylesheets and <style> blocks.

What is the difference between transitions review and transitions polish?▼

transitions review only reports which motion values should change and why, ending with a prompt to apply them. transitions polish runs the same scan, shows a short proposal, and applies the token changes to source files after confirmation.

When should a close animation be faster than an open?▼

Closes should be faster and quieter than opens: dropdowns and modals open at 250ms and close at 150ms, panels open at 400ms and close at 350ms. Symmetric exceptions like page slides, tabs, accordions, icon swaps, and text swaps keep the same duration both ways.

Will it change values that do not match any motion token?▼

No. Matching is based on what the motion does, not the nearest number. If a value's usage matches no documented token usage, it is listed as having no matching token usage and left untouched.

Related Skills

Explore More Software Engineering Skills→
JakubantalikJakubantalik
2.6k

transitions-dev

Provide eighteen production-grade CSS transitions for common UI interactions.

Community
Intermediate
ethan-rioethan-rio

html-design-tokens

Generate self-contained interactive HTML pages for visual design tokens.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

high-performance-css-animations

Guide CSS animations using compositor-only properties like transform and opacity.

Official
Advanced
Aniket-a14Aniket-a14
1

framer-motion-animator

Generate Framer Motion animations for React components with declarative API.

Community
Intermediate