# react-best-practices

> Curated React performance rules and coding-agent skills by Vercel

react-best-practices is an open-source knowledge base and agent skill developed by Vercel to optimize React and Next.js applications. It organizes over 40 performance rules ranked by impact—from eliminating request waterfalls to cutting bundle sizes—into formats consumable by developers and AI coding agents. The rules compile into an AGENTS.md document to guide automated refactoring tools like Cursor, Claude Code, and Codex.

Website: https://vercel.com/blog/introducing-react-best-practices

## What it is for

- Install as an AI coding agent skill to automatically detect React performance anti-patterns
- Identify and fix asynchronous request waterfalls in Next.js codebases
- Audit React components to minimize client bundle bloat and unnecessary re-renders
- Provide consistent optimization guidelines across engineering teams during code reviews

## Features

- Over 40 performance rules across 8 core categories including waterfalls, bundle size, and re-rendering
- Impact ratings from CRITICAL to LOW to help prioritize high-yield fixes first
- Code examples contrasting incorrect anti-patterns with optimized implementations
- AGENTS.md compilation designed specifically for LLMs and AI coding assistants
- Direct installation into tools like Cursor, Claude Code, and Codex via npx skills

## Pricing

Open source. Free and open source

## Details

- Type: GitHub repo
- Category: [Development](https://xiry.app/topics/development.md)
- Topic: [Developer Tools](https://xiry.app/topics/development/developer-tools.md)
- Open source: yes
- Platforms: Command line, Code library
- For: React and Next.js developers, performance engineers, and teams using AI coding agents
- Tags: react, nextjs, performance, ai agents, coding agent, vercel

## Why it was saved

- [@vercel, 15 January 2026](https://x.com/vercel/status/2011589806250426615): Lets an AI coding agent apply Vercel's React performance best practices and catch performance regressions automatically.
- [@vercel, 15 January 2026](https://x.com/vercel/status/2011589806250426615): Background and install instructions for the react-best-practices repo.

## Related

- [Agentation](https://xiry.app/resources/agentation): Connects AI coding agents to browser annotations for automated UI reviews (Web app, Open source)
- [claude-office-skills](https://xiry.app/resources/claude-office-skills): Office document creation and editing skills for Claude Code CLI. (GitHub repo, Open source)
- [Domain SDK](https://xiry.app/resources/domain-sdk): TypeScript SDK for adding and managing custom customer domains across platforms (GitHub repo, Open source)
- [ECC](https://xiry.app/resources/ecc): Agent harness optimization system with skills, hooks, and configs for coding agents (GitHub repo, Open source)
- [Eight Dev Tools, Zero Fluff — Part 6](https://xiry.app/resources/eight-dev-tools-zero-fluff-part-6): Curated list of eight front-end design and developer utility tools (List)
- [Framecap](https://xiry.app/resources/framecap): Command-line screen, camera, and audio recorder for macOS (Web app)

Updated 10 October 2026. Page: https://xiry.app/resources/react-best-practices

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.