Is this skill compatible with existing Next.js projects?

Absolutely; it is designed to be used during code reviews, refactoring sessions, or when writing new components in any modern React or Next.js environment.

What are the highest priority optimizations in this skill?

The skill prioritizes 'Eliminating Waterfalls' and 'Bundle Size Optimization' as critical impacts that most significantly affect user-perceived performance.

How does this skill improve Next.js performance?

It applies 57 specific rules for eliminating waterfalls, optimizing server-side rendering, and reducing bundle sizes based on Vercel's engineering standards.

Can this skill help with React re-render issues?

Yes, it includes specific categories for re-render optimization, including memoization strategies, functional setState usage, and derived state management.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: monmacllcapp

bymonmacllcapp

0•

Design Tools

Optimizes React and Next.js applications using 57 industry-leading performance patterns and automated refactoring rules from Vercel Engineering.

The Vercel React Best Practices skill integrates a comprehensive performance optimization framework directly into Claude Code, enabling developers to build faster, more efficient frontend applications. It provides high-impact guidance across eight critical categories, including waterfall elimination, bundle size reduction, and server-side performance. By applying these rules during code generation or refactoring, the skill ensures that React components and Next.js pages follow the same high-performance standards used by Vercel's core engineering teams to minimize hydration flicker and maximize Core Web Vitals.

Key Features

01Reduces bundle sizes by identifying barrel imports and implementing dynamic imports.

020 GitHub stars

03Eliminates asynchronous waterfalls through parallel data fetching and Suspense boundaries.

04Prevents performance-degrading re-renders using advanced memoization and derived state patterns.

05Improves JavaScript execution speed with optimized DOM batching and O(1) lookups.

06Optimizes server-side performance with React.cache() and minimized data serialization.

Use Cases

01Conducting a performance-focused code review for a complex React component library.

02Implementing efficient server-side data fetching patterns in a high-traffic production application.

03Refactoring a legacy Next.js page to improve page load speed and eliminate data waterfalls.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add monmacllcapp/skill-forks react-best-practices

For use in Claude.ai and ChatGPT

Download Skill