The canonical home for this skill is now Jakubantalik/transitions.dev.
$ npx -y skills add jakubantalik/transitions-dev --agent claude-code
The canonical home for this skill is now
Jakubantalik/transitions.dev.This repository is kept as a backwards-compatible mirror so the legacy install command keeps working. New transitions and edits land in transitions.dev first; this repo is synced from there.
Production-ready CSS transitions for web apps, packaged as an agent skill.
Twelve drop-in transitions: card resize, number pop-in, notification badge, text swap, dropdown, modal, panel reveal, page slide, icon swap, success check, avatar group hover, error state shake. Each one ships portable CSS namespaced under t-* selectors with semantic CSS custom properties — paste the snippet into any project and it just works, no demo markup or framework dependencies.
Recommended (canonical):
npx skills add Jakubantalik/transitions.dev
Legacy (still works, this repo mirrors the latest skill payload):
npx skills add Jakubantalik/transitions-dev
Works with Cursor, Claude Code, Codex, and any agent that consumes .cursor/skills/, .claude/skills/, or .agents/skills/.
/skill transitions-dev
Or describe what you want — "animate the dropdown opening", "slide between two pages", "add a notification badge to the bell icon", "shake the input on validation error", "hover spring on the avatar stack" — and the agent will pick the right transition, paste the CSS, and wire the documented HTML hooks.
transitions.dev — every transition is interactive on the showcase page, with controls for tuning durations, easings, and distances.
The skill payload is generated from transitions.dev's index.html so the skill stays in lockstep with what the showcase site demonstrates. The canonical build now lives in the transitions.dev repo at build/extract.mjs; this mirror's copy of the build script defaults to a sibling Essencial/ checkout for the historical layout.
SOURCE_HTML=/path/to/transitions.dev/index.html npm run build
The build script parses PROTO_TEMPLATES and the :root { --pX-* } block out of the source HTML and re-renders every file under skills/transitions-dev/. Re-run after editing the source site to keep the skill in sync.
View @jakubantalik’s profileTransitions.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. Live site:
@jakubantaliktransitions-dev is a Claude Code plugin with 1 hand-picked skill, indexed on Flowy in the Skill Authoring category. Install it with the command on its page. It includes transitions-dev. Its skills do not fire on their own yet. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it