vercel-react-best-practices

Name: vercel-react-best-practices
Availability: InStock
Author: hiroyukimakita

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

Ready to run

npx skills add https://github.com/HiroyukiMakita/dev-kintone-plugin --skill vercel-react-best-practices-hiroyukimakita

💬 Prompt for ChatGPT / Claude Chat▼

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.