Motion Ui
- 1.4k installs
- 238k repo stars
- Updated August 5, 2026
- affaan-m/ecc
This is a copy of motion-ui by affaan-m - installs and ranking accrue to the original listing.
motion-ui is an ECC frontend skill that delivers a consistent, accessible, and performant motion system for developers building React and Next.js interfaces.
About
motion-ui is a skill from affaan-m/ecc in the Everything Claude Code collection that helps teams define a coherent Motion-based animation system for React and Next.js applications. The public readme indicates a Japanese translation is in progress and references the original English SKILL.md for the full motion-ui guidance on accessibility, performance, and reusable transition patterns. Developers reach for motion-ui when adding animations without introducing janky interactions, inconsistent timing, or accessibility regressions across components. motion-ui pairs naturally with motion-advanced when a project needs a solid baseline motion language before layering complex gestures or SVG path effects.
- Production-ready motion primitives focused on guiding attention, communicating state, and preserving spatial continuity
- Built-in support for reduced motion and device adaptation for accessibility and performance
- Clear decision framework: remove any animation that does none of the three core purposes
- Supports both current `motion/react` and legacy `framer-motion` import paths without mixing
- Optimized for interactive components, state transitions, navigation, and layout changes
Motion Ui by the numbers
- 1,444 all-time installs (skills.sh)
- +89 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-uiAdd 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 build an accessible Motion system in React?
Get a consistent, accessible, and performant motion system for React and Next.js interfaces.
Who is it for?
Frontend engineers standardizing Motion animations across React or Next.js component libraries.
Skip if: Projects needing only complex drag-and-drop or SVG path effects without a baseline motion design system.
When should I use this skill?
The user asks for accessible UI animations, consistent Motion transitions, or a performant animation system in React or Next.js.
What you get
Consistent Motion transition patterns, accessible animation defaults, and performant UI motion conventions.
- Reusable Motion transition patterns
- Accessible animation defaults
- Performant UI motion guidelines
Files
motion-ui - 日本語翻訳進行中
このファイルの翻訳は実装中です。英語版は元のスキルファイルを参照してください。
詳細は：D:/tmp/everything-claude-code/skills/motion-ui/SKILL.md
Related skills
Frontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165k
Web Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6k
Lark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16k
Sleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476
Design Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4k
Ui Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112kHow it compares
Start with motion-ui for baseline accessible transitions; escalate to motion-advanced for complex gesture and path animations.
FAQ
What problem does motion-ui solve?
motion-ui helps developers apply a consistent, accessible, and performant Motion animation system across React and Next.js interfaces instead of one-off transition code in every component.
Should I use motion-ui before motion-advanced?
motion-ui is the better starting point for baseline transition standards and accessibility, while motion-advanced fits afterward when drag-and-drop, gestures, or SVG path animation are required.