Transitions.dev

Curated set of production-ready UI transitions ("Essential transitions for web apps") by Jakub Antalik, now vendored as Kevin's active transitions-dev engineering skill.

transitions.dev (tagline "Essential transitions for web apps") is a curated set of production-ready UI transitions with live, interactive previews, by Jakub Antalik. Source: transitions.dev, https://transitions.dev, 2026-06-13

The catalog targets concrete interface moments rather than generic tweens: card resize, number pop-in (digit flip with blur + stagger), notification badge (diagonal slide + spring pop-in), text-state swap with blur, origin-aware menu dropdown, modal scale open/close, panel reveal, forward/back page side-by-side, icon swap (scale + blur), success check (blur + rotate), avatar-group hover (distance-falloff lift with bouncy return), error-state shake (cubic-bezier), input clear (per-word dissolve), skeleton-to-content cross-fade, two-line text reveal with offset stagger, sliding tabs (pill indicator follows the active tab), shimmer text (masked gradient sweep), and tooltip open/close (appear-only delay, instant exit). Source: transitions.dev, https://transitions.dev, 2026-06-13

It became installable as an agent skill in April 2026 — npx skills add jakubantalik/transitions-dev — mirroring the Skills.sh - Agent Skills Registry pattern where standalone tools ship as agent-consumable skills (cf. Shaders MCP, Browser Testing Skills, Security and Review Skills). The agent reads SKILL.md for transition recipes instead of importing a runtime dependency. Kevin's wiki now vendors the full upstream skill under skills/engineering/transitions-dev/, including all 21 recipe files and _root.css. Source: X/@Jakubantalik, 2026-04-27; Source: GitHub, 2026-06-30

Engagement signal: 3,253 likes / 4,691 bookmarks — the 1.44x bookmark-to-like ratio signals high save-for-later intent, typical for reference/utility tools. Source: X/@Jakubantalik, 2026-04-08

On the site each transition is an interactive, replayable preview (an "Animate" or toggle trigger per card), so timing and choreography can be felt before the code is copied. Source: transitions.dev, https://transitions.dev, 2026-06-13

Source snapshot

Current source snapshot as of 2026-08-10: Jakubantalik/transitions.dev, HEAD 06f81950a67c1a89bd418be91f8a26ebca6472a9, 2,610 stars, 119 forks, and no detected GitHub license metadata. Upstream now exposes 27 free recipes, a separate transitions-polish skill, an authenticated transitions-pro downloader, and a transitions-refine live panel/relay that can invoke local agent CLIs and, in one fallback path, pipe the Cursor installer into a shell. The reviewed local skill stays pinned to its prior 21-recipe content-only surface until a selective update passes audit.

The six new free recipes are toast, like button, learn-more hover, checkbox check, spinning counter, and toggle. They remain useful source material, but this revision is not copied verbatim: the like-button recipe requires JavaScript to randomize and clean up particles while saying “None — pure CSS,” and the spinning-counter recipe requires a JavaScript reel builder and blur tween while making the same claim. Repair and test those orchestration contracts before promotion; do not let the Pro or Refine CLIs enter through a recipe refresh. Source: captured Jakubantalik/transitions.dev repository and skill at HEAD 06f8195, reviewed 2026-08-10

Stack fit (Kevin)

• Each recipe is a named, copy-paste transition mapped to a real UI moment — exactly the Animation Vocabulary (Animations.dev) / Interface Micro-Polish layer Kevin polishes by hand.
• Overlaps Frontend and Design Skills (component animations) and Frontend and Design Skills (scroll-driven); install the skill alongside them and treat it as a pattern library, checking which recipes the existing stack doesn't already cover.
• Skill format = no dependency conflict; the agent consults SKILL.md during builds, complementing the CSS View Transitions API for route/DOM transitions.
• Aligns with design-engineering-polish polish philosophy (cubic-bezier shakes, spring pop-ins, origin-aware open/close).
• Replayable previews let Kevin audition timing before committing a recipe, matching the screenshot/iterate loop of the taste-* skills.

---

Timeline

• 2026-08-10 | Re-reviewed current upstream at HEAD 06f81950a67c1a89bd418be91f8a26ebca6472a9. Retained all six new recipe signals but held the sync: two recipes contradict their required JavaScript orchestration, and the new Pro/Refine command surfaces add authentication, download, shell, installer, agent-CLI, and mutation boundaries that do not belong in the existing content-only skill. Source: X/@cyrilXBT, 2026-07-16; Source: captured upstream repository, reviewed 2026-08-10
• 2026-07-12 | Reabsorbed the transition-tuning demo for Cursor CLI, Codex, and Claude Code. It reinforces Transitions.dev as the existing live motion-tuning route; the spam-proof animation reference remains a design criterion, not a separate tool. Source: X Bookmark Ingest 2026-07-12; X/@Jakubantalik and @rpavlini, 2026-07-08–09
• 2026-06-13 | Quality remediation: documented the transition catalog (card resize, number pop-in, sliding tabs, shimmer text, error shake, etc.) and the "Essential transitions for web apps" framing from the primary source. Source: https://transitions.dev
• 2026-06-30 | Deep-reviewed the bookmark media and upstream skill folder, then imported the full skill into skills/engineering/transitions-dev/. The local skill owns concrete UI-transition recipes; design-engineering-polish remains the broader taste and motion-critique route. Source: X bookmark artifact audit, 2026-06-30
• 2026-04-08 | transitions.dev announced as a skills.sh skill: "Everything from transitions.dev is now available also as a skill - npx skills add jakubantalik/transitions-dev." 3,253 likes, 4,691 bookmarks. Source: X/@Jakubantalik, 2026-04-08