motion-foundations
Motion tokens, spring presets, performance rules, device adaptation, accessibility enforcement, and SSR safety for React / Next.js using motion/react. Foundation layer — all other motion skills depend on this. Use when setting up motion tokens, spring presets, reduced-motion handling, or SSR-safe animation in React or Next.js.
- installs 8w
- 1,581
- 30-day movement
- starts with the next reading
- Related entries
- 3
- Connections
- 0
A SKILL.md skill that gives AI coding agents a foundation layer for motion in React/Next.js apps using motion/react. It defines motion tokens, spring presets, performance and device-adaptation rules, accessibility (prefers-reduced-motion) enforcement, and SSR/hydration-safety rules that downstream motion skills inherit.
Reach for it when you need a consistent, rule-governed base for animation tokens, reduced-motion handling, or SSR-safe motion before building any animated component.
Use it to
- Set up motion tokens and spring presets from scratch
- Implement prefers-reduced-motion support
- Ensure initial states match server rendering for hydration safety
- Decide when to disable animation entirely
- Avoid documented anti-patterns in motion usage
For React/Next.js developers adding motion via AI agents
- Host repository
- affaan-m/ECC
- Category
- frontend
- Version
- 1.0.0
- Installs, lifetime
- 2,900
- Installs, 8 weeks
- 1,581
- Host stars
- 261k
- Host language
- JavaScript