skills.rest
0xharryriddle
0xharryriddleCOMMUNITY
Explore all skills by this author →
𝕏@0xHarryNguyenVNGitHub

vercel-react-best-practices

Review React and Next.js code against eight performance categories.

3|Updated Mar 22, 2026
Search Tags:#performance#react#optimization#nextjs#code-review#bundle#server-components
One-click install
npx skills add https://github.com/0xharryriddle/codex-field-kit --skill vercel-react-best-practices-0xharryriddle
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/0xharryriddle/codex-field-kit/tree/main/archive/upstream/examples/skills/vercel-react-best-practices
Command: npx skills add https://github.com/0xharryriddle/codex-field-kit --skill vercel-react-best-practices-0xharryriddle

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide provides actionable performance patterns for React and Next.js to help teams write, review, and refactor code with performance in mind.

Core Features & Use Cases

  • Prioritized rules across 8 categories (async, bundle, server, client, rerender, rendering, javascript, advanced)
  • Concrete examples and practical guardrails for optimizing waterfalls, bundle imports, SSR, and client-side data fetching
  • Use cases include code reviews, performance-focused refactors, and architecture decisions to improve TTI and LCP.

Quick Start

Review React/Next.js code against the eight priority categories and apply the recommended patterns to improve performance immediately.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for React and Next.js performance optimization?▼

React and Next.js performance optimization involves applying actionable patterns across eight categories including async, bundle, server, client, rerender, rendering, javascript, and advanced techniques to improve TTI and LCP.

How do I optimize bundle imports and server components in Next.js?▼

To optimize bundle imports and server components in Next.js, apply concrete guardrails and prioritized rules that target waterfalls, bundle imports, SSR, and client-side data fetching to improve performance.

Can I use this guide for React code reviews and performance refactoring?▼

Yes, this guide is designed for React code reviews and performance-focused refactoring, providing concrete examples and practical guardrails to help teams write and review code with performance in mind.

What's the best way to improve TTI and LCP in Next.js applications?▼

The best way to improve TTI and LCP in Next.js applications is to review code against eight priority categories and apply recommended performance patterns for async operations, rendering, and bundle optimization.

Does this performance guide cover both server-side rendering and client-side data fetching?▼

Yes, this performance guide covers both server-side rendering and client-side data fetching, providing concrete examples and practical guardrails for optimizing waterfalls and SSR in React and Next.js.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
beemanbeeman
12

vercel-react-native-skills

Codify React Native and Expo performance best practices for mobile apps.

Community
Advanced
Renzo-TognellaRenzo-Tognella

code-review

Automates code review for Ruby on Rails applications using static analysis tools.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

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

Community
Advanced