react-best-practices

Name: react-best-practices
Availability: InStock
Author: velcrafting

Apply React and Next.js performance guidelines during component creation and code reviews.

1|Updated Jan 13, 2026

Search Tags:#performance #react #optimization #nextjs #best-practices #bundling #code-review

Ready to run

npx skills add https://github.com/velcrafting/codex-skills --skill react-best-practices-velcrafting

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/velcrafting/codex-skills/tree/main/skills/vercel/react-best-practices
Command: npx skills add https://github.com/velcrafting/codex-skills --skill react-best-practices-velcrafting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React and Next.js projects often struggle with performance due to scattered, inconsistent patterns. This Skill consolidates 40+ rules across 8 categories to provide a cohesive set of guidelines that drive faster, more reliable UI and improved bundle performance.

Core Features & Use Cases

Prioritized performance patterns across 8 categories: Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
Use cases include writing new React components or Next.js pages, reviewing code for performance issues, refactoring existing code to reduce re-renders, and optimizing bundle size or load times.
Real-world scenario: apply these guidelines during development and code reviews to achieve faster initial paints and better interactivity.

Quick Start

Use these guidelines when starting React/Next.js work to embed performance best practices from the ground up.

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 performance during component creation?▼

Optimize React performance by applying over 40 consolidated rules across 8 categories to eliminate render waterfalls, optimize bundle size, and enforce server-side data fetching patterns during component creation.

What are the best practices for reducing re-renders in React applications?▼

Reducing re-renders involves applying prioritized performance patterns for rendering optimization and client-side data deduplication, ensuring faster initial paints and better interactivity without inconsistent scattered code.

How do I eliminate data fetching waterfalls in Next.js pages?▼

Eliminate Next.js data fetching waterfalls by enforcing server-side fetching patterns and client-side deduplication with safe automation, consolidating 40+ rules to drive faster initial paints and reliable UI.

Can I use these React performance guidelines for code reviews?▼

Yes, you can apply these prioritized performance patterns during code reviews to identify waterfall elimination, bundle optimization, and re-render issues across React and Next.js applications.

How do I optimize bundle size for React and Next.js applications?▼

Optimize bundle size by applying specific guidelines from the Bundle Size Optimization category, which form part of 40+ prioritized rules across 8 categories to improve load times and UI responsiveness.