skills.rest
kolodach
kolodachCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and correct React and Next.js performance bottlenecks in application code.

Updated Nov 23, 2025
Search Tags:#performance#react#data fetching#optimization#bundle size#next.js#hydration
One-click install
npx skills add https://github.com/kolodach/intervies --skill vercel-react-best-practices-kolodach
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/kolodach/intervies/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/kolodach/intervies --skill vercel-react-best-practices-kolodach

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams eliminate common React and Next.js performance mistakes before they reach production. It turns scattered best-practice knowledge into actionable guidance for faster pages, smaller bundles, and more reliable rendering.

Core Features & Use Cases

  • Performance Refactoring: Improve data fetching, rendering, and state management patterns in React components and Next.js routes.
  • Bundle Optimization: Reduce initial JavaScript cost by avoiding heavyweight imports, deferring non-critical libraries, and loading code only when needed.
  • Server and Hydration Safety: Apply caching, serialization, suspense, and hydration patterns that prevent waterfalls, flicker, and unnecessary re-renders.
  • Use Case: Review a Next.js page that feels slow, then rewrite the async boundaries, client props, and component structure to make it load and interact faster.

Quick Start

Ask the skill to review a React or Next.js file for performance issues and return the highest-impact fixes.

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 performance bottlenecks in my Next.js application?▼

Fix React performance bottlenecks by refactoring component rendering, optimizing data fetching, and correcting hydration mismatches using best practices like parallelization and suspense.

What's the best way to reduce initial JavaScript bundle size in Next.js?▼

Reduce initial bundle size by avoiding heavyweight imports, deferring non-critical libraries, and applying lazy loading so code loads only when needed.

Why does my Next.js page experience hydration flicker and unnecessary re-renders?▼

Hydration flicker and unnecessary re-renders occur when client props and component structures are poorly managed, requiring caching and serialization reduction to prevent waterfalls.

Can I use React server components to prevent data fetching waterfalls?▼

React server components prevent data fetching waterfalls by applying parallelization, caching, and suspense patterns to manage async boundaries effectively.

How do I optimize state management to improve React rendering speed?▼

Optimize state management by restructuring component boundaries and minimizing serialized props to reduce unnecessary re-renders and improve overall rendering speed.

Related Skills

Explore More Software Engineering Skills→
adibfirmanadibfirman
2

vercel-react-best-practices

Apply Vercel performance rules to refactor React and Next.js code.

Community
Advanced
phuonghxphuonghx
1

nextjs-react-expert

Optimize Next.js and React applications for data fetching, bundle size, and rendering performance.

Community
Advanced
686f6c61686f6c61
105

bundle-size

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

Community
Intermediate
ricablericable

react-best-practices

Review React, TypeScript, and Next.js code for best-practice gaps.

Community
Intermediate