Does it support the Next.js App Router and fetch caching?

Absolutely. It includes guidance on using fetch options like revalidate and tags, as well as managing caching strategies compatible with the modern Next.js architecture.

Why is next/font preferred over external Google Fonts?

This skill helps you implement next/font to self-host fonts automatically, which removes external requests, improves privacy, and ensures there is no layout shift during font loading.

How does this skill help with Cumulative Layout Shift (CLS)?

The skill provides specific implementation patterns for next/image and next/font that ensure dimensions are reserved and assets are optimized, preventing elements from jumping during page load.

Can it help reduce the initial JavaScript payload?

Yes, it guides you through using next/dynamic for code splitting, ensuring that heavy components are only loaded when they are actually needed by the user.

Next.js Performance

Name: Next.js Performance
Author: jovermier

byjovermier

0•

Developer Tools

Optimizes Next.js applications for speed and Core Web Vitals using expert implementation patterns for images, fonts, and caching.

Next.js Performance is a specialized Claude Code skill designed to audit and improve the speed of React-based web applications. It provides expert guidance for implementing core framework features like automatic image optimization, self-hosted fonts, and code splitting via dynamic imports. By focusing on critical metrics such as Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP), the skill helps developers implement sophisticated caching strategies and bundle optimizations that result in faster load times, reduced server strain, and superior user experiences.

Key Features

010 GitHub stars

02Font loading strategies using next/font to eliminate layout shifts

03Bundle size reduction through tree shaking and dependency management

04Advanced caching and Incremental Static Regeneration (ISR) configuration

05Automatic image optimization and CLS prevention patterns

06Dynamic import implementation for efficient code splitting

Use Cases

01Improving Core Web Vitals scores for better search engine rankings

02Optimizing data fetching and server-side rendering for high-traffic sites

03Reducing initial JavaScript bundle sizes for mobile performance

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jovermier/cc-stack-marketplace nextjs-performance

For use in Claude.ai and ChatGPT

Download Skill