Animation Best Practices

The animation-best-practices skill analyzes React components to ensure animations are performant and accessible. It identifies issues like missing key props, unoptimized transitions, and potential layout shifts that degrade user experience.

When to use it

• Before deploying a new React component with complex motion effects to production.
• When debugging performance bottlenecks caused by excessive DOM manipulation or re-renders.
• To verify that animation libraries (like Framer Motion) are configured correctly for accessibility standards.
• During code reviews to catch common anti-patterns in state-driven animations.

Key capabilities

• Detects missing key props on list items causing jittery animations.
• Flags non-animated transitions that trigger unnecessary layout recalculations.
• Identifies expensive CSS-in-JS styles applied during animation frames.
• Warns about conflicting animation durations or easing functions.

Example prompts

• "Run animation-best-practices on this carousel component to find performance issues."
• "Check if my modal fade-in transition follows React animation best practices."
• "Analyze these list render animations for layout shift risks and missing keys."

Tips & gotchas

This skill focuses specifically on React ecosystem patterns; it may not catch issues in vanilla JS or other frameworks. Ensure your project is built with a compatible version of React Doctor to avoid false positives regarding library versions.