Agent skill · affaan-m
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.
What it needs
About 5k tokens when loaded.
What this skill does
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. 1. Use motion/react only. Never import from framer-motion. Never mix the two in the same tree. 2. initial must match server output. If the server renders opacity: 1, the initial prop must also be opacity: 1. No exceptions. 3. Reduced motion overrides everything. When useReducedMotion() returns true or prefersReduced is true, all transforms are disabled. Opacity-only fades at ≤ 0.2s are the only permitted fallback. 4. Never animate layout properties. width, height, top, left, margin, padding are banned from animate. Use transform and opacity only. 5. All token values come from motionTokens. Hardcoded durations and easings in component files are forbidden. 6. All spring configs come from the springs map. Inline stiffness/damping values are forbidden. 7. "use client" is required on every file that imports from motion/react. 8. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/motion-foundations--2cd353