How does this skill improve Next.js performance?

It applies Vercel-specific engineering rules to eliminate data-fetching waterfalls, optimize server-side rendering, and streamline component hydration.

When should I use the Vercel React Best Practices skill?

Reference this skill whenever you are writing new components, refactoring existing logic for speed, or debugging performance issues in the browser.

Can it help reduce my application's bundle size?

Yes, it provides automated guidance on replacing barrel imports with direct imports and implementing next/dynamic for heavy client-side components.

Does this skill work with the Next.js App Router?

Absolutely. It includes specific patterns for Server Components, Suspense boundaries, and efficient server-to-client data serialization.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: ZhanlinCui

byZhanlinCui

•

Design Tools

Optimizes React and Next.js applications using performance-driven engineering patterns and guidelines from Vercel.

This skill integrates Vercel's authoritative engineering standards into the Claude environment, providing 45 prioritized rules for optimizing modern React and Next.js applications. It empowers Claude to identify and resolve critical performance bottlenecks, such as request waterfalls, bloated bundle sizes, and inefficient server-side serialization. Whether you are refactoring legacy code or building new App Router pages, this skill ensures your project adheres to industry-leading patterns for speed, scalability, and maintainability.

Key Features

01Enhances DOM performance by grouping CSS changes and optimizing SVG rendering.

02Reduces bundle sizes by auditing barrel imports and implementing dynamic loading.

03Improves server-side efficiency with React cache and non-blocking operations.

0417 GitHub stars

05Minimizes client-side re-renders through memoization and state-read optimization.

06Eliminates request waterfalls using parallel fetching and Suspense boundaries.

Use Cases

01Implementing complex data fetching logic in Next.js App Router projects.

02Refactoring Next.js applications to improve Core Web Vitals and load times.

03Conducting automated performance audits during code reviews for React components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhanlincui/ultimate-agent-skills-collection vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill

Key Features

01Enhances DOM performance by grouping CSS changes and optimizing SVG rendering.

02Reduces bundle sizes by auditing barrel imports and implementing dynamic loading.

03Improves server-side efficiency with React cache and non-blocking operations.

0417 GitHub stars

05Minimizes client-side re-renders through memoization and state-read optimization.

06Eliminates request waterfalls using parallel fetching and Suspense boundaries.

Use Cases

01Implementing complex data fetching logic in Next.js App Router projects.

02Refactoring Next.js applications to improve Core Web Vitals and load times.

03Conducting automated performance audits during code reviews for React components.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add zhanlincui/ultimate-agent-skills-collection vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill