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
安装命令
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
发现
标签

此技能尚未发布标签。

版本
最新版本元数据

版本

v2026.09.24

发布时间

Sep 24, 2026

分类

未分类

许可证

MIT

源路径

skills/.experimental/framer-motion

默认分支

master

最新提交

cf93c57

Tree SHA

afbb575