react-best-practices

Audits React and Next.js apps against 57 performance rules.

8|1|Updated Dec 28, 2025
One-click install
npx skills add https://github.com/officebeats/beats-pm-kit --skill react-best-practices-officebeats
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/officebeats/beats-pm-kit/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/officebeats/beats-pm-kit --skill react-best-practices-officebeats

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses common 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 critical issues like waterfalls, large bundle sizes, and unnecessary re-renders.
  • Optimization Strategies: Provides actionable rules for eliminating waterfalls, optimizing bundles, and improving server-side rendering.
  • Use Case: A developer can use this Skill to review their Next.js application before launch, ensuring it meets performance best practices and provides an optimal user experience.

Quick Start

Use the react-best-practices skill to audit 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 eliminate data waterfalls and reduce bundle size in my Next.js app?

To eliminate data waterfalls and reduce bundle size, you can audit your Next.js app using 57 optimization rules derived from Vercel Engineering best practices. This structured guidance identifies critical performance issues and provides actionable strategies to improve server-side rendering and client-side performance.

What is the best way to audit a React application for performance bottlenecks before launch?

The best way to audit React performance bottlenecks is to apply a comprehensive set of optimization rules that identify large bundle sizes, unnecessary re-renders, and waterfalls. This process ensures your application meets performance best practices and delivers an optimal user experience before launch.

How do I optimize server-side rendering in React and Next.js?

You optimize server-side rendering by following actionable rules focused on reducing waterfalls and improving client-side performance. These structured guidelines ensure faster load times and smoother user experiences in your React and Next.js applications.

Can I use these React optimization rules to review an existing web development project?

Yes, you can use these React optimization rules to review an existing web development project. The skill performs performance auditing to identify critical issues like unnecessary re-renders and large bundles, providing actionable strategies for optimization.

Why does my React application have slow load times and unnecessary re-renders?

Slow load times and unnecessary re-renders often stem from common performance bottlenecks like waterfalls and large bundle sizes. Applying structured optimization rules derived from Vercel Engineering best practices helps identify and eliminate these issues for smoother user experiences.