React Best Practices
Triggers automatically after you edit TSX files to run through a quality checklist covering component structure, hooks usage, accessibility, and performance patterns. Built around Vercel's 64-rule React guide, organized by impact from critical (eliminating waterfalls, bundle optimization) down to micro-optimizations. The validation layer is smart enough to flag legacy CSS-in-JS libraries like styled-components or MUI and suggest migrating to shadcn with Tailwind. Honestly most useful for catching the medium-priority stuff you know you should do but forget in the moment, like hoisting static props or using functional setState. References the official React docs and supports common component directory structures out of the box.
- skills.sh installs
- 721
- GitHub stars
- 183
- last updated
- Jun 3, 2026
Install
$ npx -y skills add vercel-labs/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-labs/vercel-plugin
- Categories
- Frontend Development, Cloud & Infrastructure
- First seen
- May 16, 2026
More from vercel-labs/vercel-plugin
All 32- Shadcn399
- Deployments Cicd333
- Turbopack310
- Ai Sdk278
- Vercel Cli272
- Routing Middleware264
- Vercel Agent263
- Ai Gateway260
- Vercel Functions259
- Chat Sdk257
- Env Vars250
- Vercel Storage244
- Workflow236
- Auth232
- Runtime Cache228
- Verification226
- Vercel Sandbox219
- Next Cache Components218
- Next Upgrade213
- Bootstrap211
- Marketplace208
- Vercel Plugin Eval206
- Plugin Audit198
- Benchmark Agents197
Recommended
More Frontend Development
frontend-developerdylantarre/animation-principlesUse when implementing animations in code, building UI transitions, or when a developer needs practical animation guidance for web/mobile applications.605skills.sh installs
auth0-nuxtauth0/agent-skillsUse when adding Auth0 login, logout, session management, or protected routes to a Nuxt 3 or Nuxt 4 application. Integrates @auth0/auth0-nuxt — use even if the u594skills.sh installs
sveltekit-svelte5-tailwind-skillclaude-skills/sveltekit-svelte5-tailwind-skillsveltekit svelte5 tailwind skill586skills.sh installs