Motion Patterns
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of motion-patterns by affaan-m - installs and ranking accrue to the original listing.
motion-patterns is a frontend skill that provides production-ready, accessible animation patterns for React and Next.js components without reinventing durations, springs, or easing curves.
About
motion-patterns is a Claude Code skill from affaan-m/ecc (Everything Claude Code) that delivers reusable animation patterns for React and Next.js interfaces. The skill covers accessible motion defaults—durations, spring configurations, and easing functions—so developers avoid inconsistent or performance-heavy custom animations. Developers reach for motion-patterns when building dashboards, marketing pages, or interactive components that need polished enter, exit, and layout transitions aligned with modern motion libraries. The published readme notes Japanese translation is in progress, but the skill origin and description target English-language React and Next.js animation workflows with accessibility considerations baked in.
- Copy-paste patterns for buttons, modals, toasts, stagger lists, page transitions, scroll reveals and layout animations
- All patterns built on motion-foundations tokens and springs — no raw numbers or duplicated values
- Every conditional render wrapped in AnimatePresence with correct key and exit behavior
- SSR-safe and accessible animation components ready for Next.js App Router
- Includes scroll-linked progress, sticky sections, expanding cards and shared-element transitions
Motion Patterns by the numbers
- 1,433 all-time installs (skills.sh)
- +96 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-patternsAdd 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 ↗ |
What animation patterns work for React components?
Get production-ready, accessible animation patterns for React and Next.js components without reinventing durations, springs or easing.
Who is it for?
React and Next.js frontend developers adding accessible motion to components who want tested patterns instead of ad-hoc animation values.
Skip if: Teams building static pages with no animation requirements or projects outside React and Next.js component architectures.
When should I use this skill?
User asks for React animation patterns, motion library presets, or accessible transition defaults for Next.js components.
What you get
Reusable motion presets with accessible durations, springs, and easing for React and Next.js UI components
- Reusable animation pattern snippets
- Duration and easing presets for components
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.4kHow it compares
Pick this over generic CSS animation snippets when building React or Next.js components that need consistent, accessible motion presets.
FAQ
What frameworks does motion-patterns target?
motion-patterns targets React and Next.js component animation. The skill supplies production-ready duration, spring, and easing patterns so developers add accessible motion without defining timing values from scratch.
Does motion-patterns cover accessibility for animations?
motion-patterns emphasizes accessible animation defaults for React and Next.js interfaces. Patterns aim to reduce motion that harms readability or excludes users who prefer reduced motion settings.