skills.rest
cortezalberto
cortezalbertoCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply 57 prioritized React/Next.js performance rules across 8 categories.

Updated Jan 12, 2026
Search Tags:#performance#react#optimization#next.js#best-practices#bundle-size
One-click install
npx skills add https://github.com/cortezalberto/chile --skill vercel-react-best-practices-cortezalberto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cortezalberto/chile/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/cortezalberto/chile --skill vercel-react-best-practices-cortezalberto

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects frequently struggle with performance and maintainability as they scale. Vercel React Best Practices provides a consolidated, actionable reference to apply proven patterns for faster rendering, smaller bundles, and reliable server/client data handling.

Core Features & Use Cases

  • 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
  • Clear guidance for eliminating waterfalls, bundle-size optimizations, server-side performance, client-side data fetching, re-render strategies, rendering performance, JavaScript micro-optimizations, and advanced patterns.
  • Practical use cases for building, reviewing, or refactoring React/Next.js code, including pages, components, data fetching, and bundle optimization.

Quick Start

Read the guidelines and apply the most relevant rules to your current React/Next.js task, focusing on performance-critical areas like data fetching, SSR, and bundle size.

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 bundle size and rendering performance?▼

To optimize React and Next.js performance, apply a prioritized set of rules targeting bundle size, server-side rendering, and data fetching to eliminate waterfalls and reduce loading times.

What are the best practices for data fetching in Next.js to avoid waterfalls?▼

Best practices for Next.js data fetching involve applying rules that eliminate waterfalls by prioritizing parallel data retrieval and reliable server/client data handling patterns.

How do I reduce unnecessary re-renders in React components?▼

Reduce React component re-renders by applying targeted rendering performance rules and JavaScript micro-optimizations, prioritizing refactoring efforts based on their overall performance impact.

Does this React optimization approach work for existing Next.js pages?▼

Yes, this approach works for existing Next.js pages by guiding automated refactoring across components, data fetching, and bundle optimization to improve overall performance.

What's the best way to refactor React code for faster loading times?▼

The best way to refactor React code for faster loading times is to apply a comprehensive set of 57 performance guidelines prioritized by impact across 8 distinct categories.

Related Skills

Explore More Software Engineering Skills→
yeohj0710yeohj0710

vercel-react-best-practices

Identify and fix React/Next.js performance bottlenecks using prioritized rules.

Community
Advanced
YeomanYeYeomanYe

vercel-react-best-practices

Apply 69 React/Next.js performance rules across 8 categories.

Community
Advanced
Tai-ch0802Tai-ch0802
2

react-best-practices

Audit React and Next.js projects for performance bottlenecks and optimization opportunities.

Community
Intermediate
bsreeram08bsreeram08
7

Swift Performance Optimization Skill

Optimize Swift code performance using Instruments profiling and ARC memory management.

Community
Intermediate