skills.rest
PlazaCC
PlazaCCOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Identify and apply React/Next.js performance best practices across codebases.

2|Updated Apr 11, 2026
Search Tags:#performance#react#optimization#nextjs#best-practices#server-components#client-components
One-click install
npx skills add https://github.com/PlazaCC/antes-da-tela --skill vercel-react-best-practices-plazacc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/PlazaCC/antes-da-tela/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/PlazaCC/antes-da-tela --skill vercel-react-best-practices-plazacc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates a comprehensive set of performance guidelines for React and Next.js, helping teams identify bottlenecks and apply proven patterns to reduce waterfalls, improve hydration, and speed up load times across projects.

Core Features & Use Cases

  • Structured rules spanning server components, client components, data-fetching patterns, and bundle optimization to guide improvements.
  • Guardrails and implementation examples that support automated refactoring and code generation with safety.
  • Use cases include code reviews, feature migrations, and performance-focused rewrites for large Next.js apps.

Quick Start

Apply the guidelines to a React/Next.js project to identify bottlenecks and implement the recommended performance patterns.

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 React and Next.js hydration and data fetching waterfalls?▼

Apply React and Next.js performance best practices to server and client components to reduce re-renders, optimize data fetching, and improve hydration speed across your codebase.

What are the best practices for optimizing bundle size in Next.js apps?▼

Next.js bundle optimization best practices involve applying structured rules and guardrails that support automated refactoring to safely reduce bundle size and improve load times.

Can I use these performance guidelines for large Next.js app migrations?▼

Yes, these performance guidelines support large Next.js apps through code reviews, feature migrations, and performance-focused rewrites by providing safety-guided, implementation-ready rules.

How do I apply React server and client component rules during code generation?▼

Apply React server and client component rules during code generation by following the provided guardrails and implementation examples designed to support safe automated refactoring.

Why does my Next.js SSR performance bottleneck during data fetching?▼

Next.js SSR performance bottlenecks during data fetching occur due to waterfalls and inefficient patterns, which you can resolve by applying targeted performance best practices across the codebase.

Related Skills

Explore More Software Engineering Skills→
wildanjr19wildanjr19
2

vercel-react-best-practices

Apply categorized optimization rules to React and Next.js codebases.

Community
Advanced
idchain-worldidchain-world
16

vercel-react-best-practices

Apply performance best practices to React and Next.js components and pages.

Official
Advanced
Elmanuel1Elmanuel1

vercel-react-best-practices

Apply prioritized React and Next.js performance rules to code review and refactoring.

Community
Intermediate
open-gsdopen-gsd
1.0k

react-best-practices

Identify and apply React/Next.js performance best practices for UI responsiveness and load performance.

Official
Advanced