react-best-practices

Apply 40+ performance rules to optimize React and Next.js applications.

Updated Jan 29, 2026
One-click install
npx skills add https://github.com/raduceuca/wcgw-fun --skill react-best-practices-raduceuca
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/raduceuca/wcgw-fun/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/raduceuca/wcgw-fun --skill react-best-practices-raduceuca

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring code is efficient, fast, and scalable.

Core Features & Use Cases

  • Performance Optimization: Provides over 40 rules across 8 categories to improve React/Next.js app speed.
  • Code Refactoring: Guides developers in writing, reviewing, and refactoring code for optimal performance.
  • Use Case: When developing a new feature in a Next.js app, use this Skill to ensure data fetching patterns are efficient and component rendering is optimized to prevent slow load times.

Quick Start

Apply the react-best-practices skill to review the provided React component for performance issues.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I optimize React and Next.js application performance?

To optimize React and Next.js performance, apply a comprehensive set of over 40 rules across 8 categories, prioritizing critical patterns like eliminating data fetching waterfalls and reducing bundle size.

What is the best way to review React components for performance bottlenecks?

Reviewing React components for performance bottlenecks involves applying comprehensive optimization rules that check data fetching patterns and component rendering efficiency to prevent slow load times.

How do I eliminate data fetching waterfalls in Next.js?

Eliminate data fetching waterfalls in Next.js by applying targeted performance optimization rules that guide automated refactoring, ensuring data fetching patterns are efficient and parallelized.

Can I use this to guide refactoring for React code generation?

Yes, you can use this to guide refactoring and code generation for React applications, applying over 40 optimization rules to ensure the generated code is efficient, fast, and scalable.

Why does my Next.js app have slow load times when developing new features?

Slow load times in Next.js apps often occur when data fetching patterns are inefficient and component rendering is unoptimized, requiring rule-based refactoring to ensure efficiency.