# Nextjs React Expert

> ---

- Skill: `anhvu1107/nextjs-react-expert` (Agent Skill, multi-file: 18 files)
- Install (CLI): `npx skillmds@latest add anhvu1107/nextjs-react-expert`
- Raw SKILL.md: https://api.skillmd.com/api/skills/anhvu1107/nextjs-react-expert/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: anhvu1107 (https://skillmd.com/u/anhvu1107)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/anhvu1107/nextjs-react-expert

---

---
name: nextjs-react-expert
description: ALWAYS use this when the work is specifically about modern Next.js or React architecture, data flow, rendering strategy, routing, or performance-sensitive frontend behavior.
---

# Next.js And React Expert

## Selective Reading Rule

Start with:

- `references/usage-routing.md`
- `references/quality-checklist.md`

Then load only the inherited docs, scripts, assets, or examples that match the user's actual task.

## Selective Reading Rule

Start with:

- `references/senior-master-standard.md`


Pick the narrowest file that matches the current bottleneck:

- `references/performance-investigation-playbook.md` to structure the investigation
- `references/app-router-checklist.md` when reviewing App Router boundaries, fetching, and caching
- `1-async-eliminating-waterfalls.md` for sequential data-fetching and request chains
- `2-bundle-bundle-size-optimization.md` for large bundles and slow interactivity
- `3-server-server-side-performance.md` for SSR and server-route performance
- `4-client-client-side-data-fetching.md` for client cache and request behavior
- `5-rerender-re-render-optimization.md` for excessive re-renders
- `6-rendering-rendering-performance.md` for rendering bottlenecks and large lists
- `7-js-javascript-performance.md` for hot-path JavaScript issues
- `8-advanced-advanced-patterns.md` for advanced React execution patterns
- `9-cache-components.md` for Next.js 16 cache components and partial prerendering

## Purpose

Improve React and Next.js systems by fixing the highest-impact bottlenecks first.

Do not micro-optimize while bigger issues like waterfalls, bundle bloat, or bad boundaries remain.

## Use This Skill When

- a page or flow feels slow and the bottleneck is not yet isolated
- React code re-renders too often
- Next.js data fetching or rendering strategy needs review
- bundle size or client JavaScript volume is harming user experience
- modern Next.js caching choices need to be made deliberately

## Priority Order

1. Eliminate waterfalls.
2. Reduce unnecessary shipped JavaScript.
3. Fix bad server-client boundaries.
4. Tackle rerender and rendering hotspots.
5. Only then consider lower-level JavaScript polish.

## Review Heuristics

- Prefer server work when the client does not need ownership.
- Keep data fetching parallel where dependencies allow.
- Ship less code before trying to execute shipped code faster.
- Measure before and after when possible.
- Do not add memoization by reflex; fix structure first.

## Common Focus Areas

- route-level waterfalls
- oversized client components
- unnecessary client state
- missing streaming or suspense boundaries
- poor cache behavior
- list rendering and virtualization problems

## Good Outcomes

A strong performance pass should end with:

- the main bottleneck identified
- the chosen optimization path explained
- the relevant checks run or recommended
- the codebase left simpler, not just trickier

## Related Skills

- `frontend-design` when UX and implementation quality interact
- `web-design-guidelines` for interface-level audits
- `performance-profiling` for broader measurement strategy
- `api-patterns` when backend shape is creating frontend waterfalls