Motion Patterns
- 2.3k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/everything-claude-code
motion-patterns provides reusable Framer Motion animation recipes for React UIs from the ECC skill family.
About
The motion-patterns skill from everything-claude-code teaches reusable Framer Motion (Motion) animation patterns for React applications. The published catalog SKILL.md is a Japanese translation stub referencing the upstream ECC motion-patterns source, but the intended skill covers pattern libraries for enter/exit transitions, staggered lists, layoutId shared element transitions, gesture-driven interactions, and spring-based motion tuned for GPU-friendly transform and opacity animations. Agents guide users away from layout-thrashing width/height animations toward x, y, scale, rotate, and opacity with will-change hints, useMemo variants, and AnimatePresence mount cycles. Use when users reference motion-patterns, need animation recipes, or want Motion/React motion UX patterns beyond basic fades.
- Reusable Motion animation patterns for React enter/exit and list stagger.
- layoutId shared element transitions and spring-based natural motion.
- Performance guidance: transform and opacity over layout properties.
- Variants, AnimatePresence, and memoized animation configs.
- Upstream ECC motion-patterns source when catalog doc is translation stub.
Motion Patterns by the numbers
- 2,264 all-time installs (skills.sh)
- +220 installs in the week ending Aug 5, 2026 (Skillselion tracking)
- Ranked #212 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-patterns capabilities & compatibility
- Capabilities
- animation pattern recipes · spring and variant configs · shared element transitions · performance safe transforms · animatepresence patterns
- Use cases
- frontend · ui design
npx skills add https://github.com/affaan-m/everything-claude-code --skill motion-patternsAdd 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 ↗ |
What Motion animation patterns should I use for lists, transitions, and shared elements?
Apply reusable Framer Motion animation patterns for React UIs including variants, layout transitions, springs, and performance-safe transforms.
Who is it for?
Frontend developers adding polished Motion animations beyond basic fades.
Skip if: Motion library install basics only (use motion-foundations first).
When should I use this skill?
User mentions motion-patterns, Framer Motion recipes, or staggered list animations.
What you get
Performance-safe Motion variants, springs, and layout patterns ready to drop into React components.
- animated React components
- page transition configuration
By the numbers
- Version 1.0 skill covering 8 UI animation pattern categories
- Tags: motion, animation, ui-patterns
Files
motion-patterns - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/motion-patterns/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 Patterns has 1 known copy in the catalog totaling 1.4k installs. They canonicalize to this original listing.
- affaan-m - 1.4k installs
How it compares
Use for opinionated React/Next.js snippets; reach for motion-foundations when defining the underlying token system first.
FAQ
Why is the catalog SKILL.md a stub?
The published file is a Japanese translation placeholder pointing to the upstream ECC motion-patterns skill.
Which properties should be animated for performance?
Prefer transform (x, y, scale, rotate) and opacity over width, height, or layout properties.
How are list animations handled?
Use staggerChildren in parent variants with AnimatePresence for mount and exit cycles.
Is Motion Patterns safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.