skills.rest
kaissalha
kaissalhaCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply React/Next.js performance best practices to optimize applications.

Updated Aug 27, 2026
Search Tags:#automation#performance#refactoring#react#nextjs#best-practices
One-click install
npx skills add https://github.com/kaissalha/webld --skill vercel-react-best-practices-kaissalha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/kaissalha/webld/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/kaissalha/webld --skill vercel-react-best-practices-kaissalha

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps frequently struggle with performance due to waterfalls, bloated bundles, and suboptimal data-fetch strategies. This skill codifies Vercel Engineering's best practices to guide writing, reviewing, and refactoring code for faster, more reliable apps.

Core Features & Use Cases

  • Comprehensive guidelines across 8 categories (async, bundle, server, client, rerender, rendering, js, advanced) to cover critical performance patterns.
  • Clear triggers for action: when building, reviewing, or refactoring React/Next.js code, data fetching, or bundle optimization to improve startup and runtime performance.
  • Concrete examples and actionable patterns that can be loaded into automation for refactoring and code generation.

Quick Start

Review a React/Next.js project and apply the outlined best practices to optimize performance.

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 fix React and Next.js waterfall issues and bloated bundle sizes?▼

Fix React and Next.js performance issues by applying codified best practices for data fetching, rendering, and bundle optimization. This skill guides automated refactoring to eliminate waterfalls and reduce bundle bloat.

What is the best way to optimize SSR and CSR data fetch strategies in Next.js?▼

The best way to optimize Next.js data fetch strategies is applying targeted patterns for server and client rendering. This ensures reliable data fetching while improving startup and runtime performance.

How do I automate React code refactoring for performance audits?▼

Automate React refactoring by loading actionable performance patterns into your code generation tools. This skill provides concrete examples across eight categories to guide scalable UI audits.

Does this React performance refactoring approach work with typical React stacks?▼

Yes, these React performance patterns are designed for typical React stacks. They cover async, bundle, server, client, rerender, rendering, and JS performance to ensure scalable, fast UIs.

Why does my Next.js app have poor runtime performance despite using server components?▼

Poor Next.js runtime performance often stems from suboptimal client-side rerendering and JS execution. Apply these best practices to review and refactor rendering strategies for faster UIs.

Related Skills

Explore More Software Engineering Skills→
martind751martind751

vercel-react-best-practices

Apply Vercel's 57 performance rules to React and Next.js code.

Community
Intermediate
tmcfarlanetmcfarlane
105

vercel-react-best-practices

Review React and Next.js code for performance and scalability.

Community
Advanced
ZhanlinCuiZhanlinCui
178

vercel-react-best-practices

Apply Vercel performance best practices to React and Next.js projects.

Community
Basic
veilkeyveilkey
7

rust-ci

Automate Rust CI build, test, lint, format, and security checks.

Official
Intermediate