react-best-practices

Apply React and Next.js performance best practices to optimize rendering, data fetching, and bundle size.

12|1|Updated May 29, 2026

Search Tags:#performance #react #nextjs #ssr #bundle #web-vitals

Ready to run

npx skills add https://github.com/qdzsh/gsd-revamp --skill react-best-practices-qdzsh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/qdzsh/gsd-revamp/tree/main/src/resources/skills/react-best-practices
Command: npx skills add https://github.com/qdzsh/gsd-revamp --skill react-best-practices-qdzsh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides a comprehensive set of React and Next.js performance guidelines to help teams write faster, more maintainable UI code.

Core Features & Use Cases

Covers server components, client components, data fetching, rendering optimizations, and bundle size considerations.
Offers concrete, battle-tested rules and patterns for real-world projects, with use cases spanning new code and refactors.

Quick Start

Review your React/Next.js codebase and apply these performance guidelines to start improving rendering speed, data fetch efficiency, and bundle size.

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 rendering performance?▼

Optimize React and Next.js rendering performance by applying rules for server components, client components, and suspense boundaries. This skill enforces concrete patterns for rendering and data fetching to achieve faster load times and better UX.

What's the best way to reduce bundle size in a Next.js application?▼

Reduce bundle size in a Next.js application by enforcing code-splitting and prudent data handling patterns. This skill provides battle-tested guidelines for bundle size considerations to optimize your web vitals.

How does server actions and suspense work in Next.js performance optimization?▼

Server actions and suspense in Next.js performance optimization work by enforcing safety-conscious rules for data fetching and rendering. These patterns ensure faster load times and better UX across server and client components.

Can I use these React performance guidelines for refactoring existing code?▼

Yes, you can use these React performance guidelines for refactoring existing code. The skill is applicable when writing, reviewing, or refactoring React/Next.js codebases across components, pages, and server components.

When do I need to apply web vitals best practices to my React codebase?▼

Apply web vitals best practices to your React codebase when writing, reviewing, or refactoring code. This skill provides performance guidelines for rendering, data fetching, and bundle size to achieve faster load times.