Loading skill
Install any skill in seconds. Free to start, no credit card required.
Get Started Free →Optimize images, fonts, scripts, and metadata for Next.js performance and Core Web Vitals. Use when configuring next/image for LCP, next/font for zero layout shift, next/script loading strategies, or generateMetadata for SEO.
.claude/skills/hoangnguyen0403-nextjs-optimization/SKILL.md| Model | Eval pass | Runs |
|---|---|---|
| gemini-3.6-flash | 100% | 16 |
| Test case | Without → With | Effect | Δ tokens | Δ turns |
|---|---|---|---|---|
| case-11 | ✗→✓ | ▲ Improved | -34% | 0% |
| case-02 | ✗→✓ | ▲ Improved | -16% | 0% |
| case-17 | ✓→✓ | ＝ Same ✓ | 7% | 0% |
| case-03 | ✓→✓ | ＝ Same ✓ | -31% | 0% |
| case-04 | ✓→✓ | ＝ Same ✓ | -4% | 0% |
Core optimization primitives provided by Next.js. Monitor First, Optimize Later.
next/speed-insights, React Profiler.Always use next/image to prevent CLS and enable automatic optimization:
See implementation examples
Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:
See implementation examples
See implementation examples
Use next/script with appropriate loading strategies:
beforeInteractive: Critical scripts (polyfills).afterInteractive: Analytics (Google Analytics).lazyOnload: Chat widgets, social embeds.@next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies.dynamic imports with Suspense for large components not needed at initial render.ppr: true (Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.<img> tag: Use next/image to prevent CLS and enable automatic optimization.next/font to self-host and eliminate layout shift._document.tsx: Use export const metadata or generateMetadata().<head>: Use next/script with appropriate strategy.| Case | Status | Duration (ms) | Turns | Tokens | Tool calls | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Without | With | Δ | Without | With | Δ | Without | With | Δ | Without | With | Δ | ||
case-17 | pass→pass | 8,502 | 5,644 | -34% | 1 | 1 | 0% | 1,136 | 1,211 | +7% | 0 | 0 | — |
case-11 | fail→pass | 20,574 | 12,096 | -41% | 1 | 1 | 0% | 2,321 | 1,526 | -34% | 0 | 0 | — |
case-01 | fail→fail | 24,822 | 19,205 | -23% | 1 | 1 | 0% | 3,306 | 2,824 | -15% | 0 | 0 | — |
case-02 | fail→pass | 32,091 | 22,741 | -29% | 1 | 1 | 0% | 4,340 | 3,639 | -16% | 0 | 0 | — |
case-03 | pass→pass | 16,861 | 11,493 | -32% | 1 | 1 | 0% | 1,987 | 1,371 | -31% | 0 | 0 | — |
case-04 | pass→pass | 12,554 | 13,990 | +11% | 1 | 1 | 0% | 2,090 | 2,011 | -4% | 0 | 0 | — |
case-05 | pass→pass | 24,915 | 15,708 | -37% | 1 | 1 | 0% | 3,262 | 2,056 | -37% | 0 | 0 | — |
case-06 | pass→pass | 17,742 | 12,559 | -29% | 1 | 1 | 0% | 2,333 | 1,676 | -28% | 0 | 0 | — |
case-07 | pass→pass | 15,177 | 14,852 | -2% | 1 | 1 | 0% | 2,392 | 2,916 | +22% | 0 | 0 | — |
case-08 | pass→pass | 17,289 | 13,153 | -24% | 1 | 1 | 0% | 2,277 | 1,862 | -18% | 0 | 0 | — |
case-09 | pass→pass | 6,447 | 3,046 | -53% | 1 | 1 | 0% | 851 | 849 | -0% | 0 | 0 | — |
case-10 | pass→pass | 10,629 | 7,836 | -26% | 1 | 1 | 0% | 1,659 | 757 | -54% | 0 | 0 | — |
case-12 | pass→pass | 17,658 | 18,693 | +6% | 1 | 1 | 0% | 2,685 | 2,434 | -9% | 0 | 0 | — |
case-13 | fail→fail | 7,602 | 10,256 | +35% | 1 | 1 | 0% | 1,144 | 1,193 | +4% | 0 | 0 | — |
case-14 | pass→pass | 16,646 | 14,820 | -11% | 1 | 1 | 0% | 1,891 | 1,994 | +5% | 0 | 0 | — |
case-15 | pass→pass | 21,554 | 16,274 | -24% | 1 | 1 | 0% | 2,871 | 2,297 | -20% | 0 | 0 | — |
case-16 | pass→pass | 17,158 | 7,281 | -58% | 1 | 1 | 0% | 1,698 | 1,434 | -16% | 0 | 0 | — |
case-18 | pass→pass | 20,094 | 17,310 | -14% | 1 | 1 | 0% | 2,483 | 2,727 | +10% | 0 | 0 | — |
case-19 | pass→pass | 7,868 | 3,134 | -60% | 1 | 1 | 0% | 340 | 753 | +121% | 0 | 0 | — |
case-20 | pass→pass | 19,514 | 15,645 | -20% | 1 | 1 | 0% | 2,406 | 2,385 | -1% | 0 | 0 | — |
case-21 | pass→pass | 23,860 | 16,997 | -29% | 1 | 1 | 0% | 3,667 | 3,599 | -2% | 0 | 0 | — |
case-22 | pass→pass | 18,232 | 16,787 | -8% | 1 | 1 | 0% | 2,203 | 2,201 | -0% | 0 | 0 | — |
case-23 | pass→pass | 22,189 | 17,331 | -22% | 1 | 1 | 0% | 3,325 | 3,774 | +14% | 0 | 0 | — |
DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +9 percentage points is the difference between those two pass rates over the 23 comparable cases.
Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.
Other measured skills in the registry, with their headline benchmark lift.