motion-foundations

Standardize motion design tokens and animation constraints for React and Next.js applications.

5|Updated Jan 20, 2026

Search Tags:#performance #accessibility #react #nextjs #animation #motion

Ready to run

npx skills add https://github.com/mohamedgshoaib/reway --skill motion-foundations

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: motion-foundations
Source: https://github.com/mohamedgshoaib/reway/tree/main/.agents/skills/motion-foundations
Command: npx skills add https://github.com/mohamedgshoaib/reway --skill motion-foundations

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the fragmentation of animation logic in React/Next.js applications by providing a centralized, type-safe, and accessibility-first foundation for all motion-related development.

Core Features & Use Cases

Tokenized Motion: Provides a unified system for durations, easing curves, and spring physics to ensure visual consistency across the entire product.
Accessibility Enforcement: Automatically handles prefers-reduced-motion preferences and low-end device detection to ensure smooth, inclusive user experiences.
SSR Safety: Prevents common hydration mismatches by enforcing strict initial state synchronization between server and client.

Quick Start

Use the motion-foundations skill to initialize the motion tokens and accessibility hooks in your new component.

Frequently Asked Questions about motion-foundations

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I standardize animation tokens and spring physics in a React application?▼

You can standardize animation tokens and spring physics in React by applying a centralized motion foundation that provides unified duration presets, easing curves, and accessibility constraints. This ensures visual consistency across your product's UI components.

Why do my Next.js animations cause SSR hydration mismatches and how do I prevent them?▼

SSR hydration mismatches in Next.js animations are prevented by enforcing strict initial state synchronization between server and client. A dedicated motion foundation handles this safety automatically to prevent common hydration errors.

How do I enforce prefers-reduced-motion accessibility in React animation components?▼

To enforce prefers-reduced-motion accessibility in React, use an accessibility-first motion foundation that automatically handles user preferences. This ensures inclusive experiences by disabling or adjusting transitions for users who request reduced motion.

Can I use motion tokens for hardware-aware performance gating in Next.js?▼

Yes, you can use motion tokens for hardware-aware performance gating in Next.js. The system applies low-end device detection to adjust animation constraints, ensuring smooth transitions and inclusive performance across varying hardware capabilities.

What is the best way to manage consistent duration presets and easing curves across a React UI?▼

The best way to manage consistent duration presets and easing curves across a React UI is through a tokenized motion system. This provides a unified, type-safe foundation that eliminates animation logic fragmentation and ensures visual consistency.