skills.rest
wellnessbrotherjay-debug
wellnessbrotherjay-debugCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Audits and refactors React & Next.js projects for improved performance and efficiency.

Updated Apr 8, 2026
Search Tags:#performance#frontend#react#optimization#nextjs#best-practices
One-click install
npx skills add https://github.com/wellnessbrotherjay-debug/ts-residence --skill vercel-react-best-practices-wellnessbrotherjay-debug
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/wellnessbrotherjay-debug/ts-residence/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/wellnessbrotherjay-debug/ts-residence --skill vercel-react-best-practices-wellnessbrotherjay-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many React and Next.js applications suffer from performance bottlenecks such as network waterfalls, oversized bundles, and inefficient server‑side rendering, leading to slow load times and poor user experience.

Core Features & Use Cases

  • Eliminating Waterfalls: Parallelize async operations and defer awaits to cut latency.
  • Bundle Size Optimization: Avoid barrel imports, use dynamic imports, and preload based on user intent.
  • Server‑Side Performance: Authenticate server actions, cache data across requests, and reduce serialization overhead.
  • Client‑Side Data Fetching: Deduplicate event listeners, use SWR, and apply passive listeners for smooth scrolling.
  • Re‑render & Rendering Optimizations: Narrow effect dependencies, use memoization wisely, and leverage Suspense boundaries.
  • Advanced Patterns: Stabilize callbacks with refs and initialize the app only once.

Quick Start

Apply the vercel-react-best-practices skill to audit and refactor your Next.js project for optimal performance.

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 network waterfalls and slow data fetching in React?▼

Reduce React bundle size by avoiding barrel imports, using dynamic imports, and preloading resources based on user intent. These best practices prevent unnecessary code from shipping to the client and improve initial load times.

What is the best way to optimize server-side rendering performance in Next.js 13?▼

Optimizing server-side rendering in Next.js 13 involves authenticating server actions, caching data across requests, and reducing serialization overhead. These techniques ensure efficient server computation and faster page responses.

Why does my React component re-render excessively and how can I stop it?▼

React components re-render excessively due to broad effect dependencies and unstable callbacks. Stop this by narrowing effect dependencies, using memoization wisely, and stabilizing callbacks with refs to prevent unnecessary renders.

Do I need a Next.js 13+ development environment to apply these React performance optimizations?▼

You need a Next.js 13+ development environment and codebase access. This setup is required to run static analysis and refactor server-side rendering, bundle size, and client-side fetching logic.

Related Skills

Explore More Software Engineering Skills→
KengoTODAKengoTODA
8

jaeger-spotbugs-benchmark

Profiles SpotBugs analysis with Jaeger and OpenTelemetry to identify performance bottlenecks.

Community
Advanced
itsmichaelwestitsmichaelwest
1

vercel-react-best-practices

Guide React and Next.js performance optimization with 50 rules across 8 categories.

Community
Intermediate
InteligentsensingsolutionsInteligentsensingsolutions
1

react-best-practices

Diagnose React and Next.js performance issues like waterfalls and re-renders.

Official
Intermediate
skeletorfletskeletorflet
7

react-best-practices

Optimize React 18+ and Next.js app rendering, data fetching, and bundle size.

Community
Intermediate