skills.rest
HiroyukiMakita
HiroyukiMakitaCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Optimize React and Next.js performance with 57 prioritized rules.

Updated Jan 31, 2026
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/HiroyukiMakita/dev-kintone-plugin --skill vercel-react-best-practices-hiroyukimakita
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/HiroyukiMakita/dev-kintone-plugin/tree/main/.opencode/skills/vercel-react-best-practices
Command: npx skills add https://github.com/HiroyukiMakita/dev-kintone-plugin --skill vercel-react-best-practices-hiroyukimakita

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides a comprehensive set of best practices and rules to significantly improve the performance of React and Next.js applications, addressing issues from bundle size to server-side rendering efficiency.

Core Features & Use Cases

  • Performance Optimization: Offers 57 rules across 8 categories, covering waterfalls, bundle size, server-side rendering, re-render optimization, and more.
  • Automated Refactoring Guidance: Designed for AI agents to maintain, generate, or refactor code for optimal performance.
  • Use Case: When developing a new Next.js page, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized with dynamic imports, and server-side rendering is efficient, leading to faster load times and a better user experience.

Quick Start

Apply the Vercel React best practices to refactor the provided React component for improved 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 optimize React and Next.js application performance for faster load times?▼

Optimize React and Next.js performance by applying 57 prioritized rules that target data fetching parallelization, bundle size reduction via dynamic imports, and efficient server-side rendering to eliminate waterfalls and improve load times.

What are the best practices for reducing bundle size in Next.js applications?▼

Reduce Next.js bundle size by applying best practices that utilize dynamic imports to minimize initial JavaScript payloads, guided by a comprehensive set of prioritized rules for automated refactoring and code generation.

How do I eliminate data fetching waterfalls in React server components?▼

Eliminate React data fetching waterfalls by parallelizing server-side data requests according to prioritized refactoring rules, which prevents sequential fetch delays and improves server-side rendering efficiency.

Can AI agents automatically refactor React code for performance optimization?▼

AI agents can automatically refactor React code for performance optimization using a comprehensive guide of 57 rules with detailed code examples specifically designed to drive automated code generation and refactoring.

Does this React optimization guide cover client-side data fetching and re-rendering?▼

This React optimization guide covers client-side data fetching and re-render optimization, providing 57 prioritized rules across 8 categories that include server-side rendering efficiency and bundle size management.

Related Skills

Explore More Software Engineering Skills→
Arupbiswas09Arupbiswas09

nextjs-react-best-practices

Analyze Next.js and React components for performance bottlenecks using predefined rules.

Community
Intermediate
rodrigobranasrodrigobranas
1

vercel-react-best-practices

Apply React and Next.js performance rules to codebases.

Community
Advanced
DaFumDaFum
1

perf-budget-enforcer

Enforce performance budgets for bundle size, load time, and FPS in CI builds.

Community
Intermediate
HollowvynHollowvyn

server-side-rendering

Generate complete HTML on the server for React applications.

Official
Intermediate