Can this skill help with React re-render issues?

Yes, it provides specific rules for optimizing state management, using derived state, and applying startTransition for non-urgent updates to minimize unnecessary renders.

How does this skill improve Next.js performance?

It applies Vercel Engineering guidelines to optimize server-side rendering, data fetching, and bundle splitting using techniques like dynamic imports and React.cache.

What is the priority system used by this skill?

The skill categorizes optimizations into 8 priority levels, focusing first on critical impacts like eliminating waterfalls and reducing bundle size before moving to lower-impact JS tweaks.

Is this skill compatible with standard React applications?

While it includes Next.js specific optimizations, many of the rules apply to standard React patterns, data fetching, and general JavaScript performance improvements.

React Performance Best Practices

Name: React Performance Best Practices
Author: jjeremycai

byjjeremycai

0•

Design Tools

Optimizes React and Next.js applications using Vercel Engineering guidelines to ensure high-performance code and efficient bundle sizes.

This skill equips Claude with over 40 prioritized performance optimization rules sourced from Vercel Engineering standards for modern React and Next.js development. It provides automated guidance for eliminating async waterfalls, reducing bundle sizes through dynamic imports, and optimizing server-side rendering patterns. Whether refactoring legacy components or building new Next.js App Router pages, this skill ensures your code follows industry-leading patterns for speed, scalability, and optimal user experience.

Key Features

01Minimize client-side re-renders through efficient state management and lazy initialization.

02Eliminate async waterfalls with optimized Promise handling and Suspense boundaries.

03Optimize server-side performance with React.cache and per-request deduplication.

040 GitHub stars

05Reduce bundle sizes using next/dynamic and direct source imports.

06Enhance rendering performance using content-visibility and efficient SVG handling.

Use Cases

01Reviewing React component code to identify and fix unnecessary re-renders or hydration mismatches.

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

03Implementing efficient data fetching strategies for complex dashboard applications.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add jjeremycai/claudekit react-best-practices

For use in Claude.ai and ChatGPT

Download Skill