skills.rest
artreimus
artreimusCOMMUNITY
Explore all skills by this author →
𝕏@artreimusGitHub

vercel-react-best-practices

Refactor React and Next.js code to reduce waterfalls, bundle weight, and re-renders.

Updated Nov 1, 2024
Search Tags:#code review#suspense#react#bundle size#next.js#performance optimization#server actions
One-click install
npx skills add https://github.com/artreimus/ylang-labs-blog --skill vercel-react-best-practices-artreimus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/artreimus/ylang-labs-blog/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/artreimus/ylang-labs-blog --skill vercel-react-best-practices-artreimus

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps eliminate common React and Next.js performance pitfalls by providing actionable rules that reduce waterfalls, shrink bundles, and avoid unnecessary re-renders and hydration issues.

Core Features & Use Cases

  • Performance rule guidance for agents and LLMs: follows categorized best practices (waterfalls, bundle size, server-side, client-side, re-render optimization, rendering, and JS micro-optimizations) with concrete incorrect vs. correct patterns.
  • Deterministic refactoring targets: guides automated code review or generation to restructure async work for parallelism, optimize imports, and use streaming correctly with Suspense.
  • Developer-friendly guardrails: includes rules that prevent request-scoped data leaks, reduce RSC/client serialization bloat, and improve loading UX with correct dynamic imports and script strategies.

Quick Start

Use the vercel-react-best-practices skill to refactor the codebase for faster load time and smoother UI by applying the relevant React/Next.js performance rules to the identified issues in your PR.

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 application performance by reducing waterfalls?▼

Optimize React and Next.js performance by restructuring async control flow in Server Actions and server routes for parallelism, eliminating sequential data fetches, and applying streaming strategies with Suspense to prevent waterfall rendering.

What is the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size by optimizing imports, applying correct dynamic imports, and minimizing React Server Component and client serialization bloat to shrink the overall JavaScript payload shipped to the browser.

How do I prevent unnecessary re-renders and hydration issues in React?▼

Prevent unnecessary React re-renders and hydration issues by selecting correct rendering strategies, improving client data fetching patterns, and applying developer-friendly guardrails that avoid request-scoped data leaks.

Can I use Suspense and streaming to improve loading UX in Next.js?▼

Yes, you can use Suspense and streaming in Next.js to improve loading UX by selecting correct rendering and hydration strategies, applying dynamic imports, and configuring script strategies for smoother UI transitions.

How do I refactor React code to improve client data fetching patterns?▼

Refactor React client data fetching by applying categorized performance rules that optimize async control flow, reduce request waterfalls, and ensure correct rendering strategies are used for Suspense and hydration boundaries.

Related Skills

Explore More Software Engineering Skills→
aberrantCodeaberrantCode
1

vercel-react-best-practices

Identify and eliminate performance bottlenecks in React and Next.js applications.

Community
Intermediate
MinhDuyDEVMinhDuyDEV

react-best-practices

Optimize React and Next.js applications for performance improvements.

Community
Advanced
RayzerrekRayzerrek

vercel-react-best-practices

Optimize React and Next.js codebases by eliminating waterfalls and reducing bundle size.

Community
Advanced
pckienuitpckienuit

react-best-practices

Analyze React and Next.js codebases for performance bottlenecks and prioritized fixes.

Community
Advanced