About

Imported from FilippoDeSilva/skills (skills/nextjs/nextjs-optimization/SKILL.md). Install upstream with npx skills add FilippoDeSilva/skills --skill nextjs-optimization. Copyright stays with the author (MIT).

Optimization

Name: nextjs-optimization
Author: FilippoDeSilva

Priority: P1 (HIGH)

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

Monitoring (Core Web Vitals)

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

Images

Always use next/image to prevent CLS and enable automatic optimization:

See implementation examples

Fonts

Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:

See implementation examples

Metadata (SEO)

See implementation examples

Scripts

Use next/script with appropriate loading strategies:

beforeInteractive: Critical scripts (polyfills).
afterInteractive: Analytics (Google Analytics).
lazyOnload: Chat widgets, social embeds.

Bundle & Components

Analyze with @next/bundle-analyzer. Prune heavy libraries; use ESM-tree-shakable dependencies.
Use dynamic imports with Suspense for large components not needed at initial render.
Enable ppr: true (Partial Prerendering) in Next.js 15+ for static shell + dynamic islands.

Anti-Patterns

No <img> tag: Use next/image to prevent CLS and enable automatic optimization.
No Google Fonts CDN link: Use next/font to self-host and eliminate layout shift.
No metadata in _document.tsx: Use export const metadata or generateMetadata().
No 3rd-party scripts in <head>: Use next/script with appropriate strategy.

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/filippodesilva-skills-nextjs-optimization/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

filippodesilva-skills-nextjs-optimization.ocm.jsonjson

{
  "ocm": "1",
  "id": "filippodesilva-skills-nextjs-optimization",
  "kind": "skill",
  "name": "nextjs-optimization",
  "description": "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.",
  "publisher": "FilippoDeSilva",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "marketing"
    ],
    "tags": [
      "skill-md",
      "nextjs",
      "optimization",
      "performance",
      "core-web-vitals",
      "lcp",
      "cls",
      "inp",
      "metadata",
      "generate-metadata"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "github",
      "repository": "https://github.com/FilippoDeSilva/skills",
      "path": "skills/nextjs/nextjs-optimization/SKILL.md",
      "ref": "a1d985c24c49d918b5d76bb6e5a66903ef830cd3",
      "url": "https://github.com/FilippoDeSilva/skills/blob/a1d985c24c49d918b5d76bb6e5a66903ef830cd3/skills/nextjs/nextjs-optimization/SKILL.md",
      "key": "FilippoDeSilva/skills/skills/nextjs/nextjs-optimization/SKILL.md"
    },
    "license": "MIT"
  },
  "instructions": "# Optimization\n\n## **Priority: P1 (HIGH)**\n\nCore optimization primitives provided by Next.js. **Monitor First, Optimize Later.**\n\n## Monitoring (Core Web Vitals)\n\n- **LCP** (Largest Contentful Paint): Target < 2.5s.\n- **CLS** (Cumulative Layout Shift): Target < 0.1.\n- **INP** (Interaction to Next Paint): Target < 200ms.\n- **Tools**: Chrome DevTools \"Performance\" tab, `next/speed-insights`, `React Profiler`.\n\n## Images\n\nAlways use `next/image` to prevent CLS and enable automatic optimization:\n\nSee [implementation examples](references/example.md)\n\n## Fonts\n\nUse `next/font` for zero layout shift ",
  "cost": {
    "context_tokens": 420
  }
}

Fetch it by URL: GET /api/v1/registry/filippodesilva-skills-nextjs-optimization/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.