vercel-react-best-practices

Optimize React and Next.js performance with 58 rules across 8 categories.

Updated Mar 5, 2026
One-click install
npx skills add https://github.com/Pontusg45/fubbik --skill vercel-react-best-practices-pontusg45
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Pontusg45/fubbik/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Pontusg45/fubbik --skill vercel-react-best-practices-pontusg45

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices to significantly improve the performance of React and Next.js applications, addressing issues from critical waterfalls to minor JavaScript optimizations.

Core Features & Use Cases

  • Performance Optimization: Offers over 50 rules categorized by impact (Critical, High, Medium, Low) for targeted improvements.
  • Code Refactoring: Guides developers in writing, reviewing, and refactoring React/Next.js code for optimal speed and efficiency.
  • Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized, and server-side rendering is efficient, leading to faster load times and a better user experience.

Quick Start

Apply the React best practices to optimize the performance of the provided Next.js code.

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 during development?▼

To optimize React and Next.js performance, apply over 50 categorized rules covering critical waterfalls, bundle size minimization, server-side rendering efficiency, and re-render optimization to significantly improve application load times and user experience.

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

Eliminating data fetching waterfalls in Next.js requires parallelizing data fetches and optimizing server-side performance, guided by specific high-impact rules for data fetching and advanced patterns to ensure efficient load times.

How do I reduce bundle size in a React application?▼

Reducing bundle size in a React application involves applying targeted optimization rules categorized by impact, ensuring efficient code refactoring and bundle size minimization to improve overall client-side performance and speed.

Does this React optimization guidance cover server-side rendering performance?▼

Yes, this React optimization guidance covers server-side rendering performance, offering specific rules for Next.js pages and server-side execution alongside client-side data fetching and JavaScript performance improvements.

When do I need React performance optimization rules for code refactoring?▼

You need React performance optimization rules for code refactoring when developing new features, reviewing components, or addressing tasks involving data fetching, bundle optimization, and re-render improvements in React and Next.js applications.