skills.rest
rafazafar
rafazafarCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply 57 React/Next.js performance rules across 8 categories to code.

Updated Apr 11, 2026
Search Tags:#performance#react#rendering#next.js#best-practices#bundle#server-actions
One-click install
npx skills add https://github.com/rafazafar/codex-octopus --skill vercel-react-best-practices-rafazafar
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/rafazafar/codex-octopus/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/rafazafar/codex-octopus --skill vercel-react-best-practices-rafazafar

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to suboptimal rendering, large bundle sizes, and inefficient data fetching. This skill consolidates proven patterns and guidelines to help teams write, review, and refactor code for speed and reliability.

Core Features & Use Cases

  • 57 rules across 8 categories, covering eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • Clear guidance for real-world workflows including writing, reviewing, refactoring, and automated code generation to enforce consistent performance improvements.
  • Actionable patterns and checklists that apply to React components, Next.js pages, data-fetching strategies, and build optimizations to reduce latency and enhance user experience.

Quick Start

Review the guidelines and start applying the recommended patterns to your React/Next.js components, pages, and data-fetching code to start improving performance.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for optimizing React and Next.js performance?▼

Optimizing React and Next.js performance involves applying 57 curated rules across 8 categories, targeting bundle size reduction, server-side efficiency, and eliminating data fetching waterfalls to enhance rendering speed and reliability.

How do I reduce bundle size and eliminate waterfalls in Next.js?▼

Reduce bundle size and eliminate Next.js waterfalls by following specific guidelines for client-side data fetching, server-side performance, and build optimizations to minimize latency and improve user experience.

How do I stop excessive re-rendering in React components?▼

Stop excessive React re-rendering by applying actionable patterns and checklists focused on rendering performance and JavaScript performance optimization provided within the guidelines.

Can I use these React performance guidelines for refactoring existing code?▼

Yes, you can use these guidelines for refactoring existing React and Next.js code, as they provide actionable patterns tailored for writing, reviewing, and refactoring components, pages, and data-fetching strategies.

Does this Skill include rules for Next.js server actions and advanced patterns?▼

Yes, this Skill includes rules for Next.js server actions and advanced patterns, covering 8 specific categories of performance improvements from eliminating waterfalls to JavaScript performance.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

vercel-react-best-practices

Enforce React and Next.js performance rules for code reviews and refactoring.

Community
Advanced
danger-Englishdanger-English
2

vercel-react-best-practices

Apply React and Next.js performance rules to components, pages, and data fetching.

Community
Advanced
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
ps-carvalhops-carvalho

performance-optimization

Profile CPU and memory usage to identify and fix performance bottlenecks.

Community
Advanced