skills.rest
Insik-Han
Insik-HanCOMMUNITY
Explore all skills by this author →
𝕏@insik0_0hanGitHub

vercel-react-best-practices

Apply React and Next.js performance optimization patterns during code reviews and refactors.

16|Updated Jun 6, 2026
Search Tags:#performance#react#optimization#nextjs#ssr#bundle#server-actions
One-click install
npx skills add https://github.com/Insik-Han/han-monorepo-template --skill vercel-react-best-practices-insik-han
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Insik-Han/han-monorepo-template/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Insik-Han/han-monorepo-template --skill vercel-react-best-practices-insik-han

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often struggle with performance regressions due to inconsistent patterns, bulky bundles, and server/client rendering inefficiencies. This skill consolidates battle-tested optimization practices from Vercel Engineering into an actionable reference that teams can apply during development, reviews, and refactors.

Core Features & Use Cases

  • Comprehensive, categorized performance guidelines (8 areas) with concrete patterns and real-world examples.
  • Clear guidance for both client and server contexts, including server actions, data fetching, and bundle optimizations.
  • Use during component design, code reviews, and architectural decisions to prevent regressions and accelerate performance improvements.

Quick Start

Read the Vercel React Best Practices guide and apply the categorized rules during development and reviews.

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 during code reviews?▼

Apply categorized Vercel engineering patterns during code reviews to identify and fix React/Next.js performance regressions across waterfalls, bundle size, and SSR/CSR contexts.

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

The best way to reduce bundle size in a Next.js application is to apply concrete optimization patterns that refactor components and routes, ensuring efficient client and server bundle delivery.

How do I prevent data fetching waterfalls in React server components?▼

Prevent data fetching waterfalls by enforcing consolidated optimization patterns for React server components that target parallel data retrieval and efficient SSR across server contexts.

Does this guide cover safe server actions implementation in Next.js?▼

Yes, it covers safe server actions implementation in Next.js by providing concrete examples and categorized rules for writing, reviewing, and refactoring server-side logic securely.

Why does my Next.js app struggle with server and client rendering inefficiencies?▼

Next.js apps struggle with rendering inefficiencies due to inconsistent patterns and bulky bundles, resolved by applying battle-tested optimization practices across web and server contexts.

When should I refactor React components for SSR and CSR performance?▼

Refactor React components for SSR and CSR performance when architectural decisions introduce regressions, applying categorized guidelines during component design to accelerate improvements.

Related Skills

Explore More Software Engineering Skills→
tulioftuliof

vercel-react-best-practices

Apply performance optimization guidelines to React and Next.js applications.

Community
Advanced
nicholasgriffintnnicholasgriffintn
2

vercel-react-best-practices

Apply Vercel best practices to optimize React and Next.js performance.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced
angelcreativeangelcreative

optimize

Analyze application performance bottlenecks and provide optimization strategies for Core Web Vitals.

Community
Advanced