skills.rest
cgasgarth
cgasgarthCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js application performance with Vercel engineering standards.

Updated Aug 27, 2026
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/cgasgarth/opencode-config --skill vercel-react-best-practices-cgasgarth
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/cgasgarth/opencode-config/tree/main/skill/react-best-practices
Command: npx skills add https://github.com/cgasgarth/opencode-config --skill vercel-react-best-practices-cgasgarth

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes 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, ensuring faster load times, improved user experience, and more efficient development.

Core Features & Use Cases

  • Performance Optimization: Covers critical areas like eliminating waterfalls, reducing bundle size, and improving server-side and client-side rendering.
  • AI-Assisted Development: Designed for AI agents to use when writing, reviewing, or refactoring React/Next.js codebases.
  • Use Case: When developing a new feature, consult this Skill to ensure data fetching is parallelized, components are code-split effectively, and re-renders are minimized for a smooth user experience.

Quick Start

Apply the React best practices to the provided code snippet to improve its 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 application performance?▼

Optimize React and Next.js performance by applying guidelines that eliminate data fetching waterfalls, reduce bundle size, parallelize server-side and client-side data fetching, and minimize component re-renders.

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

Reducing bundle size in Next.js involves code-splitting components effectively and applying advanced rendering patterns to ensure adherence to Vercel engineering standards for efficient delivery.

Why does my React component re-render so often and how do I fix it?▼

React re-render optimization requires following specific guidelines to minimize unnecessary renders, improving overall rendering performance and JavaScript execution efficiency for a smoother user experience.

Can I use these Vercel React best practices for automated code review?▼

Yes, these React best practices are designed for AI agents to use during automated code generation, review, and refactoring of React and Next.js codebases to ensure performance standards are met.

How do I eliminate data fetching waterfalls in server-side rendered React apps?▼

Eliminating waterfalls in server-side rendered React apps involves parallelizing data fetching operations and applying advanced patterns for both server-side and client-side rendering workflows.

Related Skills

Explore More Software Engineering Skills→
MasaKagamiMasaKagami

vercel-react-best-practices

Optimize React and Next.js performance with automated refactoring rules.

Community
Advanced
eehnsioeehnsio
1

react-best-practices

Audit React and Next.js projects for performance improvements.

Community
Advanced
ManzuetiManzueti

benchmark

Capture and compare browser performance metrics to detect regressions and track trends.

Community
Advanced
blueprintuiblueprintui
335

testing-performance

Detect and prevent performance regressions in bundle size and render time.

Official
Intermediate