skills.rest
kimny1143
kimny1143COMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Optimize React/Next.js code with performance best practices for components and data fetching.

Updated Aug 23, 2026
Search Tags:#performance#react#refactor#nextjs#best-practices#code-review
One-click install
npx skills add https://github.com/kimny1143/claude-code-template --skill vercel-react-best-practices-kimny1143
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/kimny1143/claude-code-template/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/kimny1143/claude-code-template --skill vercel-react-best-practices-kimny1143

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects often suffer from performance regressions due to bloated bundles, blocking renders, and unoptimized data fetching. This skill provides a structured guide to apply high-impact optimizations consistently.

Core Features & Use Cases

  • Defers and parallelizes work: techniques to move awaits into necessary branches, run independent fetches in parallel, and avoid waterfall patterns.
  • Bundle size & load performance: guidance to avoid barrel imports, use dynamic imports, and minimize third-party payloads.
  • Server & client performance patterns: best practices for server actions, server components, caching, and efficient client data fetching.

Quick Start

Describe the React/Next.js component you want optimized and I will apply the performance guidelines.

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 issues like bloated bundles and blocking renders?▼

Prevent data fetching waterfalls in React by moving awaits into necessary branches and running independent fetches in parallel to avoid blocking renders and improve load times.

What's the best way to reduce bundle size in a Next.js application?▼

Reduce Next.js bundle size by avoiding barrel imports, using dynamic imports for heavy components, and minimizing third-party payloads to improve overall load performance.

How do server actions and server components affect Next.js performance?▼

Next.js performance improves when applying safe server actions, leveraging server components for efficient rendering, and implementing caching strategies to minimize client-side data fetching.

Can I use this to refactor existing React components for better performance?▼

Yes, you can refactor existing React components by providing the code and applying structured performance guidelines that enforce lazy loading, parallel fetching, and bundle optimization patterns.

Related Skills

Explore More Software Engineering Skills→
MasaKagamiMasaKagami

vercel-react-best-practices

Optimize React and Next.js performance with automated refactoring rules.

Community
Advanced
botPhUbotPhU

react-performance

Profile React applications with DevTools Profiler and apply memoization, code-splitting, and virtualization.

Community
Advanced
zajcazajca
2

go-linting

Configure golangci-lint with recommended Go linters for static analysis.

Community
Basic
partme-aipartme-ai
610

webpack

Configure Webpack bundlers with loaders, plugins, and code splitting.

Official
Intermediate