What problem does it solve? Next.js applications often suffer from poor Core Web Vitals scores due to unoptimized images, oversized bundles, misconfigured rendering strategies, and uncontrolled third-party scripts. This Skill systematically audits a Next.js 13+ App Router project and produces actionable fixes with specific file paths and replacement code snippets. ## Core Features & Use Cases - Five-Area Performance Audit: Covers image optimization (next/image, CLS prevention), render strategy labeling (SSG/ISR/SSR/CSR), code splitting (dynamic imports, bundle under 200KB), script loading (next/script strategies), and data caching (unstable_cache with revalidateTag). - Automated img Tag Scanner: Ships a bash script that scans src/, app/, pages/, and components/ for raw <img> tags, counts occurrences per file, and prints replacement guidance. - Verification Workflow: Runs bundle analysis and Lighthouse checks against Core Web Vitals targets (LCP < 2.5s, CLS < 0.1, INP < 200ms). - Use Case: A developer notices their Next.js landing page has an LCP of 3.8 seconds. The Skill detects raw <img> tags, missing render strategy labels, and a 450KB initial bundle, then provides concrete next/image conversions and dynamic import snippets to fix each issue. ## Quick Start Ask the assistant to audit my Next.js project for performance issues and fix the slow LCP and large bundle size.
