skills.rest
paulojalowyj
paulojalowyjCOMMUNITY
Explore all skills by this author →
Website𝕏@paulojalowyjGitHub

nextjs-react-expert

Analyze React and Next.js codebases for performance issues and apply optimization rules.

6|Updated Feb 6, 2026
Search Tags:#code review#performance#react#web vitals#optimization#nextjs
One-click install
npx skills add https://github.com/paulojalowyj/openkit --skill nextjs-react-expert-paulojalowyj
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-react-expert
Source: https://github.com/paulojalowyj/openkit/tree/main/.opencode/skills/nextjs-react-expert
Command: npx skills add https://github.com/paulojalowyj/openkit --skill nextjs-react-expert-paulojalowyj

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother user experiences, and more efficient development.

Core Features & Use Cases

  • Performance Auditing: Identifies critical performance issues like waterfalls, large bundles, and unnecessary re-renders.
  • Optimization Guidance: Provides specific, actionable rules and best practices from Vercel Engineering to fix identified issues.
  • Use Case: You're experiencing slow page loads in your Next.js app. This Skill can analyze your codebase, pinpoint the exact cause (e.g., sequential data fetching), and provide the precise code pattern to fix it.

Quick Start

Analyze the current project for performance issues using the nextjs-react-expert skill.

Frequently Asked Questions about nextjs-react-expert

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

FAQPage Schema
How do I fix slow page loads and data fetching waterfalls in my Next.js app?▼

Next.js performance auditing identifies sequential data fetching waterfalls causing slow page loads. It pinpoints exact codebase bottlenecks and provides actionable optimization patterns to resolve critical rendering delays.

What is the best way to reduce bundle size and improve Web Vitals in React?▼

Reducing React bundle size and improving Web Vitals requires analyzing codebases for unnecessary re-renders and large dependencies. This tool applies 57 prioritized optimization rules to systematically minimize bundle footprint.

How do I conduct a performance code review for a React application?▼

Conducting a React performance code review involves scanning for waterfalls, large bundles, and unnecessary re-renders. This Skill prioritizes identified fixes from critical to low-medium impact for systematic resolution.

Can I use these optimization rules for both server-side and client-side React performance?▼

These optimization rules target both server-side and client-side React performance. The Skill addresses critical bottlenecks across the stack to ensure faster load times and smoother user experiences.

Why does my Next.js application have unnecessary re-renders and how do I prioritize fixes?▼

Unnecessary Next.js re-renders are identified through performance auditing. Fixes are prioritized by impact severity, resolving critical waterfalls and bundle size issues before addressing low-medium optimizations.

Related Skills

Explore More Software Engineering Skills→
aayushsharma141aayushsharma141

vercel-react-best-practices

Enforce 57 React and Next.js performance rules across 8 categories.

Community
Advanced
maxxthedevelopermaxxthedeveloper
3

react-best-practices

Apply React and Next.js performance optimization patterns to codebases.

Community
Intermediate
pluginagentmarketplacepluginagentmarketplace
1

react-performance

Identify React performance bottlenecks and provide optimization guidance.

Community
Advanced
botPhUbotPhU

react-performance

Profile React applications with DevTools Profiler and apply memoization, code-splitting, and virtualization.

Community
Advanced