xiry.

Development · GitHub repo

react-best-practices

Curated React performance rules and coding-agent skills by Vercel

From the Xiry library · Updated 10 October 2026

Visit vercel.com ↗

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.

What it's 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
Topic
Developer Tools
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: Lets an AI coding agent apply Vercel's React performance best practices and catch performance regressions automatically.
  • @vercel, 15 January 2026: Background and install instructions for the react-best-practices repo.

Related

  • Agentation

    Connects AI coding agents to browser annotations for automated UI reviews

  • claude-office-skills

    Office document creation and editing skills for Claude Code CLI.

  • Domain SDK

    TypeScript SDK for adding and managing custom customer domains across platforms

  • ECC

    Agent harness optimization system with skills, hooks, and configs for coding agents

  • Eight Dev Tools, Zero Fluff — Part 6

    Curated list of eight front-end design and developer utility tools

  • Framecap

    Command-line screen, camera, and audio recorder for macOS

All 13 in Developer Tools →

Updated