{ "markdown": "# Transitions.dev\n\nTransitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.\n\nLive site: https://transitions.dev/\n\n## Transitions\n\n| # | Name | What it shows |\n|---|------|---------------|\n| 1 | **Card resize** | Smooth card resize transition. |\n| 2 | **Number pop-in** | Digit flip with blur and stagger. |\n| 3 | **Notification badge** | Diagonal slide with spring pop-in. |\n| 4 | **Text states swap** | Text swap transition with blur. |\n| 5 | **Menu dropdown** | Origin-aware open / close transition. |\n| 6 | **Modal open / close** | Modal transition with scale. |\n| 7 | **Panel reveal** | Panel open / close transition. |\n| 8 | **Page side-by-side** | Forward / back page transition. |\n| 9 | **Icon swap** | Scale and blur icon swap. |\n| 10 | **Success check** | Confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw. |\n| 11 | **Avatar group hover** | Hovered avatar springs up while neighbours follow with a falloff. |\n| 12 | **Error state shake** | Input shake on validation error with auto-revert to neutral. |\n\nEach card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on `:root`, the transition rules namespaced under `t-*` classes, and a `@media (prefers-reduced-motion: reduce)` guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.\n\n## Install with the CLI (npm)\n\nPull any transition into your project from the terminal — no manual copy:\n\n```bash\nnpx transitions-pro add card-resize # free — no account needed\nnpx transitions-pro list # see everything available\n```\n\nPro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):\n\n```bash\nnpx transitions-pro login # opens the browser to confirm a code\nnpx transitions-pro add confetti-burst # pulls the Pro CSS + React\n```\n\nCLI source: [`cli/`](./cli) (published as the public `transitions-pro` package — it holds no premium source; Pro recipes are fetched from the authenticated API).\n\n## Use as an agent skill\n\nThe same transitions are packaged as an installable agent skill so AI coding tools (Cursor, Claude Code, Codex, …) can apply them directly inside your project.\n\n```bash\nnpx skills add Jakubantalik/transitions.dev\n```\n\nSkill source lives in [`skills/transitions-dev/`](./skills/transitions-dev) — `SKILL.md`, eighteen per-transition reference files (`01-card-resize.md` … `18-texts-reveal.md`), and `_root.css` (the universal install block on its own).\n\nThe skill is generated from `index.html` so the snippets always match what the showcase site demonstrates. Re-run after editing the source site:\n\n```bash\nnpm run build\n```\n\n`build/extract.mjs` parses `PROTO_TEMPLATES` and the `:root { --pX-* }` block out of `index.html`, then re-renders every file under `skills/transitions-dev/` from the templates in `build/templates/`.\n\n## Refine tool\n\n**Refine** is a live, agent-driven companion to the skill. One command drops a timeline + Refine panel onto your running app — no `npm install`, no source edits of your own — and every \"Refine\" click asks your coding agent to align the selected CSS/Motion transition to the transitions.dev motion tokens (or replace it with a transition from the library). Suggestions appear in a panel that slides in from the right; you pick which to apply as live, reversible overrides.\n\n```bash\n# inject the panel + start the local relay (deterministic suggestions work immediately)\nnpx transitions-refine live\n\n# same, but also installs/wires the Cursor CLI so the relay answers with the LLM, persistently\nnpx transitions-refine live --llm\n\n# remove the injected