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.
npx skills add mturac/everything-openai-codex --skill motion-foundations --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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` o
- When to Activate
- Outputs
- Principles
- Rules
- Decision Guidance
- Choosing a duration
- Choosing a spring
- When to disable animation entirely
- Core Concepts
- Token system
- Runtime flags
- Accessibility
- SSR / hydration safety
- Code Examples
What does the motion-foundations skill do?
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.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill motion-foundations --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.