Motion Foundations
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of motion-foundations by affaan-m - installs and ranking accrue to the original listing.
motion-foundations is an agent skill from ECC that establishes consistent, performant, and accessible animation foundations in React or Next.js projects before developers adopt motion libraries.
About
motion-foundations is an Everything Claude Code (ECC) skill for setting animation baselines in React and Next.js apps. It guides developers to define performant, accessible motion patterns before importing animation libraries, reducing jank and a11y regressions. Teams reach for motion-foundations when starting UI motion work or standardizing transitions across components. The published readme notes Japanese translation is in progress; the English skill file in the ECC repository holds the full motion guidance referenced by the stub.
- Defines shared motionTokens object for duration, easing, distance and scale
- Provides 5 named spring preset configurations
- Implements shouldAnimate() gate and useReducedMotion hook for accessibility
- Delivers SSR-safe initial states that eliminate hydration warnings
- Enforces 3 core principles: guide attention, communicate state, preserve spatial continuity
Motion Foundations by the numbers
- 1,433 all-time installs (skills.sh)
- +91 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/affaan-m/ecc --skill motion-foundationsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.4k |
|---|---|
| repo stars | ★ 238k |
| Last updated | August 5, 2026 |
| Repository | affaan-m/ecc ↗ |
How do you set animation foundations in React apps?
Establish consistent, performant, and accessible animation foundations before using any motion libraries in a React or Next.js project.
Who is it for?
Frontend engineers introducing motion to React or Next.js who need accessibility and performance guardrails first.
Skip if: Projects already standardized on a motion library without needing foundational animation policy.
When should I use this skill?
User adds animations to React/Next.js, asks about motion performance, or needs accessible transition patterns before picking a library.
What you get
Motion guidelines, accessible transition patterns, and performance-ready animation conventions for React or Next.js
- motion guidelines
- animation conventions
Files
motion-foundations - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/motion-foundations/SKILL.md
Related skills
Vercel React Best PracticesAutomatically apply Vercel’s official React and Next.js performance rules during code generation and review.587k29.6kVercel Composition PatternsGenerate and refactor React components that stay maintainable as complexity grows without boolean prop explosion.267k29.6k
ShadcnAdd, compose, search, fix, and style production-grade React components directly from source without leaving their editor.257k120k
Develop UserscriptsCorrectly write, debug, and package userscripts for Tampermonkey and ScriptCat with proper metadata, GM APIs, and runtime decisions.224k72
Minimalist UiGenerate clean, editorial-style web interfaces with warm monochrome palettes, typographic hierarchy, bento grids and flat components that feel premium and utilita212k69.4kImage To CodeConvert high-fidelity design images into production-ready, visually accurate frontend code that avoids generic AI design pitfalls.177k69.4kFAQ
What frameworks does motion-foundations target?
motion-foundations targets React and Next.js projects. It establishes performant, accessible animation conventions before teams adopt specific motion libraries in component code.
When should motion-foundations run?
motion-foundations runs before adding motion libraries to a React or Next.js codebase. Use it when defining transition standards, performance budgets, and accessibility rules for UI animation.