What problem does it solve? Web interfaces often suffer from slow load times, janky animations, and bloated bundles that degrade user experience. This Skill provides a systematic methodology to measure, diagnose, and fix performance bottlenecks instead of guessing at optimizations. ## Core Features & Use Cases - Performance Diagnosis: Measures Core Web Vitals (LCP, INP, CLS), bundle size, frame rate, and network waterfalls before making any changes. - Targeted Fixes: Covers image optimization (WebP/AVIF, srcset, lazy loading), JavaScript bundle reduction (code splitting, tree shaking), layout thrashing prevention, GPU-accelerated animations, and React-specific patterns like memoization and list virtualization. - Verification Workflow: Compares before/after Lighthouse scores and tests on real devices with throttled connections to confirm improvements. - Use Case: A Next.js portfolio site feels sluggish on mobile. Use this Skill to identify that unoptimized hero images and render-blocking JavaScript are the culprits, then apply responsive images, font subsetting, and route-based code splitting to bring LCP under 2.5 seconds. ## Quick Start Ask the AI to diagnose why your page feels slow and fix the biggest performance bottlenecks in your project.
