vercel-react-best-practices

Optimize React and Next.js code with performance rules for data fetching and bundle size.

Updated Jan 27, 2026

Search Tags:#code quality #best practices #performance #react #optimization #next.js

Ready to run

npx skills add https://github.com/Hoang130203/Emgu_CV_automation --skill vercel-react-best-practices-hoang130203

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of rules and guidelines to optimize the performance of React and Next.js applications, addressing issues from critical waterfalls to incremental JavaScript improvements.

Core Features & Use Cases

Performance Optimization: Apply best practices for eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
Code Refactoring: Use detailed examples to refactor code for better performance and maintainability.
Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure data fetching is parallelized, components are memoized correctly, and the initial bundle size is minimized for faster load times.

Quick Start

Apply the React best practices to optimize the provided code snippet for performance.

Frequently Asked Questions about vercel-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 by eliminating data fetching waterfalls?▼

To optimize React and Next.js performance, you must parallelize data fetching to eliminate waterfalls. This prevents sequential network requests from blocking rendering, ensuring server-side and client-side data load concurrently for faster page loads.

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

The best way to reduce Next.js bundle size is applying structured optimization rules to minimize initial JavaScript payloads. This involves code splitting and careful component management to ensure faster load times and improved code quality.

How do I stop unnecessary component re-renders in React?▼

To stop unnecessary React component re-renders, apply correct memoization techniques guided by structured refactoring rules. This optimizes JavaScript performance by preventing wasted render cycles when component inputs remain unchanged.

Can I use these optimization rules to refactor existing code automatically?▼

Yes, you can use these optimization rules to refactor existing code automatically. The guidelines are structured to direct AI agents and LLMs in automated code generation and performance refactoring for React and Next.js applications.

Does this Skill cover both server-side and client-side rendering optimization?▼

Yes, this Skill covers both server-side and client-side rendering optimization. It provides specific rules for data fetching and rendering strategies across both environments to ensure comprehensive React and Next.js performance improvements.