vercel-react-best-practices

Name: vercel-react-best-practices
Availability: InStock
Author: kim-kyoung-oh

Apply React and Next.js performance best practices to components, pages, and data flows.

Updated Feb 9, 2026

Search Tags:#performance #refactoring #react #nextjs #bundle #server-components

Ready to run

npx skills add https://github.com/KIM-KYOUNG-OH/dotfiles --skill vercel-react-best-practices-kim-kyoung-oh

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/KIM-KYOUNG-OH/dotfiles/tree/main/.claude/skills/react-best-practices
Command: npx skills add https://github.com/KIM-KYOUNG-OH/dotfiles --skill vercel-react-best-practices-kim-kyoung-oh

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance pitfalls in rendering, data-fetching, and bundling, leading to slower user experiences and higher maintenance costs.

Core Features & Use Cases

Identify and apply proven performance patterns for React and Next.js projects.
Guide refactoring of components, pages, and data-fetch strategies to improve TTI/LCP, bundle size, and server-side rendering.
Real-world use: during code reviews or PRs, reference these guidelines to enforce best practices.

Quick Start

Review the guidelines and start applying the documented performance patterns to React/Next.js code 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?▼

To optimize React and Next.js performance during code reviews, identify and apply proven patterns for bundle size, server components, and data fetching. This enforces best practices to improve TTI, LCP, and server-side rendering.

What is the best way to reduce bundle size with Next.js server components?▼

The best way to reduce bundle size with Next.js server components is refactoring components and data-fetch strategies according to documented performance patterns. This optimizes rendering flows and enforces measurable bundle improvements.

How do I refactor data fetching strategies to improve Next.js rendering?▼

Refactor data fetching strategies to improve Next.js rendering by applying best practices for server components and progressive enhancement. This guides modifications to data flows and validates improvements through measurable metrics.

Can I integrate React performance patterns with my existing tooling?▼

Yes, you can integrate React performance patterns with existing tooling. The guidelines support integration with your current setup and enforce safety with guardrails while validating improvements through measurable patterns.

Why does my React project suffer from slow rendering and high maintenance costs?▼

React projects suffer from slow rendering and high maintenance costs due to performance pitfalls in data-fetching and bundling. Applying Next.js performance best practices resolves these issues by optimizing components, pages, and data flows.