React Best Practices

Name: React Best Practices
Author: Vercel

React and Next.js performance optimization guidelines from Vercel Engineering.

Skill32.5k stars on vercel-labs/agent-skills · shared by 10 skills

Install

Use it in

Terminal is for Claude Code, Codex, Cursor and Copilot.

npx skills add vercel-labs/agent-skills --skill react-best-practices

Works in Claude Code, Codex, Gemini CLI, Cursor and Copilot. The command picks the right folder for your agent.

Part of

Guided workflow Step 4 of 6Build a UI feature that holds upDevelopers · in the Frontend kit Get the workflow file

About

Contains 40+ performance rules across 8 categories including waterfall elimination, bundle optimization, server/client-side performance, re-render optimization, and rendering techniques. Prioritized by impact.

react
nextjs
performance
optimization
vercel

Next in the Frontend kit

Whole kit

React Composition Patterns
React composition patterns that scale and avoid boolean prop proliferation.
Skill
32.5k· repoGitHub stars for vercel-labs/agent-skills, shared by the 10 skills listed from this repo
next-devtools-mcp
Next.js development tools MCP server with stdio transport
Connects to Next devtools
828GitHub stars for vercel/next-devtools-mcp
Magic MCP (21st.dev)
AI-driven UI component generation with a modern React/Tailwind component library.
Connects to Magic
6kGitHub stars for 21st-dev/magic-mcp