vercel-react-best-practices

Apply 57 prioritized rules to optimize React and Next.js performance.

1.9k|619|Updated May 10, 2020

Search Tags:#performance #refactoring #react #optimization #next.js #server-actions #bundle-size

Ready to run

npx skills add https://github.com/quran/quran.com-frontend-next --skill vercel-react-best-practices-quran

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/quran/quran.com-frontend-next/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/quran/quran.com-frontend-next --skill vercel-react-best-practices-quran

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill collects and enforces best-practice guidelines to optimize React and Next.js performance, helping teams avoid common slow patterns and regressions.

Core Features & Use Cases

A prioritized catalog of 57 rules across 8 categories covering eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering, JavaScript performance, and advanced patterns.
Actionable patterns with concrete examples to guide writing, reviewing, and refactoring code; suitable for dashboards, data-heavy apps, and marketing pages.
Supports automation-friendly workflows by providing structure for refactoring tasks, code generation, and validation against performance criteria.

Quick Start

Audit a React/Next.js codebase against these guidelines and start applying the most impactful rules to reduce waterfalls, improve load times, and minimize bundle size.

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 during code refactoring?▼

To optimize React and Next.js performance during refactoring, apply a prioritized catalog of 57 best-practice rules across 8 categories including waterfalls, bundle size, and server-side execution to generate automated improvements.

What is the best way to reduce bundle size and eliminate data waterfalls in Next.js?▼

The best way to reduce bundle size and eliminate data waterfalls in Next.js is applying targeted refactoring patterns outlined in priority-rated categories. These actionable rules guide code generation to minimize client-side fetching and improve load times.

How do I use server actions to improve Next.js server-side performance?▼

Improve Next.js server-side performance using server actions by following concrete best-practice examples within the server-side execution category. These patterns guide component writing and reviewing to prevent slow regressions and optimize rendering.

Can I audit my existing React codebase against these performance guidelines?▼

You can audit an existing React codebase against these performance guidelines by validating components and pages against 57 structured rules. This workflow identifies slow patterns and applies high-impact refactoring to minimize bundle size and optimize rendering.

What patterns help prevent React re-render optimization regressions?▼

Patterns to prevent React re-render optimization regressions are found in the dedicated re-render optimization category of the rule taxonomy. Applying these concrete examples during code generation and reviews stops common slow patterns before they reach production.