skills.rest
7loro
7loroCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

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

1|Updated Aug 25, 2024
Search Tags:#performance#suspense#react#next.js#best-practices#bundle-size#server-rendering
One-click install
npx skills add https://github.com/7loro/dotfiles --skill vercel-react-best-practices-7loro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/7loro/dotfiles/tree/main/dot_config/agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/7loro/dotfiles --skill vercel-react-best-practices-7loro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies a comprehensive set of performance best practices for React and Next.js to help teams build faster, more reliable applications.

Core Features & Use Cases

  • A curated collection of 57 rules across 8 priority-based categories, from eliminating waterfalls to bundle size optimization, server-side and client-side performance.
  • Practical guidance with code examples, patterns, and decision guidance for refactoring and automated code generation.
  • Use Case: optimize a Next.js app by reducing initial load, improving TTI, and avoiding rendering waterfalls.

Quick Start

Audit a React/Next.js project with the skill to identify opportunities across rendering, data fetching, and bundling and generate actionable improvements.

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?▼

Optimize React and Next.js performance by applying a curated rule set of 57 best practices across 8 categories, targeting rendering waterfalls, bundle size, and server-side data fetching to improve load times.

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

Eliminate Next.js data fetching waterfalls by applying decision guidance and code patterns that restructure client and server contexts, ensuring parallel data retrieval and faster Time to Interactive.

How can I reduce initial bundle size in React applications?▼

Reduce React bundle size using enforced optimization rules that provide code examples and patterns for efficient component structuring, minimizing initial JavaScript payload and improving load performance.

Does this React performance guidance cover both server and client rendering?▼

Yes, this guidance covers both server and client rendering contexts in Next.js, providing actionable improvements for server-side rendering, Suspense integration, and client-side hydration performance.

When should I use Suspense for performance optimization in Next.js?▼

Use Suspense for Next.js performance optimization when addressing rendering waterfalls and improving Time to Interactive, applying curated patterns to manage asynchronous data fetching and component loading states.

How do I audit a React project for performance improvements?▼

Audit a React project by applying 57 priority-based rules to identify opportunities across rendering, data fetching, and bundling, generating actionable improvements and refactoring guidance.

Related Skills

Explore More Software Engineering Skills→
Let-s-internLet-s-intern
8

vercel-react-best-practices

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

Official
Advanced
SteepCraftSteepCraft

vercel-react-best-practices

Identify and apply optimized React and Next.js performance practices.

Community
Advanced
phuonghxphuonghx
1

nextjs-react-expert

Optimize Next.js and React applications for data fetching, bundle size, and rendering performance.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced