vercel-react-best-practices

Apply 57 performance best-practice rules to React and Next.js codebases.

7|1|Updated Feb 24, 2026

Search Tags:#performance #suspense #react #nextjs #bundling #server-actions #react-cache

Ready to run

npx skills add https://github.com/1lastphoenix/ton-ai-audit --skill vercel-react-best-practices-1lastphoenix

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/1lastphoenix/ton-ai-audit/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/1lastphoenix/ton-ai-audit --skill vercel-react-best-practices-1lastphoenix

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides guidance to optimize React and Next.js apps for performance, reducing waterfalls, bundle size, and server/client overhead.

Core Features & Use Cases

57 rules across 8 categories guide automated refactoring and code generation.
Helps engineers write faster, smaller, and more robust React/Next.js code, covering server actions, RSC, and client components.
Use cases include code reviews, refactoring, performance improvements, and bundle optimization.

Quick Start

Run the vercel-react-best-practices skill against a React/Next.js project to generate actionable performance-improvement tasks.

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 to reduce render waterfalls?▼

To optimize React and Next.js performance, apply targeted best-practice rules across data fetching, server actions, and component rendering to reduce waterfalls and accelerate SSR/CSR. This approach generates safe, testable refactoring changes without altering functionality.

What is the best way to refactor React Server Components and client components for bundle optimization?▼

Refactoring React Server Components (RSC) and client components for bundle optimization involves applying category-specific rules to minimize server/client overhead. This reduces bundle size and improves code robustness by detecting anti-patterns and enforcing safe code generation patterns.

Does this React performance refactoring approach work with existing Next.js pages and data fetching patterns?▼

Yes, this React performance refactoring approach works with existing Next.js pages and data fetching patterns by identifying anti-patterns and applying optimization rules. It safely generates testable changes across codebases without altering existing functionality.

How do I detect anti-patterns in Next.js server actions and data fetching logic?▼

Detecting anti-patterns in Next.js server actions and data fetching logic requires applying a comprehensive set of 57 rules across 8 categories. This automated analysis identifies performance bottlenecks and generates actionable refactoring tasks to improve code efficiency.

What are the limitations of using static best-practice rules for React performance improvements?▼

The limitation of using static best-practice rules for React performance improvements is that they focus on pattern detection and safe refactoring without altering functionality. Complex, dynamic runtime bottlenecks may require additional profiling beyond these 57 categorized rules.