hoangnguyen0403/nextjs-optimization
skills/nextjs/nextjs-optimization/SKILL.md
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.
$ install --global
skillsauthnpx skillsauth add hoangnguyen0403/agent-skills-standard nextjs-optimizationInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: May 19, 2026, 3:43 AM326.9s3 files scanned
SKILL.md
- 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.
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
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
dynamicimports withSuspensefor 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: Usenext/imageto prevent CLS and enable automatic optimization. - No Google Fonts CDN link: Use
next/fontto self-host and eliminate layout shift. - No metadata in
_document.tsx: Useexport const metadataorgenerateMetadata(). - No 3rd-party scripts in
<head>: Usenext/scriptwith appropriatestrategy.
Related Skills
hoangnguyen0403/specialist-pr-reviewer
development
VerifiedTrustedCommunity
Summarizes GitHub PR, GitLab MR, or Azure DevOps PR metadata, review threads, changed files, and template completeness. Use during review-ticket or code-review workflows when PR/MR context exists.
498SKILL.mdUpdated May 23, 2026
hoangnguyen0403/typescript-tooling
tools
VerifiedTrustedCommunity
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-security
development
VerifiedTrustedCommunity
Validate input, secure auth tokens, and prevent injection attacks in TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration.
498SKILL.mdUpdated May 21, 2026
hoangnguyen0403/typescript-language
development
VerifiedTrustedCommunity
Apply modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings.
498SKILL.mdUpdated May 21, 2026