Transitions.dev

Transitions.dev is a library of web transitions by Jakub Antalik (GitHub user Jakubantalik). On the companion site, transitions.dev, each card demonstrates one small interface animation, such as a modal opening and closing, a dropdown menu, a tooltip, a number ticking over or a field shaking on an error, and each can be copied as a self-contained CSS snippet. This repo packages them as Agent Skills, and this entry covers the three core ones. transitions-dev installs whole transitions, and its SKILL.md quick reference lists more than thirty. Ask the AI to animate a component and it works out which transition fits the element, proposes it in one line, and after you confirm adds the CSS, the HTML hooks and any small piece of JavaScript needed, always keeping the prefers-reduced-motion guard. It can also scan your project first and list where transitions would fit, without editing anything. transitions-polish tunes motion that already exists, checking duration, distance, scale, blur and easing against rules for open and close timing, hover in and out, stagger and delay; it lists the changes first and edits only after you confirm. transitions-ui-generation makes any piece of UI look as if an AI were generating it on the spot: a dotted wireframe is drawn from the element's own structure, then the real UI is revealed top to bottom, with an optional agent log and step line, for AI products, launch pages and demo videos. What sets it apart is one shared set of motion tokens across all three Skills, matched by purpose: the AI first works out what a motion is for, then picks the token documented for that use, and leaves values that match no use alone. SKILL.md's example is a 300ms modal close moved to 150ms because both are a "modal close."

Who it's for:designers and front-end developers building websites and apps with AI coding tools such as Claude Code, Cursor or Codex who want modals, menus and buttons to move more smoothly and consistently. Readers who don't code won't get much from it.

Before you start: the README's install command is npx skills add Jakubantalik/transitions.dev, and it says the same command installs transitions-dev and transitions-ui-generation; transitions-polish says it can go in alongside transitions-dev or on its own. You can also copy the matching skills subfolder into the directory your AI tool reads Skills from. transitions-ui-generation adds one JavaScript file and one CSS file to your project, with no other dependencies, and runs in the browser. None of the three Skills asks for an account or API key; the scan and suggestion steps don't edit files, and the AI asks before it changes code. The Skills are written in English. Read the license carefully. The transitions and Skills are under the author's own Transitions.dev license: you can use them in personal and commercial projects, modify them and ship them to your users, and companies need no plan for the free material. The restriction is that you may not repackage, resell or publish the library itself, or a substantial part of it, as a competing transitions library, motion pack or animation kit. Only the tooling in the repo (the command-line tool, the Agent, Refine and so on) is MIT, so the repo as a whole isn't "MIT open source," and the website's design, branding and logo aren't covered by either license. Not everything is free, either. Pro transitions and paid Motion Agent features need a plan: Pro is for one individual paying personally, including freelance client work, while use by or for a company or team, or a plan a company pays for or reimburses, needs Business, with one seat per person. Pro transitions are downloaded through the official command-line tool after a browser sign-in, and the sign-in token is saved on your computer. To use the transitions inside templates, themes or UI kits you sell or give away, the main LICENSE requires a Pro, Business or Lifetime plan and sets conditions. The repo also contains the Refine live-tuning tool (it injects a panel script into your running app and starts a local relay, and with the --llm flag and no Cursor CLI installed it runs a remote install script piped from curl into bash), Motion Agent hosted fixes (which send project scan and fix data to api.transitions.dev and need a license key), and CI features that create GitHub workflows and open pull requests. AI Inspiration World hasn't reviewed or recommended any of these.

Based on the project's public documentation. Not tested by AI Inspiration World.