framer-motion

v2026.09.24

Framer Motion performance optimization guidelines. This skill should be used when writing, reviewing, or refactoring React animations with Framer Motion to ensure optimal performance patterns. Triggers on tasks involving motion components, animations, gestures, layout transitions, scroll-linked effects, and SVG animations.

GitHub
Install command
npx skhub add pproenca/framer-motion
Markdown
SKILL.md

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

PriorityCategoryImpactPrefix
1Bundle OptimizationCRITICALbundle-
2Re-render PreventionCRITICALrerender-
3Animation PropertiesHIGHanim-
4Layout AnimationsHIGHlayout-
5Scroll AnimationsMEDIUM-HIGHscroll-
6Gesture OptimizationMEDIUMgesture-
7Spring & PhysicsMEDIUMspring-
8SVG & Path AnimationsLOW-MEDIUMsvg-
9Exit AnimationsLOWexit-

Quick Reference

1. Bundle Optimization (CRITICAL)

2. Re-render Prevention (CRITICAL)

3. Animation Properties (HIGH)

4. Layout Animations (HIGH)

5. Scroll Animations (MEDIUM-HIGH)

6. Gesture Optimization (MEDIUM)

7. Spring & Physics (MEDIUM)

8. SVG & Path Animations (LOW-MEDIUM)

9. Exit Animations (LOW)

How to Use

Read individual reference files for detailed explanations and code examples:

Reference Files

FileDescription
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference information
Discovery
Tags

No tags published for this skill.

Version
Latest version metadata

Version

v2026.09.24

Published

Sep 24, 2026

Category

Uncategorized

License

MIT

Source path

skills/.experimental/framer-motion

Default branch

master

Latest commit

cf93c57

Tree SHA

afbb575