skills.rest
mhintz1980
mhintz1980COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify and apply React/Next.js performance patterns for components, data fetching, and bundles.

Updated Nov 16, 2025
Search Tags:#performance#react#nextjs#server-components#bundle-optimization#client-patterns
One-click install
npx skills add https://github.com/mhintz1980/ptl-lova --skill vercel-react-best-practices-mhintz1980
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mhintz1980/ptl-lova/tree/main/.github/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mhintz1980/ptl-lova --skill vercel-react-best-practices-mhintz1980

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The React Best Practices skill consolidates high-impact performance guidelines to help teams write faster, more reliable React and Next.js code.

Core Features & Use Cases

  • Provides 8 priority categories and 45+ rules to guide development, reviews, and automated refactoring.
  • Offers concrete patterns for server and client data fetching, bundling, and rendering to reduce waterfalls, improve TTI, and optimize bundle size.
  • Useful during component authoring, code reviews, architecture decisions, and onboarding to enforce safe performance improvements.

Quick Start

Analyze a typical React/Next.js component to identify a high-impact rule and apply a safe, concrete improvement; for example, replace a sequential data fetch with Promise.all for independent fetches.

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 better runtime speed?▼

To optimize React and Next.js performance, apply high-impact patterns for server and client data fetching, bundling, and rendering to reduce waterfalls, improve TTI, and optimize bundle size using 45 production-ready rules.

What is the best way to reduce data fetching waterfalls in Next.js server components?▼

The best way to reduce data fetching waterfalls in Next.js server components is replacing sequential fetches with Promise.all for independent requests, minimizing load times and improving user experience.

Can I use these React performance rules for code reviews and refactoring?▼

Yes, you can use these React performance rules for code reviews and refactoring. They provide concrete patterns and production-ready examples to guide safe component refactoring, architecture decisions, and automated code generation.

How do I improve bundle size and Time to Interactive (TTI) in a Next.js application?▼

Improve bundle size and TTI in a Next.js application by applying targeted client and server rendering patterns, optimizing bundling strategies, and enforcing safe performance improvements during component authoring.

What are the limitations when applying Next.js server component performance patterns?▼

Limitations when applying Next.js server component performance patterns include ensuring safe refactoring boundaries, as incorrect application of server and client data fetching or bundle optimization rules can impact runtime performance and reliability.

Related Skills

Explore More Software Engineering Skills→
MGriotMGriot

vercel-react-best-practices

Identify and apply React/Next.js performance optimizations to components, pages and data flows.

Community
Advanced
tulioftuliof

vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js applications.

Community
Advanced
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
Mark393295827Mark393295827
1

frontend-patterns

Provide reusable React and Next.js frontend patterns with TypeScript examples.

Community
Advanced