Expert Next.js performance optimization skill covering Core Web Vitals, image/font optimization, caching strategies, streaming, bundle optimization, and Server Components best practices.
SkillScore100Maintained
Automatic
◆Frontend / UI pack
Last verified 8/22/2026
What it changes
Passed 22 of 22 test cases with the skill, and 21 of 22 without it.
Without skill95%
With skill100%
Checks it passed that the model alone missed
Warns against using priority on images below the fold
1 fixed21 passed either way0 still failing0 broke
Pass-rate lift
+5 pp
Tokens
+172%
Agent turns
0%
Response time
-16%
Model gemini-3.6-flashMeasured 8/22/2026v122 of 22 cases passed with skill
Tokens, turns and time describe resource use, not a dollar price.
See it in action
A test case the skill fixed. Same model, same prompt, with and without the skill.
Prompt
I have a top hero banner image on my Next.js product page rendered using next/image that is currently lazy loading and harming our LCP metric. I am considering using loading="eager" or standard img tags. How should I configure next/image for this main above-the-fold image?
What was checked, without and with the skill
Checked
Without skill
With skill
Recommends adding the priority attribute to the next/image component
Passed
Passed
Warns against using priority on images below the fold
Missed
Passed
case-01 · gemini-3.6-flash · 8/22/2026 · answers are capped and redacted
What's inside
The instructions your model reads when the skill loads.
SKILL.md402 lines11 files
Next.js Performance Optimization
Expert guidance for optimizing Next.js applications with focus on Core Web Vitals, modern patterns, and best practices.
Overview
This skill provides comprehensive guidance for optimizing Next.js applications. It covers Core Web Vitals optimization (LCP, INP, CLS), modern React patterns, Server Components, caching strategies, and bundle optimization techniques. Designed for developers already familiar with React/Next.js who want to implement production-grade optimizations.
When to Use
Use this skill when working on Next.js applications and need to:
Optimize Core Web Vitals (LCP, INP, CLS) for better performance and SEO
Implement image optimization with next/image for faster loading
Configure font optimization with next/font to eliminate layout shift
Set up caching strategies using unstable_cache, revalidateTag, or ISR
Convert Client Components to Server Components for reduced bundle size
Implement Suspense streaming for progressive page loading
Analyze and reduce bundle size with code splitting and dynamic imports
Configure metadata and SEO for better search engine visibility
Optimize API route handlers for better performance