skills.rest
rafael-hc
rafael-hcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

react-best-practices

Provides performance optimization guidelines for React and Next.js applications.

Updated Mar 11, 2026
Search Tags:#code quality#developer tools#performance#react#optimization#next.js
One-click install
npx skills add https://github.com/rafael-hc/AoPonto-FoodService --skill react-best-practices-rafael-hc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/rafael-hc/AoPonto-FoodService/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/rafael-hc/AoPonto-FoodService --skill react-best-practices-rafael-hc

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes 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 interactions, and more efficient code.

Core Features & Use Cases

  • Performance Optimization: Provides over 50 rules covering waterfalls, bundle size, server-side rendering, client-side fetching, re-renders, and JavaScript execution.
  • AI-Assisted Development: Designed for agents and LLMs to maintain, generate, or refactor React/Next.js codebases for optimal performance.
  • Use Case: When developing a new feature in a Next.js app, use this Skill to ensure all data fetching is parallelized, components are memoized correctly, and bundle sizes are minimized, leading to a significantly better user experience.

Quick Start

Apply the react-best-practices skill to refactor the provided React component code for improved performance.

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 application performance for faster load times?▼

Optimize React and Next.js performance by applying over 50 rules covering waterfall elimination, bundle size reduction, server-side efficiency, client-side data fetching, and JavaScript execution. This ensures faster load times and smoother user interactions.

What is the best way to eliminate data fetching waterfalls in Next.js?▼

Eliminate Next.js data fetching waterfalls by parallelizing data requests and optimizing server-side rendering efficiency. This prevents sequential loading delays and significantly improves overall page load performance.

How does an AI agent refactor React components to reduce bundle size?▼

An AI agent refactors React components to reduce bundle size by applying automated optimization guidelines for JavaScript execution and code splitting. This minimizes the final payload delivered to the client.

Can I use these React performance guidelines for automated code generation?▼

Yes, you can use these React performance guidelines for automated code generation and refactoring. The rules adhere to Vercel Engineering standards, enabling AI agents to maintain optimal code quality.

Why does my React application experience slow re-renders and inefficient rendering?▼

Slow React re-renders occur when components are not memoized correctly or JavaScript execution is unoptimized. Applying targeted rendering optimization rules resolves these bottlenecks and smooths user interactions.

Related Skills

Explore More Software Engineering Skills→
loagmaloagma

vercel-react-best-practices

Apply rule-based React/Next.js performance patterns to codebases.

Community
Advanced
etylsarinetylsarin
59

performance-optimization

Analyze profiling data and bundle metrics to recommend performance fixes.

Community
Intermediate
sambersamber
2.9k

golang-lint

Configure and run golangci-lint to analyze Go projects and interpret results.

Community
Advanced
DITEKmaxDITEKmax

vercel-react-best-practices

Optimize React and Next.js code to reduce latency and bundle size.

Community
Advanced