vercel-react-best-practices
A comprehensive checklist and guide for optimizing React/Next.js application performance.
Install
mkdir -p .claude/skills/vercel-react-best-practices-aii-group && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13540" && unzip -o skill.zip -d .claude/skills/vercel-react-best-practices-aii-group && rm skill.zipInstalls to .claude/skills/vercel-react-best-practices-aii-group
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
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.Key capabilities
- →Provide 58 performance rules for React and Next.js
- →Categorize rules by impact and priority
- →Offer guidelines for eliminating request waterfalls
- →Suggest methods for bundle size optimization
- →Detail server-side and client-side data fetching optimizations
How it works
The skill provides a guide of 58 performance optimization rules for React and Next.js applications, categorized by impact and priority, with detailed explanations and code examples for each rule.
Inputs & outputs
When to use vercel-react-best-practices
- →Refactoring for better performance
- →Optimizing Next.js data fetching
- →Reducing React bundle size
About vercel-react-best-practices
Provides 58 performance rules specifically for React and Next.js, ranging from eliminating request waterfalls to bundle optimization. It guides developers through code generation and refactoring tasks.
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,
How it compares
This skill offers a structured, prioritized set of 58 specific rules for React and Next.js performance, unlike general programming best practices.
Compared to similar skills
vercel-react-best-practices side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| vercel-react-best-practices (this skill) | 0 | 2mo | No flags | Intermediate |
| nextjs-developer | 328 | 2mo | No flags | Advanced |
| frontend-developer | 27 | 4mo | No flags | Intermediate |
| nextjs-app-router-patterns | 3 | 2mo | No flags | Advanced |
Try saying
Example prompts that trigger this skill in your AI assistant.
You might also like
nextjs-developer
zenobi-us
Expert Next.js developer mastering Next.js 14+ with App Router and full-stack features. Specializes in server components, server actions, performance optimization, and production deployment with focus on building fast, SEO-friendly applications.
frontend-developer
sickn33
Build React components, implement responsive layouts, and handle client-side state management. Masters React 19, Next.js 15, and modern frontend architecture. Optimizes performance and ensures accessibility. Use PROACTIVELY when creating UI components or fixing frontend issues.
nextjs-app-router-patterns
wshobson
Master Next.js 14+ App Router with Server Components, streaming, parallel routes, and advanced data fetching. Use when building Next.js applications, implementing SSR/SSG, or optimizing React Server Components.
bundle-dynamic-imports
TheOrcDev
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on initial render.
moai-domain-frontend
modu-ai
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
bundle-barrel-imports
TheOrcDev
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle size and improve dev boot time.