Motion Ui

A production-ready motion system for React and Next.js that prioritizes performance and accessibility over decoration. Built on Motion/Framer Motion with opinionated tokens for duration, easing, and distance. Handles the common stuff well: modals with focus traps and scroll lock, AnimatePresence modes that actually make sense (wait for modals, popLayout for lists), reduced motion support baked in, and device adaptation for low-end hardware. The guidance on when not to animate is more useful than the animation patterns themselves. Includes a hard rule about never mixing motion/react and framer-motion imports in the same project because it breaks AnimatePresence coordination. Good for teams that want consistent motion without reinventing the patterns every time.

Install to Claude Code

npx -y skills add affaan-m/ecc --skill motion-ui --agent claude-code