Transitions.dev
-

RefineBeta

Transitions refining for agents

Tune your UI transitions live in your agent.
The integrated transitions.dev skill suggests refinements you can apply instantly.

Get started See demo

Works with Cursor CLI, Claude Code and Codex

Get started

There are two ways to install and use it.

Run with CLI agent
npx transitions-refine live

Run it in your terminal. Works with the Cursor CLI, Claude Code and Codex - the relay wires your agent and answers Refine jobs persistently, with no chat loop and no idle credit burn. Run npx transitions-refine stop to remove it.

Run with agent (no CLI)
npx transitions-refine live
/refine live

Run the install command in your project, then /refine live in the editor (Cursor, Claude Code or Codex). Your agent becomes the poller and keeps polling for Refine jobs - so it stays running and uses your chat credits while open. Say stop refine to end the loop, or run npx transitions-refine stop to remove the panel.

How you use it

  1. Wait until Refine scans your project and your agent understands all your transitions.
  2. Select the transition you want to tune from the transition dropdown.
  3. Manually tune it using the timeline or the value controls in the right column.
  4. Use Refine for improvement suggestions powered by the integrated transitions.dev skill.
  5. Save changes by accepting them straight into your source code.

Features

  • TimelineSee every property's duration, delay and easing laid out on a shared time ruler.
  • Value controlsDrag or type to tune timings and curves, with the live component updating as you go.
  • Refine: small improvementsThe agent nudges your timings toward proven motion tokens for cleaner, snappier feel.
  • Refine: replace transitionsSwap a transition for a better-fit recipe straight from the transitions.dev library.
  • Accept changesWrite the refined values back into your source in whatever styling approach you use.

FAQ

A timeline panel that docks onto your running app and lets you tune its UI transitions live. Pick a transition, drag the timing, and let your agent suggest values aligned to the transitions.dev motion tokens - then write them back into your code.

There are two ways. With a CLI agent: run npx transitions-refine live in your terminal - it wires your agent (Cursor CLI, Claude Code or Codex) and answers Refine jobs persistently, with no chat loop or idle credit burn. With an agent (no CLI): run npx transitions-refine live in your project, then /refine live in the editor so your agent becomes the poller. Either way the panel is injected onto the running page - no edits to your code. Run npx transitions-refine stop to remove it.

Refine scans your project and detects the CSS transitions and animations automatically. They show up in the transition dropdown - select one to load its timeline and value controls.

Plain CSS, CSS Modules, styled-components, Tailwind, and inline styles. On Accept, Refine writes the values back in whichever one you already use.

Yes. The running component is the preview - there's no play button. Every edit is applied live and stays reversible until you click Accept, which writes the values into your source.

No - Refine is a dev-only tool. It runs against your local app while you tune, and ships nothing to production. Run npx transitions-refine stop when you're done.

Open an issue on GitHub or contact jakubja@gmail.com.