skills.rest
babually
babuallyCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Detect React and Next.js performance anti-patterns and recommend best-practice refactors.

1|Updated Jun 27, 2026
Search Tags:#performance#suspense#refactoring#react#next.js#server actions#bundle optimization
One-click install
npx skills add https://github.com/babually/bongo-template --skill vercel-react-best-practices-babually
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/babually/bongo-template/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/babually/bongo-template --skill vercel-react-best-practices-babually

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers avoid common React and Next.js performance pitfalls that cause slow loads, wasted re-renders, unnecessary network waterfalls, and oversized bundles.

Core Features & Use Cases

  • Performance Review Guidance: Identifies better patterns for async data fetching, Suspense boundaries, server actions, and request parallelization.
  • Bundle Optimization: Recommends strategies like direct imports, dynamic loading, and preloading to reduce initial JavaScript cost.
  • Rendering and State Efficiency: Covers memoization, effect dependencies, event handling, and rendering patterns that improve responsiveness.
  • Use Case: A developer can use this Skill to refactor a sluggish Next.js page, diagnose why a component re-renders too often, or rewrite an API route to fetch data in parallel.

Quick Start

Ask the skill to review a React or Next.js component for performance issues and suggest concrete refactors.

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 component re-rendering issues and unnecessary network waterfalls?▼

Fix React component re-rendering and network waterfalls by applying memoization, correcting effect dependencies, and parallelizing data fetching to prevent slow loads and wasted renders.

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

Reduce initial JavaScript bundle size by applying direct imports, dynamic loading, and preloading strategies to optimize component delivery and lower the initial payload cost.

How do I optimize async data fetching and Suspense boundaries in Next.js?▼

Optimize Next.js async data fetching and Suspense boundaries by identifying better request parallelization patterns and refactoring data flows to avoid blocking renders.

Does this guidance cover refactoring Next.js server actions and serialization handling?▼

Yes, refactoring guidance covers Next.js server actions and serialization handling, diagnosing performance anti-patterns to recommend best-practice data fetching and render tuning.

When should I use dynamic imports versus direct imports for React performance tuning?▼

Use dynamic imports to defer loading non-critical components and reduce initial bundle cost, while direct imports optimize critical render paths when immediate availability is required.

Related Skills

Explore More Software Engineering Skills→
quan0715quan0715
31

vercel-react-best-practices

Analyze React and Next.js code for performance pitfalls and actionable fixes.

Community
Advanced
rbaumierrbaumier
4

react

Diagnose and optimize React/Next.js performance in code reviews and audits.

Community
Advanced
AgentientAgentient
2

frontend-bundle-analysis-and-optimization

Analyze and optimize JavaScript bundle size in Next.js projects.

Official
Advanced
firstsun-devfirstsun-dev

react-best-practices

Codify React component best practices for TypeScript and JavaScript codebases.

Official
Advanced