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.
Security Assessment
About motion-foundations
motion-foundations is the base layer of a React/Next.js motion system built on the motion/react library. It solves the problem of inconsistent, inaccessible, or performance-harming animation by defining a single source of truth for tokens, spring presets, and the rules every animated component must follow. Downstream skills (motion-patterns, motion-advanced) inherit from it, and the guidance instructs loading it before any animation work begins.
The skill produces a shared motionTokens object (duration, easing, distance, scale), a springs preset map of five named configs (snappy, gentle, bouncy, instant, release), a shouldAnimate() gate, accessibility defaults via useReducedMotion, and SSR-safe initial states that avoid hydration warnings. It codifies non-negotiable rules: use motion/react only (never framer-motion), match initial props to server output, let reduced-motion override everything, never animate layout properties (only transform and opacity), source all values from tokens, add "use client" where required, and always guard window/navigator access with typeof checks. Decision tables help pick durations and springs, and runtime flags detect low-end devices and reduced-motion preferences.
Target users are front-end engineers building animated components in Next.js who care about accessibility, hydration correctness, and 60fps performance. Use cases include establishing a design-system motion token layer, implementing prefers-reduced-motion support, debugging hydration mismatches from animation initial states, and gating decorative animations on device capability.
FAQ
What library does this skill require?
It mandates motion/react. Importing from framer-motion or mixing the two in the same tree is explicitly forbidden.
How does it handle accessibility?
prefers-reduced-motion has the highest priority: it disables all transforms and limits opacity transitions to 0.2s or less. It exposes useReducedMotion and a useSafeMotion hook to build compliant initial/animate/exit states.
How does it avoid SSR hydration mismatches?
The rule is that the initial prop must match what the server renders. It recommends deferring to client mount (mounted state via useEffect) or using AnimatePresence rather than setting a mismatched initial opacity.
Why can't I animate width or height?
Layout properties (width, height, top, left, margin, padding) are banned from animate for performance reasons; the skill requires using transform and opacity instead.
When should animation be disabled entirely?
shouldAnimate() returns false when reduced motion is preferred, on low-end devices for non-essential animation, when the element will never enter the viewport, or when the animation is purely decorative with no UX purpose.
Install motion-foundations
Quick Setup:
- Copy the skill folder to
.claude/skills/ - Claude will automatically detect and use the skill
Repository
affaan-m/everything-claude-code