Can I use this for refactoring existing React projects?

Yes, this skill is specifically designed for writing, reviewing, and refactoring React and Next.js code to align with modern performance patterns.

What kind of bundle optimizations does it suggest?

It provides guidance on avoiding barrel imports, using next/dynamic for heavy components, and deferring third-party scripts until after hydration.

How are the rules prioritized?

Rules are categorized by impact, starting with 'Critical' items like waterfalls and bundle size, followed by 'High' impact server-side performance improvements.

Does it support the Next.js App Router?

Yes, it includes specific rules for Server Components (RSC), server actions, and efficient data serialization between server and client.

How does this skill improve Next.js performance?

The skill applies Vercel-specific engineering rules to eliminate async waterfalls, optimize bundle sizes via dynamic imports, and leverage server-side caching for faster response times.

Vercel React Performance Best Practices

Name: Vercel React Performance Best Practices
Author: peterstorm

bypeterstorm

0•

Design Tools

Optimizes React and Next.js applications using 57 performance-focused rules derived from Vercel Engineering standards.

This skill transforms Claude into a specialized performance engineer for React and Next.js projects by applying 57 rigorous optimization rules maintained by Vercel. It addresses critical performance bottlenecks such as network waterfalls, bloated bundle sizes, and inefficient server-side rendering patterns. By integrating these best practices into your workflow, you can ensure your web applications meet high-performance standards, optimize Core Web Vitals, and implement advanced patterns for data fetching and re-render minimization across both client and server components.

Key Features

01Enhances JavaScript execution speed with optimized loops, Map/Set lookups, and early exits.

02Reduces bundle sizes through dynamic imports, barrel file avoidance, and third-party script deferral.

030 GitHub stars

04Eliminates network waterfalls using parallelized async operations and Suspense boundaries.

05Optimizes server-side execution using React.cache(), LRU strategies, and efficient serialization.

06Minimizes client-side re-renders through strategic memoization and functional state updates.

Use Cases

01Reviewing complex React components to identify and fix unnecessary re-render cycles.

02Refactoring existing Next.js pages to improve page load speed and Core Web Vitals.

03Implementing high-performance data fetching patterns in modern App Router architectures.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add peterstorm/.dotfiles vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill