>_SkillsHub▋

> nextjs-optimization

Image, Font, Script, and Metadata optimization strategies. Use when optimizing Next.js images, fonts, scripts, or page metadata for performance. (triggers: **/layout.tsx, **/page.tsx, next/image, next/font, metadata, generateMetadata)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-optimization?format=md"
SKILL.md•nextjs-optimization

Optimization

Priority: P1 (HIGH)

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

Monitoring (Core Web Vitals)

Before applying optimizations, identify bottlenecks using:

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

Images (next/image)

  • Pattern: Always use next/image to prevent CLS. Use priority for LCP images.
  • Responsive: Use sizes (e.g., (max-width: 768px) 100vw, 33vw) to avoid downloading oversized images.
  • Constraints:
    • Remote domains must be in next.config.js remotePatterns.
    • Use placeholder="blur" for local images (automatic) or remote (manual blurDataURL).
    • Use fill with object-fit for parent-relative sizing.

Fonts (next/font)

  • Strategy: Self-host Google Fonts or local files via next/font.
  • Optimization: Zero layout shift, no network requests for font files at runtime. Apply classes to <body> or specific elements.

Metadata (SEO)

  • Static: Export metadata object from layout.tsx or page.tsx.

    export const metadata: Metadata = {
  title: 'Dashboard',
  description: '...',
};

  • Dynamic: Export generateMetadata({ params }) function.

    export async function generateMetadata({ params }) {
  const product = await getProduct(params.id);
  return { title: product.name };
}

  • Open Graph: Use openGraph key for social cards.

Scripts (next/script)

  • Loading Strategy: Control when 3rd party scripts load.
    • strategy="afterInteractive" (Default): Google Analytics.
    • strategy="lazyOnload": Chat widgets, low priority.

🚫 Anti-Patterns

  • Do NOT use standard patterns if specific project rules exist.
  • Do NOT ignore error handling or edge cases.

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#data#performance#react
└────────────