skills.rest
KIM-KYOUNG-OH
KIM-KYOUNG-OHCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

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
One-click install
npx skills add https://github.com/KIM-KYOUNG-OH/dotfiles --skill vercel-react-best-practices-kim-kyoung-oh
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
YanBerdinYanBerdin
2

react-best-practices

Identify performance best-practices guidelines for React and Next.js development.

Community
Advanced
range-etrange-et

optimize

Audit frontend loading, rendering, and animation paths to reduce LCP, TTI, CLS, and bundle size.

Community
Advanced
mr-phariyawitmr-phariyawit

vercel-react-best-practices

Apply performance best-practice rules to React and Next.js code.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

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

Community
Advanced