> 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. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-optimization?format=md"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:
Fonts
Use next/font for zero layout shift — self-hosts fonts and adds font-display: swap:
Metadata (SEO)
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 --same-repo
> common-store-changelog
Generate user-facing release notes for the Apple App Store and Google Play Store by collecting git history, triaging user-impacting changes, and drafting store-compliant changelogs. Enforces character limits (App Store ≤4000, Google Play ≤500), tone, and bullet format. Use when generating release notes, app store changelog, play store release, what's new, or version release notes for any mobile app. (triggers: generate changelog, app store notes, play store release, what's new, release notes, ve
> golang-tooling
Go developer toolchain — gopls LSP diagnostics, linting, formatting, and vet. Use when setting up Go tooling, running linters, or integrating gopls with Claude Code. (triggers: gopls, golangci-lint, golangci.yml, go vet, goimports, staticcheck, go tooling, go lint)
> common-ui-design
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS). (triggers: build a page, create a component, design a dashboard, landing page, UI for, build a layout, make it look good, improve the design, build UI, create interface, design screen)
> common-owasp
OWASP Top 10 audit checklist for Web Applications (2021) and APIs (2023). Load during any security review, PR review, or codebase audit touching web, mobile backend, or API code. (triggers: security review, OWASP, broken access control, IDOR, BOLA, injection, broken auth, API review, authorization, access control)