What problem does it solve? Slow load times, janky animations, and bloated bundles degrade user experience and hurt Core Web Vitals scores. This Skill provides a systematic workflow to measure, diagnose, and fix frontend performance problems instead of guessing at optimizations. ## Core Features & Use Cases - Performance Diagnosis: Measure Core Web Vitals (LCP, INP, CLS), bundle size, runtime frame rates, and network waterfalls before changing any code. - Targeted Fixes: Apply concrete techniques for images (WebP/AVIF, srcset, lazy loading), JavaScript (code splitting, tree shaking), CSS, fonts, rendering (layout thrashing, virtual scrolling), and animations (GPU-accelerated transforms). - Verification Workflow: Compare before/after Lighthouse scores and test on real devices and throttled connections to confirm improvements without regressions. - Use Case: A React app's dashboard feels sluggish on mobile. Use this Skill to identify a 2MB bundle and unoptimized hero images, then apply route-based code splitting and responsive images to cut LCP below 2.5 seconds. ## Quick Start Ask the assistant to analyze your page's performance and fix the biggest bottlenecks, for example: "Optimize my landing page, it loads slowly on mobile."
