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 interface performance problems instead of guessing at optimizations. ## Core Features & Use Cases - Performance Assessment: Measure Core Web Vitals (LCP, FID/INP, CLS), bundle size, runtime frame rates, and network waterfalls before changing any code. - Loading Optimization: Apply image optimization (WebP/AVIF, srcset, lazy loading), code splitting, tree shaking, font subsetting, and critical CSS strategies. - Rendering & Animation Fixes: Eliminate layout thrashing, use GPU-accelerated transform/opacity animations, virtualize long lists, and reduce re-renders with React memoization patterns. - Use Case: A Next.js page has a 5-second LCP and poor Lighthouse score. Use this Skill to identify the oversized hero image and un-split JavaScript bundle, then apply responsive images and route-based code splitting to bring LCP under 2.5 seconds. ## Quick Start Analyze this page's performance bottlenecks and optimize its Core Web Vitals, bundle size, and rendering speed.
