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 copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 6
skills.sh installs: 1.2K
GitHub stars: 222
last updated: Aug 21, 2026

View on GitHub

Install

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

Installs into .claude/skills of the current project.

Files

Community Framer Motion Best Practices

Comprehensive performance optimization guide for Framer Motion animations in React applications. Contains 42 rules across 9 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

Adding animations to React components with Framer Motion
Optimizing bundle size for animation-heavy applications
Preventing unnecessary re-renders during animations
Implementing layout transitions or shared element animations
Building scroll-linked or gesture-based interactions

Rule Categories by Priority

Priority	Category	Impact	Prefix
1	Bundle Optimization	CRITICAL	`bundle-`
2	Re-render Prevention	CRITICAL	`rerender-`
3	Animation Properties	HIGH	`anim-`
4	Layout Animations	HIGH	`layout-`
5	Scroll Animations	MEDIUM-HIGH	`scroll-`
6	Gesture Optimization	MEDIUM	`gesture-`
7	Spring & Physics	MEDIUM	`spring-`
8	SVG & Path Animations	LOW-MEDIUM	`svg-`
9	Exit Animations	LOW	`exit-`