skills.rest
ImHangLi
ImHangLiCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to optimize components, pages, and bundles.

2|Updated Feb 23, 2026
Search Tags:#performance#react#next.js#ssr#hydration#code-splitting#bundle-size
One-click install
npx skills add https://github.com/ImHangLi/book-of-answers --skill vercel-react-best-practices-imhangli
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ImHangLi/book-of-answers/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/ImHangLi/book-of-answers --skill vercel-react-best-practices-imhangli

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The guidelines help teams reduce performance bottlenecks in React and Next.js by offering proven patterns and checks.

Core Features & Use Cases

  • A curated set of performance rules covering eliminating waterfalls, bundle size, server-side performance, client-side data fetching, rendering, and JavaScript optimizations.
  • Practical examples and safe patterns for optimizing components, data fetching, and code-splitting across Next.js deployments.

Quick Start

Review a sample React/Next.js project and apply the recommended performance patterns to optimize components, data fetching, and bundling.

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 fix React hydration mismatches and optimize SSR boundaries in Next.js?▼

To fix React hydration mismatches, optimize server/client boundaries by applying safe patterns for server actions and SSR/CSR rendering. This ensures correct component hydration and improves server-side rendering performance across Next.js deployments.

What is the best way to reduce bundle size and eliminate data fetching waterfalls in React?▼

The best way to reduce bundle size and eliminate waterfalls is applying code-splitting patterns and parallel data fetching strategies. This approach optimizes JavaScript delivery and prevents sequential client-side data fetching bottlenecks.

How to optimize React components and pages for Vercel deployments?▼

Optimize React components and Next.js pages for Vercel deployments by enforcing actionable performance rules. This includes reviewing rendering strategies, caching mechanisms, and bundle size checks to minimize bottlenecks across your routes.

Does this approach support automated refactoring guidance for Next.js performance?▼

Yes, this approach supports automated refactoring guidance for Next.js performance. It provides concrete examples and actionable checks for server/client boundaries, code-splitting, and safe server actions to automate your optimization workflow.

When should I use code-splitting over server-side rendering for React performance?▼

Use code-splitting over server-side rendering when you need to minimize initial JavaScript bundle size for client-heavy interactions. SSR is better for content-driven pages, while code-splitting optimizes rendering by loading components on demand.

Related Skills

Explore More Software Engineering Skills→
OmarMiraOmarMira

nextjs-react-expert

Optimize React and Next.js performance using 57 Vercel Engineering rules.

Community
Advanced
Arupbiswas09Arupbiswas09

nextjs-seo-performance

Optimize Next.js SEO elements and Core Web Vitals performance.

Community
Advanced
peancharoenpeancharoen

speckit.checker

Run static analysis tools to detect linting, type, and security issues across source code.

Community
Advanced
aresbitaresbit
46

vercel-react-best-practices

Apply performance optimization rules to React and Next.js code.

Community
Advanced