vercel-react-best-practices

Name: vercel-react-best-practices
Availability: InStock
Author: MengXi

Identify performance bottlenecks in React and Next.js code.

9.0k|629|Updated Apr 16, 2025

Search Tags:#performance #react #next.js #best-practices #code-review #server-actions #bundle-size

Ready to run

npx skills add https://github.com/mengxi-ream/read-frog --skill vercel-react-best-practices-mengxi-ream

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mengxi-ream/read-frog/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mengxi-ream/read-frog --skill vercel-react-best-practices-mengxi-ream

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured, battle-tested set of performance guidelines to apply during the creation, review, and refactoring of React and Next.js code, helping teams reduce bottlenecks and improve user experience.

Core Features & Use Cases

Codified, priority-ordered rules covering eliminating waterfalls, bundle size optimization, server-side performance, and client rendering patterns.
Practical examples and templates that guide developers through performance-aware implementations during component design, data fetching, and bundling, with clear guardrails for safe refactors.
Use Case: during a code review, apply the guidelines to identify and fix a server-action bottleneck or a large bundle import.

Quick Start

Provide a React component, Next.js page, or server action, and have the assistant apply the guidelines to optimize its performance.

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 identify performance bottlenecks in my React and Next.js components?▼

To identify performance bottlenecks in React and Next.js, apply structured code review rules that detect data fetching waterfalls, inefficient server actions, and large bundle imports. This process targets component design and client rendering patterns to isolate specific slowdowns.

What is the best way to optimize Next.js bundle size during code review?▼

The best way to optimize Next.js bundle size during code review is to apply codified, priority-ordered guidelines that evaluate import structures and flag large dependencies. This refactoring method ensures bundle size optimization without breaking existing component functionality.

How do I fix data fetching waterfalls in React server actions?▼

Fix data fetching waterfalls in React server actions by applying performance-aware implementation templates that restructure data fetching sequences. These templates guide developers through safe refactors, eliminating sequential waits and improving server-side performance.

Can I use these React performance best practices for automated refactoring?▼

Yes, you can use these React performance best practices for automated refactoring. The guidelines provide clear guardrails and practical examples that satisfy requirements for disciplined code reviews and safe automated refactoring across data fetching and bundling tasks.

When should I apply server-side performance optimizations in Next.js?▼

Apply server-side performance optimizations in Next.js when evaluating server actions and data fetching patterns during development or code review. Implementing these optimizations early prevents data waterfalls and reduces client rendering overhead.