skills.rest
zoonk
zoonkOFFICIAL
Explore all skills by this author →
Website𝕏@zoonkcomGitHub

vercel-react-best-practices

Apply Vercel performance optimization patterns to React/Next.js codebases.

146|12|Updated Jan 30, 2025
Search Tags:#performance#react#optimization#vercel#nextjs#server-components#bundle-size
One-click install
npx skills add https://github.com/zoonk/zoonk --skill vercel-react-best-practices-zoonk
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zoonk/zoonk/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/zoonk/zoonk --skill vercel-react-best-practices-zoonk

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React/Next.js projects often struggle with performance bottlenecks. This skill consolidates Vercel-engineered best practices to guide developers in identifying and applying proven optimization patterns across components, data fetching, bundling, and server interactions.

Core Features & Use Cases

  • Comprehensive guidelines for eliminating waterfalls, bundle size optimization, and server-side/perf patterns.
  • Use cases include SSR/CSR, data fetching, code-splitting, and lazy loading to accelerate TTI/LCP.
  • Provides actionable patterns that can be automated or used as reference during review.

Quick Start

Apply these guidelines to a current React/Next.js project to detect bottlenecks and implement recommended patterns.

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 performance and reduce bundle size in a Next.js application?▼

Optimize React performance by applying Vercel-engineered patterns like code-splitting, lazy loading, and server components to reduce bundle size and accelerate TTI and LCP metrics.

What is the best way to eliminate data fetching waterfalls in Next.js server components?▼

Eliminate data fetching waterfalls by applying curated optimization patterns for server components and server actions that parallelize requests and improve SSR performance.

Can I use these Next.js optimization patterns for both client-side rendering and server-side rendering?▼

These optimization patterns support both SSR and CSR contexts, providing actionable guidelines for data fetching, code-splitting, and lazy loading across components, pages, and APIs.

How do I refactor an existing React codebase to use server actions and lazy loading?▼

Refactor React codebases by enforcing curated rules that guide the implementation of server actions, lazy loading, and code-splitting to detect bottlenecks and support automated code generation.

When should I not use server components for data fetching in my React application?▼

Consider client-side rendering alternatives when static optimization patterns cannot resolve specific dynamic data fetching requirements or when server-side rendering introduces unintended performance bottlenecks.

Related Skills

Explore More Software Engineering Skills→
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
HieubkavHieubkav

web-performance-audit

Measure Core Web Vitals and identify web performance bottlenecks.

Community
Advanced
jaimedhenriquesjaimedhenriques

vercel-react-best-practices

Identify and fix React and Next.js performance issues in component code.

Community
Advanced
djscruggsdjscruggs

react

Apply React 19 patterns for hooks, Suspense, lazy loading, and TypeScript.

Community
Intermediate