react-best-practices

Identify React/Next.js performance bottlenecks and generate targeted optimizations.

27|9|Updated Jan 4, 2026

Search Tags:#performance #react #rendering #next.js #bundle-size #server-rendering

Ready to run

npx skills add https://github.com/georgekhananaev/claude-skills-vault --skill react-best-practices-georgekhananaev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/georgekhananaev/claude-skills-vault/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/georgekhananaev/claude-skills-vault --skill react-best-practices-georgekhananaev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js performance pitfalls hamper user experience. This Skill provides a structured set of rules to improve rendering speed, reduce latency, and optimize bundles across modern React apps.

Core Features & Use Cases

Comprehensive rules: 45 guidelines across 8 categories to guide automated refactoring and code generation.
Code review and optimization: Helps teams identify perf bottlenecks in components, data fetching, and rendering paths.
Use Case: Apply to a new or existing React/Next.js project to reduce waterfalls, cut bundle size, and improve SSR/CSR performance.

Quick Start

Run the skill against a React/Next.js project root to generate a prioritized performance improvement checklist.

Frequently Asked Questions about react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I identify React and Next.js performance bottlenecks in my project?▼

Identifying React and Next.js performance bottlenecks involves analyzing data fetching, rendering paths, and bundle management against a structured rule set. This process isolates waterfalls and re-render issues to generate targeted optimizations.

What is the best way to reduce bundle size and eliminate data waterfalls in Next.js?▼

The best way to reduce bundle size and eliminate Next.js data waterfalls is applying targeted optimizations based on 45 comprehensive guidelines. These rules guide automated refactoring to improve server-side rendering and client data fetching efficiency.

How do I optimize React re-rendering and server-side rendering performance?▼

Optimizing React re-rendering and server-side rendering performance requires applying targeted improvements across data fetching and rendering paths. This eliminates unnecessary re-renders and enhances SSR efficiency through structured code review and refactoring.

Can I use this approach for code reviews and automated refactoring of existing React apps?▼

Yes, you can use this approach for code reviews and automated refactoring of existing React apps. It identifies performance pitfalls and generates automated improvements by checking code against 45 guidelines across 8 categories.

Do I need a specific Next.js version to apply these rendering and bundle size optimizations?▼

No specific Next.js version is required to apply these rendering and bundle size optimizations. The guidelines target modern React and Next.js architectures, focusing on universal patterns for server-side rendering and performance improvements.