skills.rest
thgterto
thgtertoCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-react-expert

Apply Vercel's optimization rules to identify and fix React/Next.js performance bottlenecks.

Updated Jan 3, 2026
Search Tags:#performance#react#optimization#next.js#server-components#code-splitting
One-click install
npx skills add https://github.com/thgterto/Gerenciador-de-estoque --skill nextjs-react-expert-thgterto
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/thgterto/Gerenciador-de-estoque/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/thgterto/Gerenciador-de-estoque --skill nextjs-react-expert-thgterto

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

React and Next.js performance optimization across engineering practices to help teams identify bottlenecks, eliminate waterfalls, shrink bundle sizes, and implement scalable server/client optimizations.

Core Features & Use Cases

  • Comprehensive rules spanning waterfalls, bundle-size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript micro-optimizations, and advanced patterns.
  • Use during performance reviews, code reviews, audits, and production deployments to accelerate real user performance.
  • Example: Audit a Next.js app to identify sequential awaits, enable parallel data fetching, and adopt dynamic imports for heavy components.

Quick Start

Scan sections 1 and 2 for waterfalls and bundle optimization, then apply server-side and re-render rules in priority order to improve performance.

Frequently Asked Questions about nextjs-react-expert

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

FAQPage Schema
How do I identify and fix React and Next.js performance bottlenecks?▼

Identify and fix React and Next.js performance bottlenecks by applying a curated set of optimization rules from Vercel's engineering playbook, targeting waterfalls, bundle sizes, and rendering issues.

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

To eliminate data fetching waterfalls in Next.js server components, replace sequential awaits with parallel data fetching patterns to accelerate real user performance.

How do I optimize bundle size in a React application using code-splitting?▼

Optimize bundle size in a React application by applying code-splitting, avoiding barrel imports, and using dynamic imports for heavy components to shrink the final bundle.

Does this approach support client-side data deduplication and re-render optimization?▼

Yes, client-side data deduplication and re-render optimization are supported through dedicated rules that target rendering performance and prevent unnecessary component re-renders.

Can I use these rules for a production-grade Next.js deployment audit?▼

You can use these rules during performance reviews, code reviews, and production deployments to audit your Next.js app and validate changes with automated checks.

Related Skills

Explore More Software Engineering Skills→
darthlinuxerdarthlinuxer

nextjs-react-expert

Detect sequential async waterfalls and large bundle imports in Next.js and React codebases.

Community
Advanced
JaylaelikeJaylaelike

react-best-practices

Identify performance bottlenecks in React/Next.js projects and apply optimization rules.

Community
Advanced
lobehublobehub
81.4k

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for components, data fetching, and bundles.

Official
Advanced
fnsalinasfnsalinas
1

react-best-practices

Identify React/Next.js performance bottlenecks and map them to optimization rules.

Community
Advanced