Framer Motion

This is a comprehensive performance optimization guide for Framer Motion with 42 rules across 9 categories, from bundle size reduction to animation property selection. It prioritizes the highest impact optimizations first: bundle splitting with LazyMotion and preventing re-renders with useMotionValue and useTransform. You'd reach for this when adding animations to a React app, optimizing layout transitions, or building scroll-linked effects. The categorization by priority (critical, high, medium) is genuinely useful because it tells you what actually matters versus what's nice to have. Each rule links to detailed examples, so it's built for reference during code reviews or refactoring sessions, not just reading once and forgetting.

Install to Claude Code

npx -y skills add pproenca/dot-skills --skill framer-motion --agent claude-code