skills.rest
Come0520
Come0520COMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Review React and Next.js components against 40 performance optimization rules.

Updated Dec 1, 2025
Search Tags:#best practices#performance#react#optimization#bundle size#rendering#next.js
One-click install
npx skills add https://github.com/Come0520/L2C --skill react-best-practices-come0520
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Come0520/L2C/tree/main/.agent/skills/react-best-practices
Command: npx skills add https://github.com/Come0520/L2C --skill react-best-practices-come0520

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, helping developers optimize rendering, reduce bundle sizes, and eliminate waterfalls for a faster user experience.

Core Features & Use Cases

  • Performance Auditing: Identifies over 40 specific rules for optimization across critical areas like bundle size, rendering, and data fetching.
  • Code Refactoring Guidance: Provides concrete examples of incorrect vs. correct code for each optimization rule.
  • Use Case: A developer notices their Next.js app has slow initial load times. They use this Skill to identify and fix issues related to large bundle sizes and inefficient data fetching patterns.

Quick Start

Use the react-best-practices skill to review the performance of the current React component.

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 rendering performance by applying over 40 specific rules that target bundle sizes, inefficient data fetching, and waterfalls to significantly improve application load times.

What causes slow initial load times in Next.js and how do I fix it?▼

Slow Next.js load times are often caused by large bundle sizes and inefficient data fetching. Identify and fix these performance bottlenecks using concrete incorrect versus correct code examples.

How do I eliminate data fetching waterfalls in React applications?▼

Eliminate data fetching waterfalls in React by following specific optimization rules for server-side and client-side fetching, ensuring parallel data retrieval rather than sequential blocking requests.

Can I use these React performance rules to audit my existing components?▼

Yes, you can review the performance of existing React components against over 40 critical rules covering bundle size, rendering, and data fetching to identify and resolve optimization issues.

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

The best way to reduce Next.js bundle size involves applying specific optimization rules that provide detailed explanations and code examples for refactoring inefficient imports and dependencies.

Does this React optimization guidance include code examples for fixing performance issues?▼

Yes, React optimization guidance includes concrete examples of incorrect versus correct code for each of the over 40 rules, helping developers accurately refactor for rendering and bundle improvements.

Related Skills

Explore More Software Engineering Skills→
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
aayushsharma141aayushsharma141

vercel-react-best-practices

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

Community
Advanced
xenitV1xenitV1
132

performance-profiling

Automate Lighthouse-based performance profiling to identify web application bottlenecks.

Community
Advanced