skills.rest
xurenlu
xurenluCOMMUNITY
Explore all skills by this author →
Website𝕏@hg_nohairGitHub

vercel-react-best-practices

Apply React and Next.js performance optimization rules for automated code analysis and refactoring.

1|Updated Feb 24, 2026
Search Tags:#code review#best practices#performance#react#optimization#next.js
One-click install
npx skills add https://github.com/xurenlu/marstaff --skill vercel-react-best-practices-xurenlu
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/xurenlu/marstaff/tree/main/skills/vercel-react-best-practices
Command: npx skills add https://github.com/xurenlu/marstaff --skill vercel-react-best-practices-xurenlu

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of guidelines and best practices to significantly improve the performance of React and Next.js applications, addressing issues from critical waterfalls to minor JavaScript optimizations.

Core Features & Use Cases

  • Performance Optimization: Offers over 50 rules across 8 categories, covering data fetching, bundle size, rendering, and more.
  • Agent-Friendly Format: Designed for AI agents to use in code review, refactoring, and generation tasks.
  • Use Case: When developing a new feature in a Next.js app, use this Skill to ensure all data fetching is parallelized, bundle sizes are minimized, and components are optimized for re-renders, leading to a faster user experience.

Quick Start

Apply the vercel-react-best-practices skill to refactor the provided React component for optimal 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 performance during code review?▼

React and Next.js performance optimization involves applying over 50 categorized rules to eliminate data fetching waterfalls, reduce bundle size, and streamline server-side rendering for faster application speed.

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

Best practices for reducing bundle size in a Next.js app involve applying categorized optimization rules that target JavaScript payload minimization, component rendering efficiency, and client-side data fetching improvements.

Can AI agents automatically refactor React components for performance?▼

AI agents can automatically refactor React components for performance by leveraging a structured repository of optimization rules designed specifically for automated code analysis and generation.

How do I eliminate data fetching waterfalls in Next.js?▼

Eliminating data fetching waterfalls in Next.js requires implementing parallelized data fetching strategies guided by structured performance optimization rules covering both server-side and client-side operations.

Does this React optimization approach work for both server-side and client-side rendering?▼

This React optimization approach works for both environments by providing distinct rules for server-side performance enhancements and client-side data fetching efficiency across 8 categorized impact areas.

Related Skills

Explore More Software Engineering Skills→
loagmaloagma

vercel-react-best-practices

Apply rule-based React/Next.js performance patterns to codebases.

Community
Advanced
47thtechcorner47thtechcorner
21

vercel-react-best-practices

Optimize React and Next.js apps for performance with actionable rules.

Community
Advanced
thktthkt
11

vercel-react

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

Community
Intermediate
zapabobzapabob
2

ts-reviewer

Review TypeScript and JavaScript code for type safety and best practices.

Community
Advanced