skills.rest
makerjackie
makerjackieCOMMUNITY
Explore all skills by this author →
𝕏@maker_jackieGitHub

vercel-react-best-practices

Optimize React and Next.js runtime performance, bundle size, and data-flow.

Updated Feb 20, 2026
Search Tags:#performance#react#nextjs#code-review#server-components#bundle-optimization
One-click install
npx skills add https://github.com/makerjackie/jackie-skills-cn-top50 --skill vercel-react-best-practices-makerjackie
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/makerjackie/jackie-skills-cn-top50/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/makerjackie/jackie-skills-cn-top50 --skill vercel-react-best-practices-makerjackie

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill codifies Vercel's React and Next.js performance rules to identify and fix common bottlenecks such as server/client waterfalls, oversized bundles, unnecessary serialization, and inefficient rendering patterns. It helps developers and automated agents find high-impact changes that improve time-to-interactive, reduce payloads, and stabilize hydration behavior.

Core Features & Use Cases

  • Waterfall elimination: Patterns and examples to defer awaits, parallelize dependent tasks, and use suspense boundaries for faster initial paint.
  • Bundle and runtime optimization: Guidance on avoiding barrel imports, deferring third-party libraries, dynamic imports, and intent-based preloading.
  • Server-side and RSC guidance: Rules for per-request deduplication, cross-request LRU caching, minimizing serialization at server/client boundaries, and authenticating Server Actions.
  • Developer workflows: Use during code reviews, automated refactoring, new component development, and performance audits to produce prioritized, actionable fixes.

Quick Start

Apply vercel-react-best-practices to a Next.js page or component and produce a prioritized list of specific performance fixes with short code examples.

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 server/client waterfalls and reduce serialization in Next.js?▼

To fix server/client waterfalls and reduce serialization in Next.js, defer awaits, parallelize dependent tasks, and minimize serialization at server/client boundaries using suspense boundaries and per-request deduplication.

What is the best way to optimize React bundle size and prevent oversized imports?▼

The best way to optimize React bundle size is to avoid barrel imports, defer third-party libraries via dynamic imports, and implement intent-based preloading to reduce payloads and stabilize hydration behavior.

How do I implement per-request and cross-request caching for Server Components?▼

Implement per-request and cross-request caching for Server Components by applying LRU caching patterns and deduplication rules while preserving security and SSR constraints during data fetching.

Can I use this to review and refactor existing React components for performance?▼

Yes, you can use this to review and refactor existing React components by running performance audits during code reviews to produce prioritized, actionable fixes with short code examples.

Why does my React Server Component payload size impact time-to-interactive?▼

React Server Component payload size impacts time-to-interactive because unnecessary serialization at server/client boundaries creates bottlenecks that slow down initial paint and hydration.

How to authenticate Server Actions without breaking SSR constraints in Next.js?▼

Authenticate Server Actions without breaking SSR constraints by enforcing security patterns that validate requests at the server boundary while maintaining per-request deduplication and cross-request caching.

Related Skills

Explore More Software Engineering Skills→
wildanjr19wildanjr19
2

vercel-react-best-practices

Apply categorized optimization rules to React and Next.js codebases.

Community
Advanced
BEIRUXBEIRUX

vercel-react-best-practices

Optimize React and Next.js data fetching and bundle size in code reviews.

Official
Advanced
hospitaljobsinhospitaljobsin
7

nextjs-app-router

Structure Next.js 13+ App Router applications with server components and routing patterns.

Official
Advanced
einargudnigeinargudnig

vercel-react-best-practices

Optimize React and Next.js code to reduce bundle and render overhead.

Community
Advanced