react-best-practices

Review React and Next.js applications against 57 optimization rules.

4|Updated Feb 8, 2026

Search Tags:#code review #performance #web development #react #optimization #next.js

Ready to run

npx skills add https://github.com/alexgutscher26/ClawTrace --skill react-best-practices-alexgutscher26

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/alexgutscher26/ClawTrace/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/alexgutscher26/ClawTrace --skill react-best-practices-alexgutscher26

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development.

Core Features & Use Cases

Performance Auditing: Identifies and prioritizes performance issues based on impact.
Optimization Guidance: Provides specific, actionable rules for improving waterfalls, bundle size, rendering, and more.
Use Case: A developer is experiencing slow page loads in their Next.js app. They can use this Skill to identify sequential data fetching (waterfalls) and apply best practices like Promise.all or Suspense to parallelize requests.

Quick Start

Use the react-best-practices skill to review the current project 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 fix slow page loads in my Next.js app caused by data fetching waterfalls?▼

Performance auditing in React identifies and prioritizes bottlenecks based on impact, guiding developers through resolving data fetching waterfalls, bundle size, server-side rendering, client-side performance, re-renders, and JavaScript execution issues.

What is the best way to audit React performance and reduce bundle size?▼

Optimization guidance provides specific, actionable rules for improving waterfalls, bundle size, rendering, and more. Use the react-best-practices skill to review your current project for performance issues and apply optimizations for maximum performance gains.

How do I stop unnecessary re-renders in my React application?▼

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development by prioritizing critical optimizations for maximum performance gains.

Does this optimization approach work for both React and Next.js applications?▼

A developer experiencing slow page loads in their Next.js app can use this Skill to identify sequential data fetching and apply best practices to parallelize requests, ensuring faster load times and more efficient development.

How do I review my web development project for performance issues?▼

Performance auditing identifies and prioritizes performance issues based on impact. Optimization guidance provides specific, actionable rules for improving waterfalls, bundle size, rendering, and more for React and Next.js applications.