Add Vercel React Best Practices skill for Claude Code #31132
Description
Summary
Add a new Claude Code skill for Vercel React Best Practices - a comprehensive performance optimization guide for React and Next.js applications.
Details
This skill contains 45 rules across 8 categories, prioritized by impact:
| Priority | Category | Impact |
|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL |
| 2 | Bundle Size Optimization | CRITICAL |
| 3 | Server-Side Performance | HIGH |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH |
| 5 | Re-render Optimization | MEDIUM |
| 6 | Rendering Performance | MEDIUM |
| 7 | JavaScript Performance | LOW-MEDIUM |
| 8 | Advanced Patterns | LOW |
When Applied
The skill triggers 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
Files Added
.claude/skills/vercel-react-best-practices/SKILL.md- Skill definition.claude/skills/vercel-react-best-practices/AGENTS.md- Full compiled guide.claude/skills/vercel-react-best-practices/rules/- 45 individual rule files
Reference
Based on Vercel Engineering best practices for React and Next.js performance optimization.