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-06-30: Jakubantalik/transitions.dev, HEAD 2f77e25404c3763f4f61e97bcf9fa8a9639dd59e, 1,779 stars, 54 forks, no GitHub release tags, and no detected GitHub license metadata. Brin returned caution for both repo (65) and skill (59), so treat the local copy as a reviewed source skill rather than an auto-updating dependency. Source: GitHub API, git ls-remote, Brin API, 2026-06-30

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-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