skills.rest
oldwombat
oldwombatCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply 57 performance rules across 8 categories to React/Next.js code.

Updated Feb 14, 2026
Search Tags:#performance#react#nextjs#best-practices#bundling#server-components#web-performance
One-click install
npx skills add https://github.com/oldwombat/nekrosol --skill vercel-react-best-practices-oldwombat
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/oldwombat/nekrosol/tree/main/backend/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/oldwombat/nekrosol --skill vercel-react-best-practices-oldwombat

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to inconsistent patterns, bloated bundles, and inefficient data fetching. This skill provides a centralized, actionable set of best practices to help teams write, review, and refactor code for speed and reliability across both client and server contexts.

Core Features & Use Cases

  • 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
  • Clear patterns for optimizing data fetching, server actions, bundle size, and rendering performance.
  • Use cases include building new components/pages, auditing existing codebases, and guiding performance-focused code reviews.

Quick Start

Review a React/Next.js component or page and apply the applicable performance rules to reduce render time and bundle size.

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 for slow rendering and bloated bundles?▼

React and Next.js performance optimization involves enforcing 57 best-practice rules across 8 categories, targeting data fetching, server actions, and bundle minimization to reduce render times and bundle size.

What are the best practices for data fetching in Next.js server components?▼

Next.js server components data fetching best practices centralize client and server retrieval patterns to optimize rendering and avoid bottlenecks, ensuring reliable performance across components and pages.

How do I reduce bundle size when building React applications?▼

Reducing React bundle size requires applying formal code-splitting and bundle-minimization guidelines across components and pages, validating code changes to meet performance targets.

Can I use these performance rules to audit an existing React codebase?▼

You can audit an existing React codebase using these 57 prioritized rules to guide performance-focused code reviews and automated refactoring for speed and reliability.

When should I refactor code-splitting patterns in Next.js?▼

Refactor code-splitting patterns in Next.js when experiencing bloated bundles or performance regressions, applying formal bundle-minimization guidelines to validate code changes against performance targets.

Related Skills

Explore More Software Engineering Skills→
theGobindSinghtheGobindSingh
1

react-best-practices

Review TSX files for React and Next.js performance optimizations.

Community
Advanced
PsycarloPsycarlo
1

vercel-react-best-practices

Apply Vercel's 57 React and Next.js performance rules across 8 categories.

Community
Advanced
H2OSLabsH2OSLabs

vercel-react-best-practices

Apply 57 performance rules to React and Next.js applications.

Official
Advanced
angelcreativeangelcreative

optimize

Analyze application performance bottlenecks and provide optimization strategies for Core Web Vitals.

Community
Advanced