Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

transitions-polish — Claude Code skill: motion tuning

This skill audits existing animations and maps timing, distance, scale, blur, and easing to motion tokens. Use it when motion feels off.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-code
Open on GitHub

What transitions-polish does

transitions-polish reviews motion that is already in a project across duration, distance, scale, blur, and easing. It chooses tokens from the motion’s role, such as opening a modal, closing a dropdown, swapping text, showing a tooltip, or applying a stagger. A nearby number alone is not enough reason to change a value.

The skill also checks phase-specific behavior: closes are usually shorter than opens, hover-in and hover-out can differ, and some reversible motions stay symmetric. You can add the shared tokens through _root.css; unlike transitions-dev, this skill tunes transitions that already exist. Because it is described as an add-on, check whether your project needs the separate transitions-dev transition set before installing it.

What it helps with

  • audit animations against motion tokens
  • match duration and easing to each motion
  • separate open and close timing
  • correct stagger and intent delays
  • find transitions with ad-hoc values

Example prompts for the agent

  • Run `transitions review` and audit the project’s animations against the motion-token usage rules.
  • Run `transitions polish` to tune timing, easing, stagger, and open/close behavior in the existing transitions.
  • Map the current animations to transitions.dev tokens, leaving values without a matching usage unchanged.

How to install transitions-polish

1Skills CLI (Vercel)

npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-code

2Manually: put the files in place

~/.claude/skills/transitions-polish/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/transitions-polish/

Similar

flutter-setup-declarative-routing flutter Sets up Flutter routing with go_router, including URL-based screens, nested navigation, and deep links for web and mobile apps. Claude Code CX Codex Cursor +1 37,600installs flutter-add-widget-preview flutter Configures interactive Flutter widget previews with package:flutter/widget_previews.dart. Useful for testing UI components in isolation without launching the whole app. Claude Code CX Codex Cursor +1 36,600installs flutter-setup-localization flutter This skill automates initialization of multi-language support in Flutter projects. It adds dependencies, enables code generation, and creates a configuration file for .arb-based translations. Claude Code CX Codex Cursor +1 36,600installs variant jakubkrehel This skill builds distinct versions of one UI component and puts them on the page where it will live. Use it to compare design directions before choosing one. Claude Code CX Codex Cursor +1 14,300installs explain-interface jakubkrehel Explains how a visual effect, animation, or website layout was built from a live page or a screenshot. It breaks down the underlying layer stack. Claude Code CX Codex Cursor +1 13,900installs codegen vercel-labs Utilities for generating code from json-render UI trees. Build custom code exporters for Next.js, Remix, and other frameworks, traverse specs, and serialize props. Claude Code CX Codex Cursor +1 8,900installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about transitions-polish

How do I install transitions-polish in Claude Code?

Run npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-code, then run npx skills add Jakubantalik/transitions.dev --skill transitions-polish -a claude-code again. The skill file is at ~/.claude/skills/transitions-polish/SKILL.md.

What does transitions-polish do?

It audits existing transitions and suggests tokens for duration, distance, scale, blur, and easing based on each motion’s use. It also checks open/close asymmetry, stagger offsets, and delays.

Does transitions-polish require transitions-dev?

No. The skill includes the token values needed for a standalone audit, and it can also be installed beside transitions-dev to tune transitions that were already added.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor