Framer Motion Best Practices

A comprehensive performance optimization guide for Framer Motion with 42 rules across 9 categories, from bundle size reduction to exit animations. You'll want this when writing or refactoring React animations to avoid common pitfalls like unnecessary re-renders and bloated bundles. The priority system is genuinely helpful, starting with critical issues like using LazyMotion instead of the full motion import and leveraging useMotionValue to prevent re-renders, then working down to nice-to-haves like SVG morphing techniques. Each rule links to its own reference file with examples. It's clearly built from real-world optimization work, and the categorization by performance impact makes it easy to focus on what actually matters when your animations are janky or your bundle is huge.

Install to Claude Code

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