skills.rest
mauroviveros
mauroviverosCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

vercel-react-best-practices

Apply React and Next.js performance best practices to reduce bundle size and render latency.

Updated Jan 19, 2026
Search Tags:#performance#refactoring#react#nextjs#best-practices#code-review#bundle-size
One-click install
npx skills add https://github.com/mauroviveros/eventdex --skill vercel-react-best-practices-mauroviveros
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/mauroviveros/eventdex/tree/main/.agents/skills/react-best-practices
Command: npx skills add https://github.com/mauroviveros/eventdex --skill vercel-react-best-practices-mauroviveros

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js apps often suffer from performance regressions during development, review, or refactoring. This guide consolidates proven patterns to reduce waterfalls, optimize bundles, and improve rendering performance, helping automation and AI-assisted workflows to produce faster, more efficient code.

Core Features & Use Cases

  • Provides a structured catalog of performance rules across 8 categories, prioritized by impact.
  • Supports automated checks, refactoring prompts, and code-generation guidance for React components and Next.js pages.
  • Useful during writing new components, reviewing pull requests, or refactoring legacy code to improve TTI and LCP.

Quick Start

Review your codebase and start applying the recommended performance patterns to reduce render latency and bundle size.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices to reduce React bundle size and render latency during refactoring?▼

Next.js performance best practices target data-fetching logic and page rendering to improve load times. By consolidating proven patterns, you reduce waterfalls, optimize bundles, and improve Time to Interactive (TTI) and Largest Contentful Paint (LCP).

How do I optimize Next.js data-fetching logic to improve TTI and LCP?▼

Next.js performance best practices target data-fetching logic and page rendering to improve load times. By consolidating proven patterns, you reduce waterfalls, optimize bundles, and improve Time to Interactive (TTI) and Largest Contentful Paint (LCP).

How do I apply React performance patterns when reviewing pull requests?▼

You can use performance best practices for both writing new React components and refactoring legacy code. The rules support code-generation guidance and automated checks, making them applicable across the entire development and review workflow.

Can I use these React performance rules for writing new components as well as legacy code?▼

You can use performance best practices for both writing new React components and refactoring legacy code. The rules support code-generation guidance and automated checks, making them applicable across the entire development and review workflow.

What's the best way to automate safe refactoring for React components without breaking existing functionality?▼

Automated safe refactoring of React components requires applying validated performance rules with proper error handling. Enforcing YAML frontmatter in SKILL.md and using optional assets ensures refactoring does not break existing functionality.

Why does my React app suffer from performance regressions during development?▼

React apps suffer performance regressions when development introduces render waterfalls and bundle bloat. Applying consolidated performance patterns during writing, reviewing, or refactoring helps automation produce faster, more efficient code.

Related Skills

Explore More Software Engineering Skills→
JimmyLvJimmyLv
6.2k

vercel-react-best-practices

Apply 58 performance rules across 8 categories to React and Next.js code.

Community
Advanced
jewbetchajewbetcha
115

vercel-react-best-practices

Apply React and Next.js performance best practices during development and code reviews.

Community
Basic
VoDaiLoczVoDaiLocz
24

lint-and-validate

Automate linting and static analysis of code in CI pipelines.

Community
Intermediate
PlazaCCPlazaCC
2

vercel-react-best-practices

Identify and apply React/Next.js performance best practices across codebases.

Official
Advanced