Optimize Framer Motion animations in React applications to reduce runtime jank.
npx skills add https://github.com/haotool/app --skill framer-motion-haotool
Please help me install this Agent Skill. Skill: framer-motion Source: https://github.com/haotool/app/tree/main/.agents/skills/framer-motion Command: npx skills add https://github.com/haotool/app --skill framer-motion-haotool
Framer Motion animations can incur performance costs if not implemented with best practices and careful optimization.
Apply these guidelines when implementing or reviewing Framer Motion animations in a React project to ensure efficient, high-performance motion.
High-intent search queries and answers about installing and using this skill.
To optimize Framer Motion animations and reduce runtime jank, apply deterministic refactoring rules to motion components, gestures, and layout transitions. This improves runtime performance by enforcing bundle-size considerations and re-render prevention without altering user-visible behavior.
Framer Motion causes re-renders when animation states trigger unnecessary React component updates. Prevent these re-renders by applying category-prioritized rules for efficient motion patterns during development or review, ensuring smooth transitions without visual side effects.
Yes, you can refactor scroll-linked effects and SVG animations. The optimization guidelines cover motion components across web interfaces, applying performance rules to transitions, gestures, and SVG animations to reduce bundle size and improve speed.
The best way to reduce Framer Motion bundle size is to follow performance guidelines for bundle size considerations during code generation and refactoring. This ensures efficient motion patterns are applied across transitions and gestures.
No, optimizing Framer Motion animations does not alter user-visible behavior. The refactoring process focuses on re-render prevention and animation performance optimization while strictly maintaining the original visual output and interactions.
braswelljrOptimize Framer Motion animation performance in React applications.
cloudflareAudit web performance and diagnose Core Web Vitals issues using Chrome DevTools MCP.
vfsheraApply React performance optimization rules to components, hooks, and UI patterns.
pproencaOptimize React animations with Framer Motion performance guidelines.
