skills.rest
Overdrive-Consulting
Overdrive-ConsultingOFFICIAL
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply Vercel-authored performance rules to React and Next.js code.

3|Updated Dec 31, 2025
Search Tags:#performance#react#optimization#next.js#code-review#server-components#bundle-size
One-click install
npx skills add https://github.com/Overdrive-Consulting/overdrive-ai-devkit --skill vercel-react-best-practices-overdrive-consulting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Overdrive-Consulting/overdrive-ai-devkit/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Overdrive-Consulting/overdrive-ai-devkit --skill vercel-react-best-practices-overdrive-consulting

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a comprehensive, rule-based performance optimization guide for React and Next.js, authored by Vercel Engineering, to help teams ship faster and more efficient UIs.

Core Features & Use Cases

  • Guided optimization: 45+ rules across key categories help detect and fix performance bottlenecks in components, data fetching, bundling, and rendering.
  • Code quality uplift: Provides actionable patterns that reduce waterfalls, improve bundle size, and optimize server/client rendering.
  • Use Case: When refactoring a Next.js page, apply the guidelines to audit data loading, Suspense usage, and static rendering to improve TTI and LCP.

Quick Start

Start by auditing a React/Next.js component, then apply prioritized guidelines to refactor and optimize the codebase.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I optimize React and Next.js performance during a code review?▼

Optimize React and Next.js performance during code review by applying 45+ structured rules that detect and fix bottlenecks in component rendering, data fetching, bundle size, and server-client rendering strategies.

What is the best way to reduce bundle size and improve server rendering in Next.js?▼

Reduce bundle size and improve Next.js server rendering by applying actionable patterns that minimize data waterfalls, optimize Suspense usage, and enforce correct server/client component boundaries.

How do I refactor a Next.js page to improve LCP and TTI?▼

Refactor a Next.js page to improve LCP and TTI by auditing data loading, Suspense boundaries, and static rendering configurations against structured optimization guidelines to eliminate rendering bottlenecks.

Does this approach work for both React and Next.js projects?▼

Yes, this optimization approach works for both React and Next.js projects, providing targeted rule-based guidance for data fetching, bundle optimization, and rendering strategies across both frameworks.

Why should I use structured rules instead of manual profiling for React performance?▼

Use structured rules over manual profiling for React performance because they enforce safe usage and compliance, providing precise, actionable guidance to detect specific bottlenecks in data waterfalls and rendering faster.

Related Skills

Explore More Software Engineering Skills→
blockmatic-iceboxblockmatic-icebox
4

vercel-react-best-practices

Apply React and Next.js performance best practices across components, pages, and data fetching.

Official
Advanced
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
rohitg00rohitg00
2.5k

react-patterns

Apply React 19 Server Components, Actions, Suspense, and hooks to build scalable UI architectures.

Community
Advanced
686f6c61686f6c61
105

bundle-size

Analyze frontend bundles and apply tree shaking, code splitting, and lazy loading.

Community
Intermediate