skills.rest
arthtyagi
arthtyagiCOMMUNITY
Explore all skills by this author →
Website𝕏@arthtyGitHub

vercel-react-best-practices

Identify performance, rendering, and architecture issues in React and Next.js component trees.

1|Updated Apr 19, 2026
Search Tags:#performance#refactoring#react#server actions#nextjs#hydration#bundle optimization
One-click install
npx skills add https://github.com/arthtyagi/onloop --skill vercel-react-best-practices-arthtyagi
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/arthtyagi/onloop/tree/main/.agents/skills/vercel-react-best-practices
Command: npx skills add https://github.com/arthtyagi/onloop --skill vercel-react-best-practices-arthtyagi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you write, review, and refactor React and Next.js code so it performs well, stays maintainable, and avoids common architectural mistakes that slow apps down or cause subtle bugs.

Core Features & Use Cases

  • Performance guidance: Reduce waterfalls, shrink bundles, and keep rendering responsive with proven React and Next.js patterns.
  • Safer server and client code: Apply rules for server actions, request-scoped data, caching, serialization, and hydration behavior.
  • Refactoring support: Improve existing components by spotting unnecessary re-renders, expensive effects, and inefficient data fetching.
  • Use case: If a page feels slow, this Skill helps you pinpoint whether the problem is in fetching, bundling, rendering, or component structure, then suggests the right fix.

Quick Start

Review the React or Next.js code you want to improve and apply the best-practice rules that match its performance, rendering, or data-fetching patterns.

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 fix unnecessary React re-renders and slow component hydration?▼

Fix React re-renders and slow hydration by identifying expensive effects and inefficient data fetching in your component tree, then applying targeted refactoring rules to optimize rendering behavior.

What is the best way to prevent data fetching waterfalls in Next.js?▼

Prevent Next.js data fetching waterfalls by analyzing your server workflows and applying Vercel best-practice rules for request-scoped data, caching, and serialization to optimize fetching patterns.

How do I optimize my React bundle size during code review?▼

Optimize React bundle size during code review by spotting architectural issues in component trees and applying bundle splitting patterns to shrink the final build output.

Can I use this to refactor existing Next.js server actions?▼

You can refactor existing Next.js server actions by evaluating them against rules for serialization, request-scoped data, and browser rendering behavior to ensure safer server and client code.

Why does my Next.js page feel slow despite correct code?▼

A Next.js page feels slow due to hidden architectural mistakes in rendering, bundling, or component structure. Pinpoint whether the bottleneck is in fetching or effects to apply the correct fix.

Related Skills

Explore More Software Engineering Skills→
Aniket-a14Aniket-a14
1

vercel-react-best-practices

Codify React and Next.js performance optimization rules for code review and generation.

Community
Intermediate
yuhle-qugyuhle-qug

webpack-expert

Analyze and optimize Webpack configurations for faster, smaller bundles.

Community
Advanced
adibfirmanadibfirman
2

vercel-react-best-practices

Apply Vercel performance rules to refactor React and Next.js code.

Community
Advanced
hiromailyhiromaily
126

makefile-update

lint and dry-run validate Makefile and make/*.mk changes.

Community
Basic