skills.rest
FrekiManagarm
FrekiManagarmCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Refactor React and Next.js code to eliminate waterfalls and reduce bundle size.

Updated Feb 24, 2026
Search Tags:#react#bundle size#performance optimization#server actions#nextjs#parallel data fetching#rsc serialization
One-click install
npx skills add https://github.com/FrekiManagarm/dunlo --skill vercel-react-best-practices-frekimanagarm
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/FrekiManagarm/dunlo/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/FrekiManagarm/dunlo --skill vercel-react-best-practices-frekimanagarm

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you eliminate common performance bottlenecks in React and Next.js code by guiding how to avoid waterfalls, reduce bundle size, and minimize unnecessary re-renders and serialization.

Core Features & Use Cases

  • Waterfall elimination & parallelization: Use Promise.all() patterns and component composition to reduce sequential data fetching delays.
  • Bundle size optimization: Avoid heavy upfront imports, defer non-critical third-party code, and use dynamic imports for large components.
  • Server/client performance safeguards: Reduce RSC-to-client payload by minimizing props serialization and use React.cache() or LRU caching appropriately.
  • Security for Server Actions: Ensure each server action performs its own authentication and authorization checks.

Quick Start

Apply the vercel-react-best-practices skill to your React/Next.js codebase by asking an AI assistant to refactor the flagged areas in your components, route handlers, and Server Actions to follow the guide’s performance and security rules.

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 eliminate data fetching waterfalls in Next.js and React components?▼

Eliminate data fetching waterfalls by replacing sequential awaits with Promise.all() parallelization and component composition patterns, which reduces sequential data fetching delays and improves loading times.

What is the best way to reduce bundle size in a React application?▼

Reduce bundle size by avoiding heavy upfront imports, deferring non-critical third-party code, and using next/dynamic for large components to optimize loading and improve TTI/LCP metrics.

Why does my React Server Component payload remain large after code splitting?▼

RSC payload remains large when excessive props serialization occurs between server and client; minimize serialized props and apply React.cache() or LRU caching with correct boundaries to reduce payload.

Does Next.js Server Actions require authentication checks inside every action?▼

Next.js Server Actions require authentication and authorization checks inside every server action to ensure security, because client-side route protection does not secure the action endpoint itself.

Can I use after() for non-blocking work in Next.js without delaying the response?▼

Use after() in Next.js to execute non-blocking work after the response completes, ensuring background tasks like analytics or logging do not delay the initial page render and loading.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

bundle-analyzer

Analyze JavaScript bundle sizes and propose code-splitting optimizations.

Community
Intermediate
quanganh208quanganh208

ck:react-best-practices

Audit React and Next.js pages for waterfalls and bundle bloat.

Community
Advanced
Alfie728Alfie728

vercel-react-best-practices

Audit Next.js pages for data-fetching waterfalls and bundle bloat.

Community
Advanced
laguagulaguagu
58

vercel-react-best-practices

Identify and optimize React/Next.js performance bottlenecks in codebases.

Community
Advanced