Is this skill suitable for existing projects?

Absolutely. It is specifically designed to guide the refactoring of existing codebases and identifying performance bottlenecks in legacy components.

Does it support React Server Components (RSC)?

Yes, the skill includes high-priority rules for server-side performance, including serialization optimization and parallel data fetching for RSC.

Can this skill help with React re-render issues?

Yes, it includes specific rules for memoization, stable callbacks, and strategic state placement to minimize unnecessary re-renders.

How does this skill improve Next.js performance?

It applies Vercel-specific rules such as eliminating waterfalls, optimizing bundle sizes via dynamic imports, and leveraging server-side caching to reduce latency.

Vercel React Best Practices

Name: Vercel React Best Practices
Author: Folly-Partners

byFolly-Partners

0•

Design Tools

Optimizes React and Next.js applications using performance guidelines and implementation patterns from Vercel Engineering.

This skill integrates Vercel Engineering's authoritative performance optimization guidelines directly into your development workflow. It features 45 prioritized rules across categories like waterfall elimination, bundle size reduction, and server-side efficiency. Whether you are writing new Next.js pages or refactoring legacy React components, this skill provides the domain-specific logic needed to ensure high-performance, production-grade web applications that adhere to modern industry standards.

Key Features

01Implements advanced JavaScript performance optimizations for high-efficiency data handling

02Eliminates asynchronous waterfalls with parallel fetching and Suspense boundaries

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

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

05Reduces bundle sizes through dynamic imports and barrel file management

060 GitHub stars

Use Cases

01Reviewing pull requests for performance pitfalls and unoptimized React patterns

02Generating new frontend components that follow Vercel's official engineering standards

03Refactoring existing Next.js pages to improve Core Web Vitals and load times

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add folly-partners/claudesync vercel-react-best-practices

For use in Claude.ai and ChatGPT

Download Skill