transitions.dev-Skill

The project presents twelve recurring UI transitions on its demo page, including card resize, number pop-in, notification badge, text swap, dropdown, modal, panel reveal, page slide, icon swap, success checkmark, avatar group hover, and error state shake; the installable skill package itself comprises eighteen reference files. Each transition exists as a standalone CSS snippet, encapsulated under t-* classes with semantic custom properties, and can be dropped into any project without a framework dependency, including built-in protection for prefers-reduced-motion.

Alongside the library itself, the repository ships a skill that agents such as Claude Code, Cursor, or Codex can read in through the usual skill directories (.claude/skills/, .cursor/skills/, .agents/skills/), plus an optional "Refine" tool that overlays a timeline on the running app and checks transitions live against the transitions.dev motion tokens.

For Voyage Digital frontend work, the repository is a curated reference source for standard motion, complementing the in-house motion foundations and motion patterns skills rather than replacing them.

The repository is public at https://github.com/Jakubantalik/transitions.dev. Installation: clone the repository and bring the skill into your project, for example via the matching skill directory of your agent. For the separately packaged skill variant, the author also offers npx skills add Jakubantalik/transitions.dev. An explicit license statement was not clearly identifiable in the repository at the time of research; it is worth checking the repo files themselves before use.