Is this skill compatible with the Next.js App Router?

Absolutely. It contains specific high-priority rules for Server Components, including server-side caching, data serialization, and parallel fetching patterns.

What is the Vercel React Best Practices skill?

It is a specialized capability for Claude Code that provides automated guidance based on 45 performance optimization rules curated by Vercel Engineering for React and Next.js development.

How does this skill help with bundle size optimization?

The skill identifies opportunities to use dynamic imports (next/dynamic), avoid heavy barrel files, and defer third-party scripts to ensure faster page hydration.

Can this skill help resolve async waterfalls?

Yes, it applies rules like async-parallel and async-suspense-boundaries to help you transition from sequential awaits to parallelized data fetching and streaming.

Does it provide specific code examples for refactoring?

Yes, the skill includes detailed 'correct' vs 'incorrect' code patterns across eight categories to guide automated code generation and manual reviews.

Vercel React Performance Best Practices

Name: Vercel React Performance Best Practices
Author: usermaum

byusermaum

0•

Developer Tools

Optimizes React and Next.js applications using Vercel Engineering's 45 performance-driven coding rules and patterns.

This skill integrates Vercel Engineering's comprehensive performance guidelines into the Claude Code environment to help developers build faster, more efficient React and Next.js applications. It provides 45 prioritized rules covering critical areas such as eliminating async waterfalls, optimizing bundle sizes, and improving server-side rendering performance. Whether you are refactoring legacy code or scaffolding new features, this skill ensures your implementation follows industry-leading patterns for bundle optimization, re-render minimization, and efficient data fetching to improve Core Web Vitals and user experience.

Key Features

01Reduces JavaScript bundle sizes through dynamic imports and optimized barrel file usage.

02Optimizes server-side execution with React cache deduplication and non-blocking operations.

03Minimizes client-side re-renders via memoization, derived state, and functional updates.

04Improves JavaScript execution efficiency using optimized loops, Set/Map lookups, and early exits.

05Eliminates asynchronous waterfalls using parallel fetching and Suspense boundaries.

060 GitHub stars

Use Cases

01Refactoring complex React components to reduce unnecessary re-renders and CPU usage.

02Implementing efficient data fetching strategies in Next.js App Router and Server Components.

03Auditing Next.js applications for Core Web Vitals and LCP improvements.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add usermaum/themoon vercel-react-best-practices

For use in Claude.ai and ChatGPT

Key Features

01Reduces JavaScript bundle sizes through dynamic imports and optimized barrel file usage.

02Optimizes server-side execution with React cache deduplication and non-blocking operations.

03Minimizes client-side re-renders via memoization, derived state, and functional updates.

04Improves JavaScript execution efficiency using optimized loops, Set/Map lookups, and early exits.

05Eliminates asynchronous waterfalls using parallel fetching and Suspense boundaries.

060 GitHub stars

Use Cases

01Refactoring complex React components to reduce unnecessary re-renders and CPU usage.

02Implementing efficient data fetching strategies in Next.js App Router and Server Components.

03Auditing Next.js applications for Core Web Vitals and LCP improvements.