frontend-performance

What it does

This skill equips AI agents to analyze and optimize the runtime performance of web applications. It focuses on identifying bottlenecks in rendering, resource loading, and execution efficiency to ensure smooth user experiences.

When to use it

• Diagnosing slow page load times or high Time-to-Interactive (TTI) metrics.
• Refactoring codebases to reduce unnecessary re-renders in frameworks like React or Vue.
• Optimizing asset delivery strategies, such as image compression and lazy loading implementation.
• Analyzing bundle sizes to minimize JavaScript payload overhead.

Key capabilities

• Runtime performance profiling and bottleneck detection.
• Rendering optimization analysis for single-page applications.
• Resource loading efficiency evaluation.
• Code execution speed assessment.

Example prompts

• "Analyze the current rendering cycle of this React component and suggest optimizations to reduce re-renders."
• "Identify the primary bottlenecks causing high latency in this web application's initial load."
• "Review the JavaScript bundle size and propose strategies to minimize payload overhead without losing functionality."

Tips & gotchas

Ensure you have access to the application's source code or a live environment where profiling tools can be injected. Performance gains are often context-dependent; an optimization valid for one device type may not yield results on another, so always test across target platforms.