vercel-react-best-practices
✓React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
Installation
SKILL.md
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
| 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- |
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Source: lobehub/lobe-chat.
Facts (cite-ready)
Stable fields and commands for AI/search citations.
- Install command
npx skills add https://github.com/lobehub/lobe-chat --skill vercel-react-best-practices- Source
- lobehub/lobe-chat
- Category
- </>Dev Tools
- Verified
- ✓
- First Seen
- 2026-02-01
- Updated
- 2026-02-18
Quick answers
What is vercel-react-best-practices?
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements. Source: lobehub/lobe-chat.
How do I install vercel-react-best-practices?
Open your terminal or command line tool (Terminal, iTerm, Windows Terminal, etc.) Copy and run this command: npx skills add https://github.com/lobehub/lobe-chat --skill vercel-react-best-practices Once installed, the skill will be automatically configured in your AI coding environment and ready to use in Claude Code or Cursor
Where is the source repository?
https://github.com/lobehub/lobe-chat
Details
- Category
- </>Dev Tools
- Source
- skills.sh
- First Seen
- 2026-02-01