Search skills/

transitions.dev Claude skills

43+ copy-ready CSS transitions with five skills: apply recipes, polish motion, generate a wireframe-reveal UI, scan a codebase, and a live Refine panel.

Jakubantalik/transitions.dev 5 skills Design & frontend
Our verdict Recommended with caveats

Thoughtfully built and recently updated, but part of it is paid, the license forbids redistribution, and the Refine panel injects a script into your running app.

3/5 Depth expertise shipped Note Security Review before installing 0d Maintenance Updated today 5.9K Adoption stars ? License no clear license

What transitions.dev does

transitions.dev is a showcase of reusable CSS transitions (card resize, modal open and close, dropdowns, toasts, accordions, success checks, skeleton loaders and more), each with a namespaced snippet, CSS custom properties as motion tokens and a prefers-reduced-motion guard. The repo packages that library for agents.

The transitions-dev skill (about 26 KB, 35 reference files) tells an agent which recipe fits a given component and how to wire it. transitions-polish moves existing durations and easings onto the token scale. transitions-ui-generation makes a UI appear as if it is being drawn: a dotted wireframe built from the element's structure, then the real UI revealed, with variants for text and images and a small dependency-free runtime (JavaScript and CSS files, plus demo pages). A separate transitions-agent skill drives the npx transitions-agent CLI, which scores a codebase's motion from 0 to 100, lists findings with file and line, and offers a polish fix or a larger revamp that installs recipes. Finally, refine-live supports a local panel, started with npx transitions-refine live, that injects a timeline and Refine button into your running app and asks your agent for suggestions through a relay on localhost.

Some recipes and the revamp mode need a paid plan and a browser sign-in. The license is custom: free for personal and commercial projects, but you may not redistribute the library itself.

Good for

  • Front-end teams that want consistent motion tokens
  • Adding polished transitions without hand-writing CSS
  • Auditing a React or CSS codebase for janky or missing motion

Not for

  • Projects that need an OSI-approved open-source license
  • Anyone wanting to redistribute the transition library

What's inside depth 3/5

5 skills averaging 18 KB, one with 35 reference files and another with runtime scripts and demo pages, plus CLI integration; no tests or evals.

Skills
5
Reference docs
42
Scripts
3
Tests / evals
0
Templates
0
Avg SKILL.md
18.1 KB

Counted from the repository file tree. How we score depth.

Dependencies and costs

  • npx transitions-dev / transitions-agent / transitions-refine CLIs
  • Paid plan and browser sign-in for Pro recipes and the revamp mode
  • Optional Cursor CLI for the persistent Refine relay
  • Telemetry: The CLIs sign in with a browser device-flow for Pro content and fetch Pro recipes from an authenticated API; the README does not describe other data collection.

Security review

Review before installing

Collection of CSS transition recipes and a UI-generation animation script, plus a transitions-agent skill that scans your codebase for motion issues and a Refine tool that injects a panel into your running app. The fix and CI-setup steps send work to a hosted service with a license key and can change files and GitHub settings, though the skill says to ask before each fix and never push to main. The npm CLIs and a large part of the repository were not available to review.

Worth knowing

  • Relies on a CLI or package we could not reviewThe skills drive the npm CLIs transitions-dev, transitions-agent and transitions-refine; the repo's cli/ sources were not among the files we have.README.md:31
  • Runs remote code at an unpinned versionThe agent skill tells the agent to run npx transitions-agent@latest --json (and later fix, signup, init-ci) at the latest version, and the README uses unpinned npx transitions-dev and npx transitions-refine.agent/skill/SKILL.md:14
  • Makes network requeststransitions-agent fix, signup and init-ci --yes talk to api.transitions.dev and GitHub (the hosted fix service needs a license key); the CLI fetches Pro recipes from an authenticated API after a browser sign-in.agent/skill/SKILL.md:49
  • Needs an API key for its own serviceA license key from TRANSITIONS_AGENT_LICENSE or ~/.transitions-agent.json is used for the hosted fix service; the skill says init-ci never prints the key.agent/skill/SKILL.md:32
  • Installs packages or toolsnpx transitions-refine live --llm installs and wires the Cursor CLI, and npx skills add installs the skills.README.md:73
  • Changes files outside your projecttransitions-refine live injects a script tag into your running app and starts a local relay on localhost:7331; signup writes ~/.transitions-agent.json; init-ci writes GitHub Actions workflows and sets a repository secret.README.md:73

What we checked

The repository (468 files) on Oct 29, 2026. Not a full review: 261 of 468 files were not downloaded (large repository; we reviewed the skill folders); it relies on code outside the repository: npm packages transitions-dev, transitions-agent, transitions-refine (and the legacy transitions-pro); api.transitions.dev hosted fix service; Cursor CLI installed by `--llm`.

NVIDIA SkillSpector static scan: 29 pattern hits (MCP Rug Pull 26, System Prompt Leakage 2, Data Exfiltration 1). Hits are 'npx' mentions, a 'show rule' phrase in a tooltip recipe, and curl calls to the Refine relay on localhost:7331 in the refine-live skill. The three code files are browser animation scripts with no fetch, eval or storage beyond a local settings value in demo-panel.js.

A review, not a certification. Skills change after we check them — read the files before installing.

License

Custom license (GitHub: unrecognized) — free for personal and commercial projects, modification allowed, but the library itself may not be redistributed; Pro content is paid.

Can it run unattended?

Not really. The scan is deterministic, but fixes ask for your go-ahead and the Refine loop is click-driven.

Alternatives to transitions.dev

Emil Kowalski's Skills

emilkowalski/skills

Sixteen design-engineering skills on animation, Apple-style motion, mobile feel, UI libraries and Swift, written by the author of Sonner.

Recommended Check first Depth 3/5

make-interfaces-feel-better

jakubkrehel/make-interfaces-feel-better

One UI-polish skill: concentric radii, optical alignment, layered shadows, interruptible animations, icons and typography.

Recommended No issues Depth 3/5

GSAP Skills

greensock/gsap-skills

GreenSock's official skills for correct GSAP animation code: core API, timelines, ScrollTrigger, plugins, React and other frameworks, utilities and performance.

Recommended Check first Depth 2/5

Impeccable

pbakaus/impeccable

A design skill with 24 commands (polish, bolder, critique, audit, harden and more), a 62-rule deterministic slop detector and an optional edit hook.

With caveats Broad access Depth 4/5

FAQ

What is transitions.dev?

It is a collection of reusable CSS transitions with copy-ready snippets, motion tokens and reduced-motion guards, published as a website, an npm CLI and agent skills. The repo adds skills for applying, polishing and generating motion.

How do I install the transitions.dev skill?

Run npx skills add Jakubantalik/transitions.dev. To pull a single recipe into a project without the skill, use npx transitions-dev add followed by the transition name.

Is transitions.dev free?

Many transitions are free with no account, but Pro transitions need a browser sign-in and the full revamp fix mentioned in the skill needs a Business plan. The license permits commercial use but not redistributing the library.

transitions.dev vs Emil Kowalski's skills?

transitions.dev ships a catalog of ready CSS recipes and tooling to scan and fix motion. Emil Kowalski's skills are design guidance for building interfaces. Pick transitions.dev for drop-in recipes, the other for general principles.

Sources: GitHub repository (stars, license, file tree, last push Oct 29, 2026). Review based on the README and SKILL.md files as published.