/nextjs-optimization
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.
$ npx -y skills add hoangnguyen0403/agent-skills-standard --skill nextjs-optimization --agent claude-codeHow it fires
How this skill gets triggered: by you, by Claude, or both.
- Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
- You can call itInvoke it directly when you want it.
- Slash command
/nextjs-optimization
Context preview
The summary Claude sees to decide when to auto-load this skill.
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.
SKILL.md
nextjs-optimization.SKILL.mdname: 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.
metadata:
triggers:
files:
- '**/layout.tsx'
- '**/page.tsx'
keywords:
- metadata
- generateMetadata
- 'next/image'
- 'next/font'Optimization
**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](references/example.md)
Fonts
Use `next/font` for zero layout shift — self-hosts fonts and adds `font-display: swap`:
See [implementation examples](references/example.md)
Metadata (SEO)
See [implementation examples](references/example.md)
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`.
Read more
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.
metadata:
triggers:
files:
- '**/layout.tsx'
- '**/page.tsx'
keywords:
- metadata
- generateMetadata
- 'next/image'
- 'next/font'Optimization
**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](references/example.md)
Fonts
Use `next/font` for zero layout shift — self-hosts fonts and adds `font-display: swap`:
See [implementation examples](references/example.md)
Metadata (SEO)
See [implementation examples](references/example.md)
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`.
The portable SDLC standards layer for AI coding agents. Sync once, then work in your own runtime.
Repo: hoangnguyen0403/agent-skills-standard
Other skills on agent-skills-standard.
- /android-agp-upgrade
Upgrade an Android project to Android Gradle Plugin (AGP) 9. Use when migrating to AGP 9, updating Gradle build files, migrating to built-in Kotlin, or adopting the new AGP DSL.
Open skill - /android-architecture
Apply Clean Architecture layering, modularization, and Unidirectional Data Flow in Android projects. Use when setting up project structure, placing code in layers, configuring feature/core modules, or implementing UDF patterns; defer Compose state and ViewModel/StateFlow
Open skill - /android-background-work
Implement WorkManager and background processing correctly on Android. Use when creating Worker classes, scheduling tasks, choosing between WorkManager and Foreground Services, or setting up Hilt in workers; defer FCM and notification delivery to android-notifications.
Open skill - /android-compose-migration
Migrate an Android XML View to Jetpack Compose following a structured 10-step workflow. Use when converting XML layouts to Compose, setting up Compose in an existing View-based project, or incrementally adopting Compose.
Open skill - /android-compose
Build high-performance declarative UI with Jetpack Compose. Use when writing Composable functions, optimizing recomposition, hoisting state, or working with LazyColumn and side effects; defer deep-link and navigation routing to android-navigation.
Open skill - /android-concurrency
Write correct coroutine scopes, lifecycle collection, and dispatcher injection in Android production code. Use for suspend functions, coroutine scopes, and dispatcher mechanics; defer ViewModel StateFlow/LiveData architecture, Fragment lifecycle recipes,
Open skill