← marketplace
designdesignsha:3fa06a6721645a30manual
transitions-dev
Use when you want production-ready, framework-free CSS transitions — dropdowns, modals, toasts, tabs, accordions, success checks — pasted in as portable t-* snippets with reduced-motion guards.
Install confidence
curl --create-dirs -fsSL https://skillmake.xyz/i/transitions-dev -o ~/.claude/skills/transitions-dev/SKILL.md
Pinned content
sha:3fa06a6721645a30
Generated with
manual
Source
github.com
The file served at /api/marketplace/transitions-dev-3fa06a67/raw matches this hash. Inspect before install, then copy the command.
2,945 chars · ~736 tokens
--- name: transitions-dev description: Use when you want production-ready, framework-free CSS transitions — dropdowns, modals, toasts, tabs, accordions, success checks — pasted in as portable t-* snippets with reduced-motion guards. source: https://github.com/Jakubantalik/transitions.dev generated: 2026-07-23T01:35:18.326Z category: design audience: design --- ## When to use - Adding a specific interaction like an animated dropdown, modal, toast, or sliding tabs - Making something 'animate smoothly' without pulling in a JS animation library - Standardizing motion by replacing hardcoded durations with shared motion tokens - Auditing or polishing existing transitions so timing, easing, and stagger feel consistent ## Key concepts ### Portable t-* snippets Each of the 27 transitions is namespaced under t-* selectors with semantic CSS custom properties. You paste the snippet, wire the documented HTML hooks, and it works with no framework dependency or demo-specific markup. ### Motion tokens Durations, distances, scale, and easing live in :root custom properties so motion can be tokenized project-wide and tuned in one place rather than as ad-hoc per-element values. ### Match element then verb The skill's decision rules say to identify the UI element first (badge, dropdown, panel, number, icon) and then the action, so the right transition is picked deterministically. ### prefers-reduced-motion guard Every snippet ships a @media (prefers-reduced-motion: reduce) block so motion degrades gracefully for users who ask for less animation. ### transitions-polish add-on A companion skill tunes what already animates — open/close asymmetry, hover-in vs hover-out, stagger offsets, intent delays — against the transitions.dev motion-token scale. ## API reference ``` npx skills add Jakubantalik/transitions.dev ``` Install the transitions-dev agent skill into your project. ``` npx skills add Jakubantalik/transitions.dev ``` ``` npx transitions-pro add <name> ``` Pull a single transition's CSS into your project from the terminal (free tier needs no account). ``` npx transitions-pro add card-resize ``` ``` npx transitions-pro list ``` List every transition available to add. ``` npx transitions-pro list ``` ## Gotchas - Each snippet expects specific HTML hooks — read the per-transition reference before wiring it up - Snippets set semantic custom properties on :root; if you already define matching names, scope them to avoid clashes - Match the transition to the visible element first, then the verb — picking by animation style alone leads to the wrong one - Some Pro transitions require a passwordless browser sign-in via the CLI; the free set does not - transitions-polish refines existing motion — it does not add new transitions on its own --- Generated by SkillMake from https://github.com/Jakubantalik/transitions.dev on 2026-07-23T01:35:18.326Z. Verify against source before relying on details.
File: ~/.claude/skills/transitions-dev/SKILL.md