How does this skill handle React network waterfalls?

The skill identifies sequential await statements and suggests parallelizing them using Promise.all() or utilizing Suspense boundaries for streaming content.

What is the Vercel React Best Practices skill?

It is a specialized configuration for Claude Code that applies 45 engineering rules from Vercel to optimize React and Next.js code for maximum performance.

Is this skill compatible with React Server Components (RSC)?

Yes, it includes a dedicated category for Server-Side Performance, including rules for React.cache deduplication and minimizing data serialization between server and client.

Can this skill reduce my Next.js bundle size?

Yes, it provides specific guidance on avoiding barrel imports, using next/dynamic for heavy components, and deferring non-critical third-party scripts.

Vercel React & Next.js Best Practices

Name: Vercel React & Next.js Best Practices
Author: nahuelsoria

bynahuelsoria

0•

Design Tools

Optimizes React and Next.js applications using Vercel Engineering's high-impact performance rules and patterns.

This skill integrates Vercel Engineering's comprehensive performance framework directly into your development workflow. It provides 45 prioritized rules across categories like waterfall elimination, bundle size optimization, and server-side performance to ensure your React and Next.js projects are production-ready. By applying these guidelines, Claude can automatically identify performance bottlenecks, refactor inefficient data fetching, and implement advanced rendering patterns that improve Core Web Vitals and user experience.

Key Features

01Reduces unnecessary re-renders through memoization and derived state patterns

02Eliminates network waterfalls using parallel fetching and Suspense boundaries

03Optimizes bundle sizes by identifying barrel imports and implementing dynamic loading

040 GitHub stars

05Enhances server-side performance via React.cache and non-blocking operations

06Implements advanced JavaScript optimizations for DOM manipulation and data structures

Use Cases

01Implementing efficient data fetching strategies in React Server Components

02Performing automated code reviews to enforce industry-standard performance patterns

03Refactoring existing Next.js pages to improve load times and SEO scores

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add nahuelsoria/nahuelsoria vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill