skills.rest
sjmontano
sjmontanoCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance guidelines across components, routes, and data fetching.

Updated May 29, 2026
Search Tags:#performance#react#next.js#best-practices#bundling#server-components#data-fetching
One-click install
npx skills add https://github.com/sjmontano/SafeRoutes-Popayan --skill vercel-react-best-practices-sjmontano
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/sjmontano/SafeRoutes-Popayan/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/sjmontano/SafeRoutes-Popayan --skill vercel-react-best-practices-sjmontano

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance due to waterfalls in data fetching, bloated bundles, and inefficient server/client boundaries. This skill consolidates guidelines to systematically optimize rendering, network requests, and resource loading.

Core Features & Use Cases

  • Comprehensive best-practices across 8 categories (async, bundle, server, client, rerender, rendering, JS, advanced patterns) to reduce waterfalls, bundle size, and render time.
  • Use cases include optimizing API routes, server actions, dynamic imports, suspense boundaries, and per-request caching.
  • Real-world application: accelerate Next.js apps by refactoring fetch patterns, API routes, and component structures while preserving UX.

Quick Start

Analyze a React/Next.js project and implement the top-priority performance patterns described in this skill.

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 fix data fetching waterfalls and slow component mounts in Next.js?▼

To fix React data fetching waterfalls and slow mounts, apply structured server components and suspense boundaries. This skill guides refactoring fetch patterns and component structures to systematically reduce network waterfalls and render time.

What is the best way to reduce large bundle size in React and Next.js applications?▼

The best way to reduce React bundle size is applying dynamic imports and optimizing server and client boundaries. This skill provides bundling rules and actionable prompts to systematically identify and eliminate bloated resources.

How do I optimize server and client component boundaries for React performance?▼

Optimize React server and client boundaries by applying server components for data fetching and isolating client logic. This skill covers 8 categories of patterns to correctly structure boundaries and reduce unnecessary client-side JavaScript.

Can I use these React performance guidelines to refactor existing API routes and server actions?▼

Yes, you can use these React performance guidelines to refactor existing API routes and server actions. The skill provides actionable prompts for reviewing and refactoring tasks to accelerate Next.js apps while preserving UX.

When should I use suspense boundaries and per-request caching in Next.js?▼

Use suspense boundaries and per-request caching in Next.js to isolate slow components and optimize API route data fetching. This skill guides proper usage of advanced patterns to address rendering bottlenecks and network request redundancies.

Related Skills

Explore More Software Engineering Skills→
ByeongminLeeByeongminLee
2

vercel-react-best-practices

Apply React and Next.js performance best practices to codebases.

Community
Advanced
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
AratKruglikAratKruglik
9

server-component-patterns

Determine Server or Client Component usage in Next.js app router layouts.

Community
Advanced
dseirz-rgbdseirz-rgb

performance-optimization

Diagnose performance bottlenecks in React, API endpoints, and database queries.

Community
Advanced