vercel-react-best-practices

Identify and fix React and Next.js performance issues with prioritized rules.

8|Updated Aug 25, 2020

Search Tags:#code review #refactoring #react #bundle size #next.js #performance optimization #waterfalls

Ready to run

npx skills add https://github.com/braswelljr/braswelljr --skill vercel-react-best-practices-braswelljr

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the common issue of slow, unoptimized React and Next.js applications caused by poor code patterns such as sequential async waterfalls, oversized bundles, and unnecessary re-renders, which lead to poor user experience and low search engine rankings.

Core Features & Use Cases

70+ Prioritized Performance Rules: 8 categories of guidelines ranked by impact (from critical waterfall elimination to low incremental optimizations), each with clear incorrect/correct code examples and impact metrics.
Multi-Workflow Support: Use it when writing new React/Next.js components, reviewing team code for performance issues, or refactoring existing applications to improve load times and responsiveness.
Actionable Guidance: Rules include specific implementation recommendations and real-world examples to help developers implement optimizations correctly without guesswork.

Quick Start

Ask the AI to audit your Next.js page's data fetching logic and receive prioritized recommendations to eliminate waterfalls and reduce initial 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 eliminate async waterfalls in Next.js data fetching?▼

Eliminate async waterfalls in Next.js by applying prioritized, rule-based guidance that identifies sequential data fetching patterns and provides concrete incorrect and correct code examples to improve speed.

What are the best practices to reduce bundle size in React applications?▼

Best practices to reduce React bundle size involve applying 70+ prioritized performance rules ranked by impact, providing specific implementation recommendations and real-world examples to remove unoptimized code patterns.

How do I review React code for unnecessary re-renders?▼

Review React code for unnecessary re-renders by applying Vercel Engineering's official performance standards, which provide actionable guidance and concrete examples to identify and fix unoptimized code patterns.

Can I use this performance optimization guidance for refactoring existing web applications?▼

Yes, you can use this performance optimization guidance for refactoring existing web applications, as it supports multi-workflow usage including conducting code reviews and refactoring to improve load times and responsiveness.

What is the impact of unoptimized React code patterns on search engine rankings?▼

Unoptimized React code patterns such as sequential async waterfalls and oversized bundles lead to slow applications, poor user experience, and low search engine rankings, making performance optimization critical.