Motion Ui

A comprehensive motion system built on Motion/Framer Motion that prioritizes performance and accessibility over decoration. It includes ready-to-use motion tokens (durations, easing curves, distances), device adaptation logic that checks CPU cores and memory, and proper reduced motion support through hooks and CSS. The guidance is opinionated in useful ways: it explicitly warns against mixing motion and framer-motion imports (breaks AnimatePresence), explains when to avoid the layout prop on large containers (causes jank), and mandates specifying AnimatePresence mode instead of relying on the overlap-prone default. Covers the full stack from basic fade-ins to focus traps and scroll locks for modals. Use this when you need production-grade animations without reinventing accessibility and performance patterns.

Install to Claude Code

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