Motion Foundations

This is the load-first dependency for any animation work in React or Next.js using motion/react. It gives you a complete token system (durations, easings, springs), accessibility hooks that respect prefers-reduced-motion, and SSR-safe patterns that prevent hydration mismatches. The rules are strict: no hardcoded values, no layout property animations, no mixing framer-motion imports. It's opinionated but solves the right problems. If you're building a design system or just tired of animation bugs in production, this creates a solid foundation. The decision tables for picking durations and springs are especially useful when you're staring at a component wondering if it should feel snappy or gentle.

Install to Claude Code

npx -y skills add affaan-m/ecc --skill motion-foundations --agent claude-code