Motion

Design and implement UI motion that feels intentional, not decorative. This skill covers the full stack: animation tokens, CSS transitions, Framer Motion, spring physics, choreography, and performance. Reduced motion is treated as a requirement from the start.

See reference files for deep dives:

• references/decision-tree.md — CSS vs Framer Motion vs GSAP: when to use what
• references/tokens.md — motion token system (duration, easing, spring values)
• references/framer-motion.md — patterns, variants, layout animation, choreography
• references/performance.md — what triggers layout/paint/composite, what to avoid
• references/principles.md — 12 animation principles applied to UI

Triggers

• "animation" / "motion" / "transition" / "animate"
• "micro-interaction" / "hover effect" / "spring"
• "page transition" / "stagger" / "choreography"
• "framer motion" / "/motion"