🎬 animate — Motion & UI Animation

Build motion that would survive a strict design-engineering review, on the first pass. The skill is a router + build sequence: decide whether to animate, why, which tool, then write correct code with defensible easing and timing.

Three principles govern everything:

1. The correct answer is sometimes zero animation. An action fired 100×/day (keyboard shortcut, command palette, toggle) should not animate at all. Saying "this shouldn't move" is success, not a dodge.
2. Cheapest tool that works. Don't install a motion library for a fade; don't hand-roll a drawer that should be a component.
3. Animate only transform and opacity (plus sanctioned clip-path, and height for accordions). These skip layout and paint and run on the GPU.
4. Use what's already there. If the project already depends on a motion library (Motion, GSAP, Anime.js, Lenis, Reanimated, Three.js, …), build on it before introducing a new dependency — a new library is justified only when the present one can't express the motion. Extend existing --ease-* / --duration-* design tokens, never fork them.

Modes

Every invocation resolves to one of nine modes. Route on the verb, not the noun: