Smithery Logo
MCPsSkillsDocsPricing
Login
Smithery Logo

Accelerating the Agent Economy

Resources

DocumentationPrivacy PolicySystem Status

Company

PricingAboutBlog

Connect

© 2026 Smithery. All rights reserved.

    pproenca

    framer-motion-best-practices

    pproenca/framer-motion-best-practices
    Design
    16
    4 installs

    About

    SKILL.md

    Install

    Install via Skills CLI

    or add to your agent
    • Claude Code
      Claude Code
    • Codex
      Codex
    • OpenClaw
      OpenClaw
    • Cursor
      Cursor
    • Amp
      Amp
    • GitHub Copilot
      GitHub Copilot
    • Gemini CLI
      Gemini CLI
    • Kilo Code
      Kilo Code
    • Junie
      Junie
    • Replit
      Replit
    • Windsurf
      Windsurf
    • Cline
      Cline
    • Continue
      Continue
    • OpenCode
      OpenCode
    • OpenHands
      OpenHands
    • Roo Code
      Roo Code
    • Augment
      Augment
    • Goose
      Goose
    • Trae
      Trae
    • Zencoder
      Zencoder
    • Antigravity
      Antigravity
    ├─
    ├─
    └─

    About

    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...

    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

    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-

    Quick Reference

    1. Bundle Optimization (CRITICAL)

    • bundle-lazy-motion - Use LazyMotion and m component instead of motion
    • bundle-dynamic-features - Dynamically import motion features
    • bundle-dom-animation - Use domAnimation for basic animations
    • bundle-use-animate-mini - Use mini useAnimate for simple cases
    • bundle-strict-mode - Enable strict mode to catch accidental imports

    2. Re-render Prevention (CRITICAL)

    • rerender-motion-value - Use useMotionValue instead of useState
    • rerender-use-transform - Derive values with useTransform
    • rerender-stable-callbacks - Keep animation callbacks stable
    • rerender-variants-object - Define variants outside component
    • rerender-animate-prop - Use stable animate values
    • rerender-motion-value-event - Use motion value events

    3. Animation Properties (HIGH)

    • anim-transform-properties - Animate transform properties
    • anim-opacity-filter - Prefer opacity and filter for visual effects
    • anim-hardware-acceleration - Leverage hardware acceleration
    • anim-will-change - Use willChange prop judiciously
    • anim-independent-transforms - Animate transforms independently
    • anim-keyframes-array - Use keyframe arrays for sequences

    4. Layout Animations (HIGH)

    • layout-dependency - Use layoutDependency to limit measurements
    • layout-position-size - Use layout="position" or "size" appropriately
    • layout-group - Group related layout animations
    • layout-id-shared - Use layoutId for shared element transitions
    • layout-scroll - Add layoutScroll to scrollable ancestors

    5. Scroll Animations (MEDIUM-HIGH)

    • scroll-use-scroll - Use useScroll hook for scroll-linked animations
    • scroll-use-spring-smooth - Smooth scroll animations with useSpring
    • scroll-element-tracking - Track specific elements entering viewport
    • scroll-offset-configuration - Configure scroll offsets
    • scroll-container-ref - Track scroll within specific containers

    6. Gesture Optimization (MEDIUM)

    • gesture-while-props - Use whileHover/whileTap instead of handlers
    • gesture-variants-flow - Let gesture variants flow to children
    • gesture-drag-constraints - Use dragConstraints ref for boundaries
    • gesture-drag-elastic - Configure dragElastic for natural feel
    • gesture-tap-cancel - Use onTapCancel for interrupted gestures

    7. Spring & Physics (MEDIUM)

    • spring-physics-based - Use physics-based springs for interruptibility
    • spring-damping-ratio - Configure damping to control oscillation
    • spring-mass-inertia - Adjust mass for heavier/lighter feel
    • spring-use-spring-hook - Use useSpring for reactive values

    8. SVG & Path Animations (LOW-MEDIUM)

    • svg-path-length - Use pathLength for line drawing animations
    • svg-motion-components - Use motion.path and motion.circle
    • svg-viewbox-animation - Animate viewBox for zoom effects
    • svg-morph-matching-points - Match point counts for morphing

    9. Exit Animations (LOW)

    • exit-animate-presence - Wrap conditional renders with AnimatePresence
    • exit-unique-keys - Provide unique keys for AnimatePresence children
    • exit-mode-wait - Use mode="wait" for sequential transitions

    How to Use

    Read individual reference files for detailed explanations and code examples:

    • Section definitions - Category structure and impact levels
    • Rule template - Template for adding new rules

    Reference Files

    File Description
    references/_sections.md Category definitions and ordering
    assets/templates/_template.md Template for new rules
    metadata.json Version and reference information
    Recommended Servers
    Cloudflare Workers Observability
    Cloudflare Workers Observability
    Neon
    Neon
    Vercel Grep
    Vercel Grep
    Repository
    pproenca/dot-skills
    Files