skills.rest
joaoprocopio
joaoprocopioCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js applications.

2|Updated Jun 13, 2023
Search Tags:#performance#react#vercel#best-practices#server-client#bundle-size
One-click install
npx skills add https://github.com/joaoprocopio/tooling --skill vercel-react-best-practices-joaoprocopio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/joaoprocopio/tooling/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/joaoprocopio/tooling --skill vercel-react-best-practices-joaoprocopio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a comprehensive set of performance optimization guidelines for React and Next.js, enabling teams to write, review, and refactor code with a focus on speed, bundle size, and SSR/CSR efficiency.

Core Features & Use Cases

  • 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
  • Coverage includes eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, rendering, and JavaScript performance.
  • Use Case: when building or maintaining a React/Next.js application, employ the rules to reduce TTI, LCP, and server waterfalls, by applying patterns like deferring awaits, parallel fetches, dynamic imports, and safe serialization.

Quick Start

Review the guidelines and apply the listed performance patterns to your React/Next.js projects during development, review, or refactoring tasks.

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

To optimize React and Next.js performance, apply a comprehensive set of 57 rules covering bundle size, server-side rendering, and client-side fetching to reduce TTI and LCP.

What are the best practices for server and client data fetching strategies in Next.js?▼

Best practices for Next.js data fetching include eliminating waterfalls by deferring awaits, executing parallel fetches, and applying safe serialization to improve SSR and CSR efficiency.

How do I eliminate server-side waterfalls during React code refactoring?▼

Eliminate React server-side waterfalls by applying performance patterns during code refactoring, such as executing parallel fetches and deferring non-critical awaits to optimize load times.

Does this React performance guideline cover dynamic imports and JavaScript rendering optimization?▼

Yes, these React performance guidelines cover dynamic imports and JavaScript rendering optimization across 8 categories, prioritized by impact to guide automated code generation and reviews.

When should I use deferred work and parallel data fetching in modern React applications?▼

Use deferred work and parallel data fetching in modern React applications to minimize startup times and server waterfalls, directly improving overall rendering and load performance metrics.

Related Skills

Explore More Software Engineering Skills→
jewbetchajewbetcha
115

vercel-react-best-practices

Apply React and Next.js performance best practices during development and code reviews.

Community
Basic
flexisuite-orgflexisuite-org

vercel-react-best-practices

Apply Vercel React and Next.js performance optimization guidelines to code.

Official
Intermediate
arcasilesgrouparcasilesgroup
54

ai-pipeline

Generate stack-aware CI/CD workflow files for GitHub Actions and Azure Pipelines.

Official
Advanced
yeshan333yeshan333
94

optimize

Analyze Core Web Vitals and optimize loading, rendering, animations, and bundle size.

Community
Advanced