Motion Foundations
- 2.3k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/everything-claude-code
motion-foundations teaches Framer Motion basics for React before advanced animation patterns.
About
The motion-foundations skill from everything-claude-code introduces Framer Motion (Motion) basics for React UIs. The catalog SKILL.md is a Japanese translation stub pointing to the upstream ECC motion-foundations source, but the intended curriculum covers installing Motion, motion component syntax, animate and initial props, transition timing, AnimatePresence mount/unmount cycles, and foundational transform versus layout property guidance before advanced motion-patterns recipes. Agents teach GPU-friendly opacity and transform animations, when to reach for springs, and how to structure simple enter/exit effects without layout thrash. Pair with motion-patterns for reusable animation recipes after foundations. Use when users need Motion getting started, animation basics, or ECC motion-foundations onboarding.
- Motion library fundamentals before advanced motion-patterns recipes.
- motion components with animate, initial, and transition props.
- AnimatePresence for mount and unmount enter/exit animations.
- Transform and opacity first; avoid layout property animation early.
- Japanese stub doc references upstream ECC motion-foundations skill.
Motion Foundations by the numbers
- 2,255 all-time installs (skills.sh)
- +221 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #214 of 2,245 Frontend Development skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Aug 5, 2026 (Skillselion catalog sync)
motion-foundations capabilities & compatibility
- Capabilities
- motion component basics · transition configuration · animatepresence cycles · performance primer · foundation before patterns
- Use cases
- frontend · ui design
npx skills add https://github.com/affaan-m/everything-claude-code --skill motion-foundationsAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 2.3k |
|---|---|
| repo stars | ★ 238k |
| Security audit | 3 / 3 scanners passed |
| Last updated | August 5, 2026 |
| Repository | affaan-m/everything-claude-code ↗ |
How do I get started with Framer Motion animations in React?
Learn Framer Motion fundamentals for React including motion components, basic props, AnimatePresence, and performance-safe animation basics.
Who is it for?
Developers new to Motion who need fundamentals before complex patterns.
Skip if: Advanced staggered layoutId recipes (use motion-patterns after foundations).
When should I use this skill?
User mentions motion-foundations, Motion basics, or Framer Motion getting started.
What you get
Basic motion components with safe transitions and AnimatePresence enter/exit cycles.
- Motion token definitions
- Animation constraint rules
By the numbers
- Version 1.0 in everything-claude-code motion skill manifest
- Base layer for 2 downstream skills: motion-patterns and motion-advanced
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.4kForks & variants (1)
Motion Foundations has 1 known copy in the catalog totaling 1.4k installs. They canonicalize to this original listing.
- affaan-m - 1.4k installs
FAQ
Why is the published SKILL.md a stub?
The catalog ships a Japanese translation placeholder referencing upstream ECC motion-foundations.
What should beginners animate first?
Opacity and transform properties rather than width, height, or layout-triggering values.
What skill comes next?
Use motion-patterns for reusable animation recipes after mastering foundations.
Is Motion Foundations safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.