How do I install the Next.js Optimization skill?

Run npx skillmds add majiayu000/next-js-optimization in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Next.js Optimization skill do?

Image, Font, Script, and Metadata optimization strategies. It is listed under Web & Frontend on SkillMD.

Is Next.js Optimization safe to use?

This skill has not completed SkillMD's automated safety review yet. Capability flags: docs only. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Next.js Optimization?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Next.js Optimization free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Next.js Optimization?

majiayu000 (@majiayu000) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Next.js Optimization by majiayu000 — Agent Skill

Name: Next.js Optimization
Rating: 4.2 (5 reviews)
Author: majiayu000

File contents

Optimization

Priority: P1 (HIGH)

Core optimization primitives provided by Next.js. Monitor First, Optimize Later.

Monitoring (Core Web Vitals)

Before applying optimizations, identify bottlenecks using:

LCP (Largest Contentful Paint): Initial load speed. Target < 2.5s.
CLS (Cumulative Layout Shift): Visual stability. Target < 0.1.
INP (Interaction to Next Paint): Responsiveness. Target < 200ms.
Tools: Chrome DevTools "Performance" tab, next/speed-insights, or React Profiler.

Images (`next/image`)

Pattern: Always use next/image to prevent CLS. Use priority for LCP images.
Responsive: Use sizes (e.g., (max-width: 768px) 100vw, 33vw) to avoid downloading oversized images.
Constraints:
- Remote domains must be in next.config.js remotePatterns.
- Use placeholder="blur" for local images (automatic) or remote (manual blurDataURL).
- Use fill with object-fit for parent-relative sizing.

Fonts (`next/font`)

Strategy: Self-host Google Fonts or local files via next/font.
Optimization: Zero layout shift, no network requests for font files at runtime. Apply classes to <body> or specific elements.

Metadata (SEO)

Static: Export metadata object from layout.tsx or page.tsx.

export const metadata: Metadata = {
  title: 'Dashboard',
  description: '...',
};

Dynamic: Export generateMetadata({ params }) function.

export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  return { title: product.name };
}

Open Graph: Use openGraph key for social cards.

Scripts (`next/script`)

Loading Strategy: Control when 3rd party scripts load.
- strategy="afterInteractive" (Default): Google Analytics.
- strategy="lazyOnload": Chat widgets, low priority.

---name: next-js-optimizationdescription: Image, Font, Script, and Metadata optimization strategies.--- # Optimization ## **Priority: P1 (HIGH)** Core optimization primitives provided by Next.js. **Monitor First, Optimize Later.** ## Monitoring (Core Web Vitals) Before applying optimizations, identify bottlenecks using: - **LCP (Largest Contentful Paint)**: Initial load speed. Target < 2.5s. - **CLS (Cumulative Layout Shift)**: Visual stability. Target < 0.1. - **INP (Interaction to Next Paint)**: Responsiveness. Target < 200ms. - **Tools**: Chrome DevTools "Performance" tab, `next/speed-insights`, or `React Profiler`. ## Images (`next/image`) - **Pattern**: Always use `next/image` to prevent CLS. Use `priority` for LCP images. - **Responsive**: Use `sizes` (e.g., `(max-width: 768px) 100vw, 33vw`) to avoid downloading oversized images. - **Constraints**: - Remote domains **must** be in `next.config.js` `remotePatterns`. - Use `placeholder="blur"` for local images (automatic) or remote (manual `blurDataURL`). - Use `fill` with `object-fit` for parent-relative sizing. ## Fonts (`next/font`) - **Strategy**: Self-host Google Fonts or local files via `next/font`. - **Optimization**: Zero layout shift, no network requests for font files at runtime. Apply classes to `<body>` or specific elements. ## Metadata (SEO) - **Static**: Export `metadata` object from `layout.tsx` or `page.tsx`. ```tsx export const metadata: Metadata = { title: 'Dashboard', description: '...', }; ``` - **Dynamic**: Export `generateMetadata({ params })` function. ```tsx export async function generateMetadata({ params }) { const product = await getProduct(params.id); return { title: product.name }; } ``` - **Open Graph**: Use `openGraph` key for social cards. ## Scripts (`next/script`) - **Loading Strategy**: Control when 3rd party scripts load. - `strategy="afterInteractive"` (Default): Google Analytics. - `strategy="lazyOnload"`: Chat widgets, low priority.

Frequently asked questions