skills.rest
Dwsy
DwsyCOMMUNITY
Explore all skills by this author →
𝕏@DwsyyyGitHub

react-best-practices

Identify and implement React performance best practices for modern web applications.

18|3|Updated Jan 8, 2026
Search Tags:#performance#react#rendering#next.js#code-review#bundle-size
One-click install
npx skills add https://github.com/Dwsy/agent --skill react-best-practices-dwsy
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Dwsy/agent/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/Dwsy/agent --skill react-best-practices-dwsy

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Comprehensive guide to optimize React and Next.js performance, helping teams eliminate rendering bottlenecks and reduce bundle sizes.

Core Features & Use Cases

  • 40+ rules organized by impact levels for systematic performance improvements.
  • Guidance across key areas: eliminating waterfalls, bundle-size optimization, server-side and client-side performance, and advanced patterns.
  • Use cases include optimizing existing apps, performing code reviews, and guiding performance-minded feature development.

Quick Start

Run a performance audit on a React project and apply the top three rules to achieve noticeable improvements.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
What are the most impactful React performance best practices to reduce bundle size and rendering bottlenecks?▼

React performance best practices involve applying a structured catalog of over 40 rules organized by impact level to eliminate rendering waterfalls and reduce bundle size in modern web applications.

How do I optimize my existing Next.js app to improve metrics like LCP and TTI?▼

To optimize an existing Next.js app, apply performance best practices across server-side and client-side rendering, using practical guidelines and metrics like TTI and LCP to drive measurable improvements.

Can I use this React performance guide for code reviews and feature development?▼

Yes, this React performance guide is designed for use cases including performing code reviews and guiding performance-minded feature development in React and Next.js applications.

What is the best way to start improving React rendering performance without a complete rewrite?▼

The best way to start improving React rendering performance is to run a performance audit on your project and apply the top three rules from the impact catalog to achieve noticeable improvements quickly.

Does this React optimization guide cover eliminating data fetching waterfalls?▼

Yes, this React optimization guide provides specific guidance across key areas including eliminating waterfalls, bundle-size optimization, server-side performance, and advanced rendering patterns.

Why does my React app have rendering bottlenecks and how can I systematically fix them?▼

Rendering bottlenecks in your React app occur from inefficient rendering patterns, which you can systematically fix by following a structured catalog of over 40 performance rules organized by impact level.

Related Skills

Explore More Software Engineering Skills→
mashharukimashharuki

vercel-react-best-practices

Applies Vercel performance optimization rules when writing or refactoring React and Next.js code.

Community
Intermediate
achmfachmf

performance-profiling

Run Lighthouse audits to analyze Core Web Vitals and rendering bottlenecks.

Community
Intermediate
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced