skills.rest
Taek-D
Taek-DCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Identify performance gaps in React and Next.js projects across 45 rules.

Updated Apr 12, 2026
Search Tags:#performance#react#optimization#nextjs#best-practices#server-components
One-click install
npx skills add https://github.com/Taek-D/kbo_appintoss --skill vercel-react-best-practices-taek-d
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Taek-D/kbo_appintoss/tree/main/miniapp/.claude/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Taek-D/kbo_appintoss --skill vercel-react-best-practices-taek-d

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill provides a structured, prioritized set of React and Next.js performance guidelines to help teams avoid common bottlenecks and deliver faster, more reliable user experiences.

Core Features & Use Cases

  • Guided optimization: compiles 45 rules across 8 categories to drive efficient refactoring and code review decisions.
  • Reusable guidance: offers actionable explanations, examples, and patterns that teams can apply across projects.
  • Wide applicability: suitable for component design, page routing, data fetching, and bundle optimization to improve TTI, LCP, and overall UX.

Quick Start

Audit your project against the 45 rules across 8 categories and begin applying the guidelines to optimize performance.

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 identify performance gaps in a React or Next.js project?▼

React performance optimization involves auditing your project against a 45-rule framework across 8 categories, helping you pinpoint bottlenecks in component design, page routing, and data fetching to improve TTI and LCP metrics.

What are the best practices for refactoring React server components to improve LCP?▼

Refactoring React server components requires applying prioritized optimization rules to data-fetching patterns and page routing, ensuring safe improvements that directly target LCP and overall user experience optimization.

Can I use these Next.js optimization guidelines for code reviews?▼

Yes, these Next.js optimization guidelines support code reviews by applying the 45-rule set to evaluate component design and bundle optimization tasks, providing actionable explanations and guardrails for developers.

Does this React optimization process cover bundle optimization tasks?▼

Yes, this React optimization process explicitly covers bundle optimization tasks, offering actionable patterns and explanations across real-world projects to help reduce bundle size and improve loading reliability.

When should I not use Next.js server components for data fetching?▼

The metadata does not specify exact scenarios to avoid Next.js server components for data fetching, but it provides guardrails to ensure safe, effective improvements when applying these patterns across real-world projects.

Related Skills

Explore More Software Engineering Skills→
kyle-deprowkyle-deprow

react-best-practices

Apply 45 React/Next.js performance rules across 7 categories.

Community
Advanced
Oscar-Ivan-SalasOscar-Ivan-Salas

performance-profiling

Profile web application performance with Lighthouse and DevTools workflows.

Community
Advanced
hathbangerhathbanger

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size.

Community
Advanced
JubaKitiashviliJubaKitiashvili
41

erne-perf

Diagnose and optimize React Native and Expo app performance bottlenecks.

Community
Advanced