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.
- Kind
- Skill
- Works with
- Claude Code, Codex
- Languages
- TypeScript / JavaScript
- Source
- affaan-m/ECC @ d3b8a3e90890
- Path
- skills/motion-foundations/SKILL.md
- License
- MIT
- Jobs
- UI/UX work, Guardrails
InstallCopy it from the source repository, or sign in and let the assistant adapt it for your project.
# Motion Foundations The base layer of the motion system. Defines every value, constraint, and rule that downstream skills (`motion-patterns`, `motion-advanced`) inherit. Load this skill before any animation work begins. ## When to Activate - Starting any animated component from scratch - Setting up tokens, spring presets, or easing values - Implementing `prefers-reduced-motion` support - Debugging hydration mismatches from animation initial states - Evaluating whether an animation should exist at all ## Outputs This skill produces: - A shared `motionTokens` object (duration, easing, distance, scale) - A shared `springs` preset map (5 named configs) - A `shouldAnimate()` gate used by all components - Accessibility-compliant animation defaults via `useReducedMotion` - SSR-safe initial states with zero hydration warnings ## Principles Motion must do at least one of the following or it must be removed: - Guide attention - Communicate state - Preserve spatial continuity Responsiveness always outranks smoothness. A 60 fps animation that causes input delay is worse than no animation. ## Rules These are non-negotiable. They apply to every component in the system. …