routr-motion

name	routr-motion
description	Add or polish animations (Framer Motion, scroll, transitions). Use when: animate, motion, micro-interactions on UI that already exists. Not for: building new pages or components (→ routr-frontend).

routr-motion

Goal: intentional, performant, accessible motion.

When to activate

• Animate, motion, micro-interactions on UI that already exists

Do not activate

• Building new pages or components → routr-frontend

Iron law

useReducedMotion() is mandatory — no animation ships without a reduced-motion guard.

0. Bootstrap

See routr-catalog/references/skill-registry.md:

Skill	When
framer-motion-animator	React + Framer Motion
review-animations	Pre-ship critique
motion-design	Staging principles
ui-animation	CSS motion
frontend-design	Motion serves page thesis
find-docs	Motion.dev API version

1. Audit

What moves? Entry triggers? prefers-reduced-motion upfront.

2. Implement

useReducedMotion() mandatory. Stagger; one focal animation per viewport.

3. Review pass

review-animations — purpose, jank, mobile, reduced motion.

Output format

## Motion report
**What moves / entry triggers:** …
**Reduced-motion guard:** yes/no
**Review pass:** purpose, jank, mobile checked

Handoff

• Page from scratch → routr-frontend first
• Jank debug → routr-debug

References

• boundaries

Anti-patterns

• Parallax everywhere
• No reduced-motion guard
• Copy-paste snippets without purpose