Next.js Performance Prescriber

Your Next.js app looks great in dev, but Lighthouse shows middling Core Web Vitals. The work you pour into server components, images, and code‑splitting doesn't always translate to speed – unless you know exactly which levers to pull.

This skill audits your page code and a Lighthouse report, then prescribes concrete Next.js‑specific fixes: next.config.js tweaks, component refactors, and loading strategies that move the needle on LCP, CLS, and INP.

Quick scan

• Best for: Next.js developers staring at sub‑par Core Web Vitals scores and wanting precise, copy‑paste‑ready fixes.
• Output: A list of code modifications (configuration, components, imports) tailored to your app.
• Inputs: Your page/component code + a Lighthouse JSON report (or a summary of the metric regressions).
• Time saved: Hours spent decoding generic Web Vitals advice into Next.js specifics.
• Main caveat: The skill only diagnoses what you share – it won't crawl your entire project.

What it does

Given your Next.js code and a Lighthouse report, the skill:

1. Identifies the top performance bottlenecks (e.g., large LCP images, render‑blocking JS, layout shifts).
2. Maps each bottleneck to a Next.js‑appropriate solution – never a generic suggestion.
3. Generates code snippets you can drop into your project: config changes, component rewrites, import optimizations, next/image usage, loading.tsx, Suspense boundaries, and more.

When to use it

• You have a Lighthouse report and want Next.js‑specific fixes (not just “optimize images”).
• You're migrating a page to App Router and seeing performance regressions.
• You're preparing for a launch and need a final Core Web Vitals pass.

When not to use it

• You haven't run Lighthouse yet – get real metrics first.
• Your performance issues are purely backend (slow API). The skill focuses on the client‑side delivery.
• You're looking for a general performance checklist – this skill prescribes code, not theory.

How to install and use

1. Download the skill ZIP and drop the skill/ folder into your Claude Code workspace.
2. Invoke the skill with a command like:

I need to improve LCP on my Next.js homepage. Here is my page code and Lighthouse report.

1. Paste your page/component code and the Lighthouse JSON (or a plain‑text summary of the metric regressions).
2. The skill will return a prescriptive report with code fixes. Review and apply the changes, then re‑test.

A concrete example

Input A Next.js 13 App Router page with a hero image, a product grid, and an LCP of 3.8s. The Lighthouse report shows the hero image is the LCP element, and there's a render‑blocking JS file.

You provide:

export default function Home() {
  return (
    <>
      <img src="/hero.jpg" alt="hero" />
      <ProductGrid />
    </>
  );
}

Prescription (summary)

• Replace <img> with next/image, add priority and fetchPriority="high".
• Wrap <ProductGrid> in <Suspense> with a skeleton fallback and import it using dynamic() with ssr: false.
• Add preconnect hints for the image CDN in the root layout.
• Adjust experimental.optimizePackageImports in next.config.js to tree‑shake the grid’s icon library.

After applying the fixes, the user's LCP dropped to 1.9s.

Limitations

• Requires human judgment. The skill suggests specific changes, but you must test that they don't break your design or state.
• Scope is limited to what you share. It won't detect performance problems in components you don't include in the prompt.
• App‑router specific. Some suggestions assume the App Router and React Server Components; Pages Router pages may need different approaches.

Download

Get the Next.js Performance Prescriber skill and turn Lighthouse red into green with code you'll actually use.

Download Next.js Performance Prescriber

Related skills

• Env Doctor – Audit your environment variables and configuration before deploying.
• Cron Translator – Convert your cron expressions into plain English and detect schedules that might delay performance‑critical jobs.

Both skills help you maintain a production‑ready Next.js stack where speed is a first‑class concern.

Related skills

Skills that pair well, or that you'd reach for instead:

Install

Start with the ZIP package, then choose the AI tool workflow that fits your setup.

1. Download nextjs-performance-prescriber.zip (6.6 KB).
2. Open the package and read SKILL.md, plus any included references, templates, or scripts.
3. Use the instructions directly in any AI tool that supports reusable instructions, project knowledge, custom agents, or uploaded reference files.

In Claude, open the command picker with / and select this skill by name when you want to use it.

For Claude Code, unzip into ~/.claude/skills/ so the folder lands at ~/.claude/skills/nextjs-performance-prescriber/, then reload Claude Code. For Claude.ai, upload the same ZIP from Customize → Skills.

Use with other AI tools

This package is not locked to one vendor. If your AI tool does not support Claude-style skills, copy the core instructions from SKILL.md into the tool's custom instructions, project prompt, agent setup, or reusable prompt library.

• Upload or paste any included reference files as project knowledge where your tool supports it.
• Keep the output format from SKILL.md intact so results stay predictable.
• Run a small test with your own data before using the workflow in production.

Compatibility depends on the features your AI tool provides. Treat scripts as optional local helpers unless your environment can run them safely.

Claude installation reference