Can I use this for automated refactoring?

Yes, the skill is designed to assist in writing new components, reviewing existing code, and performing automated refactoring for better performance.

Does it cover server-side optimization?

Absolutely, it includes dedicated rules for React.cache, server-side serialization, and parallel fetching to maximize server-side efficiency.

How does this skill improve application speed?

It identifies and fixes performance bottlenecks like request waterfalls, large bundle sizes, and excessive re-renders using Vercel-recommended patterns.

What frameworks does this skill support?

This skill is specifically optimized for React and Next.js applications, covering both client-side and server-side performance patterns.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: claudiodearaujo

byclaudiodearaujo

0•

Herramientas de Diseño

Optimizes React and Next.js applications by applying Vercel-engineered performance patterns and architectural best practices.

This skill implements 45 expert-level performance optimization rules derived from Vercel Engineering's best practices for React and Next.js development. It provides domain-specific guidance for eliminating request waterfalls, minimizing bundle sizes, and optimizing both server-side and client-side rendering. By integrating these patterns directly into your development workflow, the skill helps identify and resolve performance bottlenecks during the writing, reviewing, or refactoring phases to ensure highly responsive, production-grade web applications.

Características Principales

01Eliminates network waterfalls with parallel fetching and deferred awaits

02Enhances rendering performance via content-visibility and SVG precision optimizations

03Minimizes client-side re-renders with memoization and derived state patterns

04Optimizes server-side performance using React.cache and non-blocking operations

050 GitHub stars

06Reduces bundle size through dynamic imports and optimized barrel file handling

Casos de Uso

01Refactoring Next.js pages to improve Core Web Vitals and PageSpeed scores

02Automating code reviews to catch common React performance pitfalls like unnecessary re-renders

03Implementing efficient data fetching strategies for complex server-rendered applications

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add claudiodearaujo/izacenter react-best-practices

For use in Claude.ai and ChatGPT

Download Skill