Individual skill

micro-interaction

This skill should be used when the user asks to "add a hover/press effect", "animate a toggle or switch", "build an animated like button", "make a toast/snackbar slide in", "animate a drawer or modal", "animate list reordering or add/remove", "do a shared-element layout transition", or "polish UI feedback". Covers UI motion with Framer Motion (motion/react) and modern CSS.

skills/micro-interaction/SKILL.md

Read pinned source

Source commit b6dba3eb759726845a44163ff0bad70dd9e7fbb6

What was checked

Matches the observed repository HEAD: Yes
Scanner rules are current: Yes
Repository scan complete: No
Skill scan complete: No
Observed behavior: Local scripts
Last checked: Nov 11, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.

Repository context

Repository stars (not skill ratings): 88
Repository last updated: Jun 22, 2026
License: MIT

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

accessibility Repository topic
claude-skill Repository topic
css-animation Repository topic
gsap Repository topic
lottie Repository topic
micro-interactions Repository topic
page-transitions Repository topic
svg-animation Repository topic
web-animation Repository topic
design Derived category
engineering Derived category
design-interface Derived category
engineering-web Derived category

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files

README.mddoc · 0 bytes
SKILL.mdcore · 8,634 bytes
SKILL.mdcore · 8,634 bytes
SKILL.mdcore · 8,634 bytes
SKILL.mdcore · 8,634 bytes
SKILL.mdcore · 8,634 bytes
references/css-recipes.mddoc · 4,917 bytes
references/framer-motion-recipes.mddoc · 5,950 bytes

Read excerpt


# Micro-interactions (UI Motion)

Small, functional motion that makes an interface feel responsive and alive: hover/press/focus feedback, toggles, toasts, drawers, and list/layout animation. The goal is feedback and continuity, not decoration.

## When to use

- Hover/press/focus feedback; toggles, checkboxes, like/heart buttons
- Toasts/snackbars, drawers, modals, tooltips, accordions (enter/exit)
- List add/remove/reorder; shared-element ("magic move") layout transitions
- Loading → success → error state transitions

## Principles (apply to all of it)

- Duration: UI micro-interactions live in **100–250ms**. Anything over ~400ms feels laggy for a click response.