skills.rest
jrmatherly
jrmatherlyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Audit React and Next.js projects against 45 performance rules.

Updated Jan 30, 2026
Search Tags:#performance#refactoring#react#next.js#server components#bundle optimization
One-click install
npx skills add https://github.com/jrmatherly/metorial-workspace --skill vercel-react-best-practices-jrmatherly
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/jrmatherly/metorial-workspace/tree/main/.github/skills/vercel-react-best-practices
Command: npx skills add https://github.com/jrmatherly/metorial-workspace --skill vercel-react-best-practices-jrmatherly

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates React and Next.js performance guidance into a single, auditable set of rules to help teams ship faster and more reliable UIs.

Core Features & Use Cases

  • 8 priority categories covering eliminating waterfalls, bundle optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • 45+ rules with real-world examples and actionable steps to integrate into code reviews and automation.
  • Use cases include starting new React/Next.js projects, auditing existing apps, and driving automated refactoring and code generation.

Quick Start

Apply vercel-react-best-practices to your React/Next.js projects by reviewing the included rules and AGENTS.md, then run a code audit to identify performance hotspots and recommended changes.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for React and Next.js performance optimization?▼

React and Next.js performance optimization involves eliminating data waterfalls, optimizing bundle sizes, and leveraging server components. This Skill provides 45+ structured rules across 8 priority categories to guide code audits and automated refactoring.

How do I eliminate data fetching waterfalls in Next.js server components?▼

To eliminate data fetching waterfalls in Next.js server components, apply structured rules for server-side data fetching and parallel requests. The Skill provides prioritized categories to identify sequential fetching and guide refactoring for faster UI rendering.

Can I automate React bundle optimization during code refactoring?▼

You can automate React bundle optimization during code refactoring using this Skill's formal rule set. It specifies actionable steps and YAML-frontmatter metadata to integrate directly into code reviews and automated code generation workflows.

How do I audit an existing React application for rendering performance issues?▼

Auditing an existing React application for rendering performance requires checking re-render optimization and client-side data fetching. This Skill provides a priority-based category set to identify performance hotspots and generate recommended changes.

Does this React performance guide cover advanced Next.js patterns?▼

This React performance guide covers advanced Next.js patterns through a dedicated priority category. It includes real-world examples for server-side performance, JavaScript performance, and complex rendering to drive reliable UI development.

Related Skills

Explore More Software Engineering Skills→
Joncik91Joncik91
29

frontend

Provide reusable React patterns for component design, accessibility, and performance.

Community
Intermediate
patrickhaahrpatrickhaahr

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for rendering, data fetching, and bundle size.

Community
Basic
padjeipadjei

design-systems-slds-validate

Validate Lightning Web Components for SLDS compliance and generate a detailed scorecard.

Community
Advanced
TrainLCDTrainLCD
71

argent-react-native-profiler

Profile React Native Hermes apps for re-render counts and CPU usage.

Official
Advanced