skills.rest
mashharuki
mashharukiCOMMUNITY
Explore all skills by this author →
Website𝕏@haruki_web3GitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to code.

1|Updated Dec 18, 2025
One-click install
npx skills add https://github.com/mashharuki/claude-code-sample --skill vercel-react-best-practices-mashharuki
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mashharuki/claude-code-sample/tree/main/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/mashharuki/claude-code-sample --skill vercel-react-best-practices-mashharuki

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides guidelines to optimize React and Next.js performance, enabling teams to write, review, or refactor code with performance in mind.

Core Features & Use Cases

  • Establishes best practices for code-splitting, lazy loading, and bundling to reduce initial load times.
  • Guides server/client data-fetching patterns to avoid waterfalls and optimize SSR/CSR interactions.
  • Helps with auditing and refactoring efforts for performance improvements across React components and Next.js pages.

Quick Start

Provide a performance audit for a React/Next.js project and generate a prioritized optimization plan.

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 LCP and TTI?▼

React and Next.js performance optimization involves enforcing code-splitting, leveraging server components, and applying client-side caching to minimize serialization and improve TTI and LCP.

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

Avoiding data-fetching waterfalls in Next.js requires guiding server and client data-fetching patterns to optimize SSR and CSR interactions, preventing sequential fetches that delay rendering.

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

Auditing a React project for performance refactoring involves reviewing components and Next.js pages to generate a prioritized optimization plan targeting code-splitting and lazy loading improvements.

When do I need server components versus client-side caching in Next.js?▼

Server components are needed to reduce client-side JavaScript and improve initial load, while client-side caching is used to minimize redundant data-fetching and serialization during subsequent navigations.

Does this approach support bundle optimization for React components?▼

Yes, bundle optimization for React components is supported by establishing best practices for code-splitting, lazy loading, and bundling to effectively reduce initial load times.

Related Skills

DwsyDwsy
18

react-best-practices

Identify and implement React performance best practices for modern web applications.

Community
Advanced
Logisoft-webLogisoft-web

react-best-practices

Optimizes React and Next.js apps via code splitting, lazy loading, and render improvements.

Community
Intermediate
SiddharthChillaleSiddharthChillale

vercel-react-best-practices

Detect React and Next.js performance anti-patterns and prescribe rule-referenced fixes.

Community
Intermediate
yuhle-qugyuhle-qug

react-performance

Profile React apps with React DevTools and web-vitals to optimize rendering and bundles.

Community
Advanced