React Best Practices
Triggers automatically when you edit TSX files to run through 64 React and Next.js optimization rules organized by impact priority. Covers the essentials: eliminating async waterfalls, bundle size fixes, server component performance, hooks patterns, and accessibility basics. The condensed checklist format is helpful when you want automated feedback without hunting through style guides. It also flags legacy CSS-in-JS libraries like styled-components or Material UI and suggests migrating to shadcn/ui with Tailwind. Best used on Vercel-based projects where the server-side and RSC rules really apply, less relevant if you're working on a pure client app.
- skills.sh installs
- 491
- GitHub stars
- 183
- last updated
- Jun 3, 2026
Install
$ npx -y skills add vercel/vercel-plugin --skill react-best-practices --agent claude-codeInstalls into .claude/skills of the current project.
Files
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Server-Side Performance | HIGH | server- |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 5 | Re-render Optimization | MEDIUM | rerender- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/vercel/vercel-plugin
- Categories
- Frontend Development, Cloud & Infrastructure
- First seen
- Jun 3, 2026
More from vercel/vercel-plugin
All 25- Deployments Cicd484
- Shadcn458
- Vercel Cli432
- Turbopack429
- Ai Gateway423
- Env Vars422
- Vercel Functions410
- Next Cache Components385
- Next Upgrade368
- Routing Middleware338
- Auth326
- Vercel Storage326
- Vercel Agent317
- Bootstrap315
- Chat Sdk315
- Verification315
- Workflow313
- Runtime Cache312
- Vercel Sandbox308
- Knowledge Update301
- Marketplace300
- Next Forge191
- Nextjs629
- Ai Sdk544
Recommended
More Frontend Development
frontend-mobile-security-xss-scansickn33/antigravity-awesome-skillsfrontend mobile security xss scan444skills.sh installsreact-state-managementsickn33/antigravity-awesome-skillsreact state management425skills.sh installs
frontend-designmrgoonie/claudekit-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat424skills.sh installs
frontend-designblock/agent-skillsCreate distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applicat405skills.sh installs