SkillFoxx

Transitions.dev skill

A skill of ready CSS transitions for web interfaces: modals, dropdowns, toasts, loaders and dozens of other animations with matching rules

  • 6,283 ★ on the repository
  • Last commit
Skill

Minimal access

Why this level

  • The skill consists of instructions and CSS snippets
  • The CLI and the Refine tool additionally write files into the project and reach a service for Pro recipes
All reasons and checks

jakubantalik/transitions.devAuthor:Jakub Antalik

Install

Manual install

npx skills add Jakubantalik/transitions.dev

Installs the transitions skill into the agent's skills directory.

Access and checks

How we review

Minimal accessThe tool runs nothing and makes no network calls.

  • The skill consists of instructions and CSS snippets
  • The CLI and the Refine tool additionally write files into the project and reach a service for Pro recipes

This is third-party code. Review the repository files before installing.

What it does

The skill gives the agent a collection of portable CSS transitions, each scoped under t- classes with semantic CSS custom properties and shipped with a prefers-reduced-motion guard. The description holds matching rules: from the visible element and the action the agent picks the right transition, for example a dropdown menu, a modal, a panel reveal, an icon swap or a field shake on error. There are commands to list the catalog, review a project and suggest where transitions fit, apply one transition to an element, and replace ad-hoc animation with shared motion tokens. The same set installs through a CLI that pulls the needed CSS into the project, and the Refine tool adds a live panel for tuning animations on a running app.

Who it is for. For frontend developers and designers who want tidy interface transitions without building animations from scratch.

Good fit when

  • You need to add a smooth transition to a modal, dropdown or toast
  • You need to pick an animation for an element by clear rules rather than by feel
  • You need to fold ad-hoc durations and easings into shared motion tokens

Not a fit when

  • You need complex JavaScript-library animation rather than portable CSS
  • The project already has its own motion system and outside tokens are unwanted

Example request

Make the modal open smoothly and pick a transition for it from transitions.dev

Limitations

The transitions are CSS snippets; some need the documented HTML hooks wired up, and a few need JavaScript orchestration. Part of the set is marked Pro and unlocks after a browser sign-in to a Transitions Pro account, while the free set works without an account. The CLI and the Refine tool install from npm, Pro recipes are fetched from the api.transitions.dev service, and installed transitions fall under the site's own license while the CLI code is MIT.

How to disable. Remove the skill folder from the agent's skills directory, for example transitions-dev or transitions-pro from ~/.claude/skills/. If you added the Refine live panel, remove it with npx transitions-refine stop.

FAQ

Are all transitions free?

Part of the set is free and works without an account. Some are marked Pro and unlock after a browser sign-in to a Transitions Pro account.

How does the agent pick a transition?

By the matching rules in SKILL.md: first by the visible element, then by the action, and when several fit it takes the lighter option.

Discussion

No questions or reviews yet.

Skills

A skill gives an agent modern CSS techniques: one declaration instead of piles of breakpoints, and a CSS feature before a script.

SkillMinimal access403

Skills for design engineers: quick UI cleanup, accessibility, metadata and animation performance fixes

SkillMinimal access11K

Make interfaces feel better

make-interfaces-feel-better

A skill about the small interface details: animations, typography, icons, shadows, radii, optical alignment and hit areas

SkillMinimal access4K15

A skill that edits UI inside live code with no extra dependencies: components, sections, pages and RTL with Arabic for your stack

SkillExtended access121

A motion design skill for agents: timing, easing, choreography and Disney animation principles applied to UI

SkillMinimal access3K

A UI, presentation and graphics design skill for coding agents: canvas drafts driven through the superdesign CLI

SkillExtended access982

README in short

The README describes Transitions.dev as a collection of reusable CSS transitions with an interactive site and copy-ready snippets. There are three ways to use it: a CLI that pulls a transition into the project with npx transitions-dev add, an installable agent skill via npx skills add, and the Refine tool that injects a live panel and a local relay to align animations with motion tokens. The skill is generated from index.html so the snippets match the showcase. Free transitions work without an account, Pro unlocks by a browser sign-in. The CLI code is MIT licensed.

README badge

Original SKILL.md

---
name: transitions-dev
description: Production-ready CSS transitions for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swaps, icon swaps, success checks, avatar group hovers, error state shakes, search/input clear, skeleton loaders, shimmer text, sliding tabs, tooltips, staggered text reveals, card hover tilt, plus-to-menu morph, accordions, toasts, like buttons, learn-more hovers, checkbox checks, spinning counters, toggles, AI thinking states, reasoning streams, streaming text, matrix dot loaders, or banner stacking. Triggers on "add a transition", "animate the dropdown", "make the modal open smoothly", "swap icon", "page slide", "stagger animation", and the commands transitions reveal, transitions review, transitions apply, transitions refine.
---

# Transitions.dev

Thirty-two portable CSS transitions, each namespaced under `t-*` selectors with semantic CSS custom properties. Drop-in: paste the snippet, wire the documented HTML hooks, done. No framework dependencies, no demo-specific markup, and every snippet ships a `prefers-reduced-motion` guard.

## Quick reference

| Transition | When to use | Reference |
| --- | --- | --- |
| **Card resize** | Tween a container's width or height when its layout state changes. | 01-card-resize.md |
| **Menu dropdown** | Open an origin-aware dropdown that grows from its trigger. | 05-menu-dropdown.md |
| **Modal open / close** | Scale-up modal dialog with a softer scale-down on close. | 06-modal.md |

Report a problem