Skills
.Work. You
Rest

transitions-dev

Community

Portable CSS transitions for polished UI.

Design & Creative#a11y#css#transitions#web#snippets#ui-animation
AuthorJakubantalik
Version1.0.0
Installs0

System Documentation

What problem does it solve?

Reduces the time and risk of implementing consistent UI motion by offering a library of ready-to-use, production-grade CSS transitions that cover common interactions.

Core Features & Use Cases

  • Eighteen transitions covering common UI interactions (card resize, number pop-in, notification badge, text states swap, menu dropdown, modal open/close, panel reveal, page side-by-side, icon swap, success check, avatar group hover, error state shake, input clear with dissolve, skeleton reveal, shimmer text, tabs sliding, tooltips, and texts reveal).
  • Copy-ready snippets use semantic CSS custom properties and a unifying :root token set; includes a built-in prefers-reduced-motion guard and per-transition reference files for reliable re-use.
  • Easy integration with or without a framework: paste the snippet, wire the documented HTML hooks, and apply state without demo markup coupling.

Quick Start

Copy the snippet, paste into your stylesheet, wire the documented HTML hooks, and you’re ready to go.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: transitions-dev
Download link: https://github.com/Jakubantalik/transitions.dev/archive/main.zip#transitions-dev

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.