ui-animation

Installation
SKILL.md

UI Animation

  • IS: designing, implementing, reviewing, debugging UI motion (springs, gestures, drag, easing, CSS transitions, keyframes, framer-motion), sweeping an interface for the moments that would genuinely benefit from motion, measuring motion from a recording (extract frames, track, fit curves) to emit code plus a handoff spec, and naming a described motion effect (reverse-lookup vocabulary).
  • IS NOT: choosing overall visual direction, palettes, or typography (use ui-design Direction mode), auditing a whole page's UI quality (use ui-design Audit mode), or named text-effect specs (use the external animate-text skill where installed).

product-design, ui-design, or ui-animation?

An interface is a set of states and the passages between them. That decomposition assigns the work.

The question is about Use
Which states exist, what an action affects, whether it is reversible product-design
What a state looks like once built: markup, type, colour, layout, hierarchy ui-design
The passage between two states: timing, easing, springs, gesture physics this skill
Installs
8.3K
GitHub Stars
78
First Seen
Jan 30, 2026
ui-animation — mblode/agent-skills