skills.rest
ENG-BXI
ENG-BXICOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Enforce React and Next.js refactoring rules to reduce waterfalls and bundle bloat.

1|Updated Jan 28, 2026
Search Tags:#react#bundle size#rendering#next.js#performance optimization#server actions#rsc serialization
One-click install
npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill vercel-react-best-practices-eng-bxi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/ENG-BXI/SAAS-SMART-SHIPMENT-TRACKING-CLIENT-SIDE --skill vercel-react-best-practices-eng-bxi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves performance regressions and slow page loads in React/Next.js applications by providing concrete, high-impact rules that prevent common bottlenecks like waterfalls, oversized bundles, inefficient rendering, and unnecessary server/client payload.

Core Features & Use Cases

  • Performance rule guidance for React Server Components, Server Actions, and Next.js route handlers to eliminate waterfalls and improve response time.
  • Bundle size and loading optimization patterns (dynamic imports, deferred third-party scripts, package import optimization) to improve TTI and LCP.
  • Client and render optimization rules (SWR deduping, derived state handling, re-render avoidance, hydration flicker prevention) to keep UIs responsive and consistent.

Quick Start

Apply the vercel-react-best-practices skill to your Next.js codebase by asking the assistant to review the relevant components and suggest targeted refactors for waterfalls, bundle size, RSC serialization, and client rendering issues.

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 reduce React bundle size and prevent waterfalls in Next.js Server Actions?▼

Prevent React Server Components serialization payload bloat by enforcing strict server/client boundary rules that minimize client-side prop passing and optimize data fetching paths to reduce unnecessary RSC serialization overhead.

How do I fix React hydration flicker and avoid unnecessary re-renders?▼

Fix React hydration flicker and avoid unnecessary re-renders by applying client rendering optimization rules, including SWR deduping, proper derived state handling, and structural refactoring to prevent excessive component tree updates.

What is the best way to optimize Next.js route handlers for slow page loads?▼

The best way to optimize Next.js route handlers for slow page loads is to enforce performance remediation rules that target inefficient rendering, defer third-party scripts, and utilize dynamic imports to improve TTI and LCP.

Can I use this approach for performance remediation across existing React components and pages?▼

Limitations of dynamic imports for React bundle optimization include potential overhead from code-splitting fragmentation and delayed loading of critical third-party scripts, which requires careful deferred loading orchestration to avoid degrading LCP.

Related Skills

Explore More Software Engineering Skills→
blockmatic-iceboxblockmatic-icebox
4

vercel-react-best-practices

Apply React and Next.js performance best practices across components, pages, and data fetching.

Official
Advanced
involvexinvolvex

react-best-practices

Optimize React and Next.js performance with 40 rules across 8 categories.

Community
Advanced
TimeKastTimeKast

react-best-practices

Diagnose React and Next.js performance bottlenecks and generate prioritized fixes.

Official
Advanced
potetopoteto
218

react-best-practices

Apply React performance rules to reduce re-renders in client-side apps.

Community
Intermediate