Performance Optimization

What it does

This skill helps AI agents diagnose and resolve performance issues related to animations in frontend user interfaces. It leverages Disney's 12 principles of animation to identify root causes of problems like low frame rates, stuttering motion, sluggish UI responsiveness, battery drain, and layout thrashing. The skill provides specific fixes based on these principles, focusing on optimizing animations for better performance.

When to use it

• When a user reports that animations are slow or "janky."
• To troubleshoot UI performance issues leading to battery drain on mobile devices.
• During frontend development workflows where smooth and efficient animations are critical.
• When encountering layout thrashing (forced reflows) in a web application.
• To optimize animations for low-spec target devices.

Key capabilities

• Diagnoses animation performance issues using Disney's 12 principles of animation.
• Identifies problems related to "Straight Ahead vs Pose-to-Pose," Timing, Secondary Action, Solid Drawing, and Staging.
• Provides specific code fixes for common animation bottlenecks (e.g., using CSS transitions instead of JavaScript animations).
• Offers guidance on utilizing will-change property effectively.
• Suggests techniques like staggering or sequencing animations to reduce concurrent calculations.

Example prompts

• "My website's animations are choppy; can you help me optimize them?"
• "I’m seeing layout thrashing in my UI, what should I check?"
• “How do I make this animation run smoother on mobile devices?”

Tips & gotchas

• The skill focuses specifically on animation performance. It won't address general website speed issues.
• Be mindful of overuse of the will-change property, as it can have unintended consequences if not used sparingly.
• Always test animations on the lowest-spec target device to ensure optimal performance across all users.