skills.rest
AndyAnh174
AndyAnh174COMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Optimize React and Next.js performance with Vercel Engineering guidelines.

Updated Jan 8, 2026
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/AndyAnh174/BanThuoc-SEO --skill vercel-react-best-practices-andyanh174
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/AndyAnh174/BanThuoc-SEO/tree/main/.agent/skills/react-best-practices
Command: npx skills add https://github.com/AndyAnh174/BanThuoc-SEO --skill vercel-react-best-practices-andyanh174

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes 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 like slow load times, poor user experience, and inefficient code.

Core Features & Use Cases

  • Performance Optimization: Apply over 45 rules across 8 categories, from critical waterfall elimination to advanced patterns.
  • Code Refactoring: Use the guidelines to refactor existing code for better speed and efficiency.
  • Code Generation: Ensure new code adheres to high-performance standards from the outset.
  • Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure data fetching is parallelized, bundle sizes are minimized, and re-renders are optimized for a smooth user experience.

Quick Start

Apply the react best practices skill to optimize the performance of the provided Next.js code.

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 for slow load times?▼

To optimize React and Next.js performance, apply over 45 rules across 8 categories, targeting critical waterfall elimination, bundle size reduction, and re-render optimization.

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

Eliminating data fetching waterfalls in Next.js requires parallelizing server-side and client-side data fetching, adhering to Vercel Engineering standards for automated refactoring and code generation.

Can I use these React best practices to refactor existing code?▼

Yes, you can use these React best practices to refactor existing code for better speed and efficiency by applying guidelines that minimize bundle sizes and optimize JavaScript performance.

Does this Skill require specific dependencies to optimize web development workflows?▼

No specific dependencies are required to apply these React and Next.js optimization guidelines, making it straightforward to integrate into existing web development workflows.

What areas of React re-render optimization does this Skill cover?▼

React re-render optimization covered by this Skill involves applying advanced patterns and specific rules to ensure smooth user experience and efficient code generation.

Related Skills

Explore More Software Engineering Skills→
loagmaloagma

vercel-react-best-practices

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

Community
Advanced
okayusokayus

vercel-react-best-practices

Apply Vercel optimization guidelines to React and Next.js performance reviews.

Community
Advanced
quanganh208quanganh208

ck:react-best-practices

Audit React and Next.js pages for waterfalls and bundle bloat.

Community
Advanced
hjung3113hjung3113

optimize

Diagnose UI performance bottlenecks and recommend Web Vitals and bundle size improvements.

Community
Advanced