# Transitions Agent

Scan a codebase for missing, janky, or inconsistent UI motion and fix it with...

- Repository: https://github.com/Jakubantalik/transitions.dev (6007 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-29
- Runs scripts: no, instructions only

## Install

Claude Code: `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -g -a claude-code -y`
Codex: `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -g -a codex -y`
Cursor: `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -g -a cursor -y`
Gemini CLI: `npx skills add Jakubantalik/transitions.dev --skill transitions-agent -g -a gemini-cli -y`

## Description

Scan a codebase for missing, janky, or inconsistent UI motion and fix it with transitions.dev recipes. ALWAYS use this skill when the user's message is or contains a transitions-agent command (npx transitions-agent, npx transitions-agent fix, any variant) - the command is a request for the full guided flow, not just command execution. Also use when the user asks about UI transitions, animations, motion quality, a motion score, janky or missing transitions, "polish the motion", "fix the animations", or whether the motion is good after UI changes.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Transitions Motion Agent

You drive the `transitions-agent` CLI for the user: scan, present choices, run the choice they pick, verify. The scan is deterministic and free; fixes change files, so every fix step needs the user's go-ahead first.

When the user's message is just the scan or fix command (`npx transitions-agent`, `npx transitions-agent fix`, or a variant), that IS the request for this whole workflow: run the scan, then ALWAYS continue to the options step below - never stop at reporting the scan output. `init-ci` is different: it is CI setup only (see CI setup) - never scan or fix as part of it.

## Workflow

1. **Scan** (safe, read-only, no account needed) from the repository root:

   ```bash
   npx transitions-agent@latest --json
   ```

   Report to the user: the motion score (0-100), then the `components` list - every UI component the scan recognized (modal, dropdown, tooltip, toast, accordion, tabs, toggle...) with its motion and the transitions.dev recipe it maps to, marked as matching the recipe, off the motion scale, built wrong, or hand-rolled - then the findings grouped by rule with file:line. Keep it short; lead with the score.

2. **Present exactly these two options** and let the user choose (do not fix without a choice, and do not invent other options such as fixing the findings yourself):
   - **Polish fix** - the transitions-polish treatment: every value moved onto the motion-token scale by what it does (a 300ms modal close becomes 150ms), hover transitions covering what the hover changes, a reduced-motion guard. Small diffs, nothing restructured: `npx transitions-agent@latest fix --yes`
   - **Revamp fix** - everything polish does, plus the transitions.dev recipe installed on each recognized component (Pro recipes included): recipe CSS, state hooks, and the JS for enter and exit. Business plan: `npx transitions-agent@latest fix --mode revamp --yes`

The rest: https://github.com/Jakubantalik/transitions.dev/blob/HEAD/agent/skill/SKILL.md