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-designDirection mode), auditing a whole page's UI quality (useui-designAudit mode), or named text-effect specs (use the externalanimate-textskill 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 |