react-perf

Review React and Next.js projects for performance bottlenecks.

2|5|Updated Jan 2, 2026

Search Tags:#performance #react #optimization #rendering #nextjs #data-fetching #bundle-size

Ready to run

npx skills add https://github.com/whoabuddy/claude-knowledge --skill react-perf

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-perf
Source: https://github.com/whoabuddy/claude-knowledge/tree/main/claude-config/skills/react-perf
Command: npx skills add https://github.com/whoabuddy/claude-knowledge --skill react-perf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Streamlines the process of identifying and applying React/Next.js performance optimizations to improve user experience and reduce load times.

Core Features & Use Cases

Universal performance rules for React apps, plus Next.js specific optimizations for data fetching, bundle size, and rendering.
Use Cases: optimize a slow page, diagnose waterfall issues, or tune bundle splits in a Next.js project.

Quick Start

Run the React performance review workflow on a Next.js project to identify critical bottlenecks and apply the suggested optimizations.

Frequently Asked Questions about react-perf

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

FAQPage Schema

How do I optimize React rendering performance in a Next.js project?▼

To optimize React rendering performance, apply universal rules plus Next.js-specific guidelines to identify bottlenecks in render times, bundle sizes, and data-fetching patterns. You get actionable, testable recommendations to reduce load times and improve user experience.

What's the best way to diagnose data fetching waterfall issues in Next.js?▼

Diagnosing Next.js data fetching waterfall issues involves reviewing your data-fetching patterns against Next.js-specific optimization guidelines. The process identifies critical bottlenecks in sequential requests and provides actionable recommendations to tune fetching strategies.

How can I reduce bundle size for a slow Next.js page?▼

Reducing bundle size for a slow Next.js page requires tuning bundle splits and applying universal React performance rules. The workflow reviews bundle composition, identifies heavy dependencies, and suggests optimizations to streamline load times.

Does this React performance guidance work for non-Next.js React apps?▼

React performance guidance includes universal performance rules that apply to standard React apps, alongside Next.js-specific optimizations. If your project uses React without Next.js, the universal rendering and bundle size rules still provide actionable recommendations.

Why does my Next.js page have slow render times after data fetching?▼

Slow Next.js render times after data fetching often stem from waterfall issues or unoptimized rendering patterns. Reviewing the project against Next.js-specific performance guidelines identifies bottlenecks and yields testable recommendations to resolve delays.