motion-ui
Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.
npx skills add mturac/everything-openai-codex --skill motion-ui --agent codex
Same command for any agent — swap --agent for claude-code, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# Motion System v4.2 Production-ready UI motion system for React / Next.js. Focused on **performance, accessibility, and usability** — not decoration. ## When to Use Use this motion system when motion: * Guides attention (e.g., onboarding, key actions) * Communicates state (loading, success, error, transitions) * Preserves spatial continuity (layout changes, navigation) ### Appropriate Scenarios * Interactive components (buttons, modals, menus) * State transitions (loading → loaded, open → closed) * Navigation and layout continuity (shared elements, crossfade) ### Considerations * **Accessibility**: Always support reduced motion * **Device adaptation**: Adjust for low-end devices * **Performance trade-offs**: Prefer responsiveness over visual smoothness ### Avoid Using Motion When * It is purely decorative * It reduces usability or clarity * It impacts performance negatively --- ## How It Works ### Core Principle Motion must: * Guide attention * Communicate state * Preserve spatial continuity If it does none → remove it. --- ### Installation ```bash npm install motion ``` --- ### Version * `motion/react` - default for current Motion for React projects (package: `motion`) * `framer-
- When to Use
- Appropriate Scenarios
- Considerations
- Avoid Using Motion When
- How It Works
- Core Principle
- Installation
- Version
- Motion Tokens
- Performance Rules
- Device Adaptation
- Accessibility
- Architecture & Patterns
- Advanced Patterns (Concepts)
npm install motion cat package.json | grep -E '"motion"|"framer-motion"'
What does the motion-ui skill do?
Production-ready UI motion system for React/Next.js. Use when implementing animations, transitions, or motion patterns.
How do I install it?
Run `npx skills add mturac/everything-openai-codex --skill motion-ui --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From mturac/everything-openai-codex, a repository with 84 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.