skills.rest
codexyzdev
codexyzdevCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Enforce React and Next.js performance guidelines for rendering, bundling, and data fetching.

Updated Nov 11, 2025
Search Tags:#performance#react#next.js#best-practices#server-actions#bundle-size
One-click install
npx skills add https://github.com/codexyzdev/codexyz --skill vercel-react-best-practices-codexyzdev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/codexyzdev/codexyz/tree/main/.trae/skills/vercel-react-best-practices
Command: npx skills add https://github.com/codexyzdev/codexyz --skill vercel-react-best-practices-codexyzdev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates best-practices and guidelines from Vercel Engineering to help developers optimize React and Next.js apps for speed, reliability, and maintainability.

Core Features & Use Cases

  • Comprehensive rules across 8 priority categories, covering eliminating waterfalls, bundle size, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • Practical guidance for code reviews, refactoring, and automated generation of high-performance components and routes.
  • Use Case: When auditing a Next.js project, apply these guidelines to reduce TTFB, improve LCP, and cut bundle sizes.

Quick Start

Review AGENTS.md and the rules/ directory to identify applicable patterns and incorporate them into your codebase.

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 for faster rendering and bundling?▼

To optimize React and Next.js performance, apply high-impact guidelines targeting rendering, bundling, and data fetching. These patterns eliminate waterfalls, cut bundle sizes, and improve server-side execution for faster page loads.

What are the best practices to reduce bundle size and eliminate data fetching waterfalls in Next.js?▼

Best practices to reduce Next.js bundle size and eliminate data waterfalls include applying actionable refactoring patterns across eight priority categories, covering server/client data fetching and advanced JavaScript performance techniques.

How do I audit a Next.js project to improve LCP and reduce TTFB?▼

Audit a Next.js project by applying consolidated Vercel engineering guidelines to identify performance bottlenecks. This process reduces Time to First Byte (TTFB), improves Largest Contentful Paint (LCP), and minimizes client-side bundle overhead.

Can I use these React performance patterns for server actions and client-side data fetching?▼

Yes, these React performance patterns specifically support server actions and client-side data fetching. They provide actionable code generation and refactoring guidance for modern web apps using server/client component architectures.

When should I apply re-render optimization and advanced patterns in React components?▼

Apply re-render optimization and advanced patterns in React components when auditing modern web apps for speed and maintainability. Use these guidelines during code reviews to enforce high-performance rendering and data fetching rules.

Related Skills

Explore More Software Engineering Skills→
AbianSAbianS
92

vercel-react-best-practices

Apply Vercel Engineering performance guidelines to React and Next.js projects.

Community
Advanced
JordiNodeJSJordiNodeJS

performance-optimization

Optimize Next.js 16 performance by targeting Core Web Vitals and caching.

Community
Advanced
vudovnvudovn
8.1k

react-best-practices

Diagnose React and Next.js performance bottlenecks and propose optimizations.

Community
Advanced
NammDevNammDev
2

web-frameworks

Build and optimize full-stack web applications with Next.js, Turborepo, and RemixIcon.

Community
Advanced