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/common-operator-profile
testing
VerifiedTrustedCommunity
Infer the requesting operator's technical fluency from message content (never ask directly) and adapt register — business, hybrid, or technical — across SDLC workflow output. Use when starting sdlc, brainstorm-feature, plan-feature, verify-work, publish-notes, or session-report, or whenever a request's phrasing signals a non-technical or cross-stack operator.
524SKILL.mdUpdated Jul 12, 2026
hoangnguyen0403/database-transactions
documentation
VerifiedTrustedCommunity
Define transaction boundaries, locking, and consistency guarantees for multi-step writes. Use when designing atomic operations, retries, idempotency, or concurrent write behavior.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-schema-design
development
VerifiedTrustedCommunity
Design relational or document schemas from access patterns, cardinality, and lifecycle. Use when modeling entities, choosing embed vs normalize, or shaping schema boundaries before implementation.
524SKILL.mdUpdated Jun 19, 2026
hoangnguyen0403/database-query-performance
data-ai
VerifiedTrustedCommunity
Diagnose database latency with explain plans, index ownership, and query-shape review. Use when a query is slow, an index is missing, or scans and N+1 patterns appear.
524SKILL.mdUpdated Jun 19, 2026