Motion Advanced
- 2.2k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/everything-claude-code
motion-advanced applies advanced Motion library animation patterns with performance and accessibility guardrails.
About
The motion-advanced skill from everything-claude-code covers advanced Motion library techniques for web interfaces beyond basic fades and slides. The catalog SKILL.md is a Japanese translation stub referencing upstream ECC, but the skill intent guides agents through layout animations, shared element transitions, staggered children, scroll-linked motion, drag and gesture handlers, spring tuning, reduced-motion accessibility, and avoiding layout thrash on large lists. Use when polishing interactive dashboards, marketing pages, or component libraries that need choreographed enter-exit sequences without jank. Agents should profile animation cost, respect prefers-reduced-motion, and keep transforms GPU-friendly. Pair with frontend-design skills when motion must reinforce a committed visual identity rather than generic transitions.
- Covers advanced Motion layout, gesture, and orchestrated transition patterns.
- Tunes springs, stagger, and scroll-linked animations with performance guardrails.
- Respects prefers-reduced-motion and GPU-friendly transform usage.
- Targets choreographed UI polish beyond basic fade and slide presets.
- Pairs with design-spec skills when motion reinforces brand identity.
Motion Advanced by the numbers
- 2,247 all-time installs (skills.sh)
- +247 installs in the week ending Aug 4, 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-advanced capabilities & compatibility
- Capabilities
- layout transitions · gesture physics · stagger orchestration · reduced motion support
- Use cases
- frontend · ui design
What motion-advanced says it does
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
motion-advanced - 日本語翻訳進行中
npx skills add https://github.com/affaan-m/everything-claude-code --skill motion-advancedAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 2.2k |
|---|---|
| repo stars | ★ 238k |
| Security audit | 3 / 3 scanners passed |
| Last updated | August 5, 2026 |
| Repository | affaan-m/everything-claude-code ↗ |
How do I implement polished layout and gesture animations without jank or accessibility issues?
Apply advanced Motion (Framer Motion) patterns for orchestrated UI animations, layout transitions, gesture physics, and performance-safe motion systems.
Who is it for?
Frontend work needing choreographed Motion transitions beyond basic presets.
Skip if: Backend services or static pages without interactive animation requirements.
When should I use this skill?
User mentions Motion, Framer Motion advanced patterns, or layout transition polish.
What you get
Motion patterns with tuned springs, stagger, reduced-motion support, and performance-safe transforms.
- Framer Motion component patterns
- custom animation hooks
- gesture-driven UI code
By the numbers
- Published as version 1.0 in skill frontmatter
- Frontmatter tags list 5 topics: motion, animation, advanced, gestures, svg
Files
motion-advanced - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/motion-advanced/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 Advanced 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
Reach for motion-advanced after motion-foundations when interactions need gestures, SVG paths, or useAnimate—not basic layout transitions.
FAQ
Is the catalog SKILL.md complete?
It is a Japanese stub pointing to the upstream ECC motion-advanced skill file.
Does it cover accessibility?
Yes. Respect prefers-reduced-motion and avoid layout thrash on large lists.
When should springs be tuned?
When choreographing enter-exit sequences, gestures, or scroll-linked motion on dense UIs.
Is Motion Advanced safe to install?
skills.sh reports 3 of 3 security scanners passed. Review the Security Audits panel on this page before installing in production.