transitions.dev
Collection of the most essential transitions for web apps, skill for agents and Refine tool for agents
Transitions.dev is an agent skill and interactive library that delivers eighteen production-ready CSS transition patterns to AI coding tools like Cursor, Claude Code, and Codex. The skill package includes reference documentation for each transition (card resize, modal animations, notification badges, error shakes, and more) so agents can apply them directly inside developer projects. It also ships a CLI for manual installation and a Refine tool that injects a live timeline panel into running apps, allowing agents to suggest and apply transition improvements in real time.
Key Features
Use Cases
- 01Enable AI coding assistants to add polished card resize and notification badge animations to web apps
- 02Inject modal, dropdown, and panel reveal transitions into React, Vue, or vanilla JavaScript projects via agent prompts
- 03Use Refine tool to audit existing CSS animations and align them with consistent motion tokens
- 04Pull validated error shake and success check animations into form components without writing custom CSS
- 05Provide agents with accessible, reduced-motion-aware transition snippets for WCAG compliance
- 06Prototype page transitions and icon swaps in live apps with real-time agent-driven refinement
Related Skills
View moresuperpowers
An agentic skills framework & software development methodology that works.
skills
Skills for Real Engineers. Straight from my .agents directory.
skills
Public repository for Agent Skills
ponytail
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
transitions.dev — FAQ
What is transitions.dev?+
Transitions.dev is an agent skill that provides AI coding tools with a library of eighteen reusable CSS transition patterns, plus a Refine tool for live animation suggestions. Each transition is packaged as a self-contained, copy-ready CSS snippet with semantic custom properties and accessibility guards.
How do I install the transitions.dev agent skill?+
Run npx skills add Jakubantalik/transitions.dev to install the skill for your AI coding assistant. The skill source will be placed in the appropriate directory so agents like Cursor, Claude Code, or Codex can reference the transition patterns.
Which AI clients work with this skill?+
The skill is compatible with AI coding tools including Cursor, Claude Code, Codex, and similar assistants that support installable skills. The Refine tool can also integrate with in-IDE agents via the /refine live command.
Do I need an API key or account to use transitions.dev?+
Free transitions require no account—simply run npx transitions-pro add <transition-name>. Pro transitions require a passwordless browser sign-in via npx transitions-pro login, which uses a device flow with no API key needed in your terminal.
Is transitions.dev free?+
The core library and skill are free with no account required. Pro transitions unlock additional patterns and are available after a free browser-based authentication step.
How does the Refine tool work?+
Run npx transitions-refine live to inject a timeline and Refine panel into your running app. Click Refine on any element, and your agent suggests CSS improvements or replacements from the transitions.dev library, displayed as reversible overrides in a slide-in panel.
How do I install transitions.dev?+
Open the source repository on GitHub and follow its README. transitions.dev is a skill — MCP Agents Market links you directly to the official repo.
Is transitions.dev free?+
transitions.dev is an open-source project hosted on GitHub. Check the repository for its license and any usage requirements.