skills.rest
mnadalc
mnadalcCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance optimization guidelines to code.

Updated Aug 23, 2026
Search Tags:#code quality#performance#web development#react#optimization#next.js
One-click install
npx skills add https://github.com/mnadalc/dotfiles --skill vercel-react-best-practices-mnadalc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mnadalc/dotfiles/tree/main/.ai/project-specific-skills/react-best-practices
Command: npx skills add https://github.com/mnadalc/dotfiles --skill vercel-react-best-practices-mnadalc

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill provides a comprehensive set of rules and best practices to optimize the performance of React and Next.js applications, addressing issues from bundle size to rendering speed.

Core Features & Use Cases

  • Performance Optimization: Apply over 50 rules across 8 categories to improve TTI, LCP, and overall application responsiveness.
  • Code Refactoring Guidance: Use as a guide for writing, reviewing, and refactoring React/Next.js code for maximum efficiency.
  • Use Case: When developing a new feature in a Next.js app, consult this Skill to ensure data fetching is parallelized, components are memoized correctly, and bundle sizes are minimized.

Quick Start

Apply the React best practices to the provided code snippet to improve its 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 for better Core Web Vitals?▼

Optimize React and Next.js performance by applying over 50 structured rules across 8 categories, targeting bundle size reduction, server-side efficiency, and rendering speed to improve TTI and LCP metrics.

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

Reduce bundle size and eliminate waterfalls by following structured refactoring guidelines that ensure data fetching is parallelized and components are correctly memoized for maximum application efficiency.

How do I prevent unnecessary re-renders when developing new features in React?▼

Prevent unnecessary React re-renders by consulting structured optimization guidelines that provide rules for correct component memoization and efficient code refactoring during feature development.

Can I use these React optimization rules for both new development and code review?▼

Yes, you can use these React optimization rules as a comprehensive guide for writing new code, reviewing existing logic, and refactoring applications to ensure maximum efficiency and maintainability.

Why does my Next.js application have slow server-side rendering and poor responsiveness?▼

Slow Next.js server-side rendering and poor responsiveness often stem from unoptimized data fetching and large bundle sizes, which structured performance guidelines address by targeting rendering speed and efficiency.

Related Skills

Explore More Software Engineering Skills→
frankxaifrankxai
7

nextjs-react-expert

Generate React components, Next.js routes, and API endpoints.

Community
Advanced
dreamingechoesdreamingechoes
2

performance-optimization

Measure, profile, and fix performance bottlenecks in web apps, APIs, and database queries.

Community
Advanced
manhthien2005manhthien2005

vercel-react-best-practices

Optimize React and Next.js code for performance and bundle size.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced