skills.rest
Norfolk-Group
Norfolk-GroupOFFICIAL
Explore all skills by this author →
GitHub

vercel-react-best-practices

Audit React and Next.js codebases for performance anti-patterns and bundle-size issues.

Updated Aug 23, 2026
Search Tags:#performance#react#optimization#server#nextjs#code-review#bundle-size
One-click install
npx skills add https://github.com/Norfolk-Group/H-Analytics --skill vercel-react-best-practices-norfolk-group
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Norfolk-Group/H-Analytics/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Norfolk-Group/H-Analytics --skill vercel-react-best-practices-norfolk-group

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Helps developers and AI agents find and fix performance anti-patterns in React and Next.js codebases, reducing slow renders, server-side waterfalls, large bundles, and inefficient data fetching that harm load times and responsiveness.

Core Features & Use Cases

  • Comprehensive rule set: 69 rules across 8 categories (waterfalls, bundle size, server performance, client fetching, re-renders, rendering, JS micro-optimizations, advanced patterns).
  • Actionable examples: Incorrect vs correct code snippets, impact estimates, and prioritized guidance for automated refactoring or human review.
  • Use case: Audit a Next.js app to eliminate API waterfalls, apply dynamic imports for heavy components, hoist static I/O, and implement cross-request caching to improve TTI and reduce server costs.

Quick Start

Audit the repository for React/Next.js performance issues and produce prioritized code changes to eliminate waterfalls, reduce bundle size, and harden server-side patterns.

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 eliminate async waterfalls in Next.js data fetching?▼

Eliminate async waterfalls by hoisting static I/O operations and implementing cross-request caching on the server. This approach prevents sequential data fetching delays and improves Next.js page load performance.

What's the best way to reduce bundle size in a React application?▼

Reduce React bundle size by applying dynamic imports and conditional loading for heavy components. This ensures only necessary code is shipped to the client, improving initial load times.

How do I audit a React codebase for performance anti-patterns?▼

Audit a React codebase by checking against a comprehensive rule set covering re-renders, client fetching, and JS micro-optimizations. This identifies slow renders and inefficient patterns for automated refactoring.

Does this approach secure Server Actions in Next.js?▼

Yes, securing Next.js Server Actions involves implementing safe authentication checks during code review. This prevents unauthorized access and hardens server-side execution patterns.

Why are my React components re-rendering unnecessarily?▼

React components re-render unnecessarily due to unstable references or missing memoization. Apply JS micro-optimizations and review component rendering logic to prevent expensive DOM updates.

Related Skills

Explore More Software Engineering Skills→
wellnessbrotherjay-debugwellnessbrotherjay-debug

vercel-react-best-practices

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

Community
Basic
michaelshimelesmichaelshimeles
14

react-best-practices

Optimize React and Next.js performance by eliminating waterfalls and reducing bundle size.

Community
Intermediate
mikeOnBreezemikeOnBreeze
284

react-best-practices

Eliminate React and Next.js performance bottlenecks with prioritized actionable rules.

Community
Intermediate
gaebalaigaebalai
2

db-query-review

Analyze application code and SQL queries for database performance issues.

Community
Advanced