skills.rest
einargudnig
einargudnigCOMMUNITY
Explore all skills by this author →
Website𝕏@einargudniGitHub

vercel-react-best-practices

Optimize React and Next.js code to reduce bundle and render overhead.

Updated Oct 1, 2024
Search Tags:#performance#react#nextjs#code-review#server-side#data-fetching#bundle-optimization
One-click install
npx skills add https://github.com/einargudnig/dotfiles --skill vercel-react-best-practices-einargudnig
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/einargudnig/dotfiles/tree/main/claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/einargudnig/dotfiles --skill vercel-react-best-practices-einargudnig

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide eliminates common React and Next.js performance bottlenecks by providing prescriptive rules to prevent waterfalls, reduce bundle size, and optimize server- and client-side data flows.

Core Features & Use Cases

  • Eliminate Waterfalls: Start promises early, parallelize dependent work, and use Suspense boundaries to improve initial paint and throughput.
  • Bundle & Loading Strategies: Avoid barrel imports, use dynamic imports, defer non-critical libraries, and preload based on user intent to minimize TTI and cold-start costs.
  • Server & Rendering Optimizations: Apply per-request deduplication, cross-request LRU caching, minimize RSC serialization, and schedule non-blocking work with after() for faster responses and lower server latency.
  • Use Cases: Automated code reviews, refactoring pull requests, generating performance-focused diffs, and guiding LLM agents to produce performant React/Next.js code.

Quick Start

Analyze the repository and produce a prioritized list of concrete React and Next.js performance fixes with code examples and rationale.

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 bottlenecks during code review?▼

To optimize React and Next.js performance during code review, eliminate client and server bottlenecks by parallelizing async patterns, using direct imports, and minimizing RSC serialization to reduce bundle and render overhead.

What's the best way to eliminate data fetching waterfalls in Next.js?▼

To eliminate data fetching waterfalls, start promises early, parallelize dependent work, and use Suspense boundaries to improve initial paint and throughput in your React and Next.js applications.

How do I reduce React bundle size and loading overhead?▼

Reduce React bundle size and loading overhead by avoiding barrel imports, using dynamic imports, deferring non-critical libraries, and preloading based on user intent to minimize time to interactive costs.

How does server-side rendering optimization work for RSC serialization?▼

Server-side rendering optimization minimizes RSC serialization by applying per-request deduplication, cross-request LRU caching, and scheduling non-blocking work with after() to achieve faster responses and lower server latency.

Can I use this to guide LLM agents in generating performant React code?▼

Yes, you can use it to guide LLM agents in generating performant React code, refactoring pull requests, generating performance-focused diffs, and conducting automated code reviews for React and Next.js applications.

Related Skills

Explore More Software Engineering Skills→
MikisbellMikisbell

vercel-react-best-practices

Apply React and Next.js performance optimization rules to codebases.

Community
Advanced
quan0715quan0715
31

vercel-react-best-practices

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

Community
Advanced
makerjackiemakerjackie

vercel-react-best-practices

Optimize React and Next.js runtime performance, bundle size, and data-flow.

Community
Advanced
AlexMikhalevAlexMikhalev
35

typescript-circular-dependency

Detect circular import dependencies in TypeScript and JavaScript projects.

Community
Advanced