In short:
ak-react-best-practicesis Vercel Engineering's set of 45 React and Next.js performance rules, grouped into 8 categories by impact. It picks the rule that matches the bottleneck you have seen, fixes the code with the rule's correct example, then compares measurements before and after. It does not apply every rule in one go, and it does not sprinklememoeverywhere without evidence.
Disclosure: I maintain AgentKit and have an affiliate relationship with it: the AgentKit link in this post is an affiliate link; buying through it gets you 30% off.
Summary
Use it when a React or Next.js app is slow in a specific place: a page loads slowly, the bundle is heavy, typing stutters, or when you want a performance review or audit. You do not need it for a new component that has no measured or identified performance problem.
flowchart LR
A["Slow spot measured or identified"] --> B["ak-react-best-practices"]
B --> C["Matching rule + fixed code"]
C --> D["Before and after numbers"]
E["Broad audit request"] --> B
B --> F["Check against all 45 rules"]It rests on 4 ideas:
| Idea | Question | Example |
|---|---|---|
| A bottleneck with evidence | Where is it slow, and how do you know? | The network tab shows 3 requests running one after another |
| Rule categories | Which of the 8 categories does the bottleneck belong to? | Chained requests belong to async-, importing a whole icon library belongs to bundle- |
| Priority is not an order | Should you apply every CRITICAL rule to be safe? | No. If the page has no waterfall, async- rules do not help |
| Right version, measure before and after | Does the API work on the project's React and Next.js versions, and is it really faster after the fix? | optimizePackageImports needs Next.js 13.5 or later; compare the bundle size again after the fix |
The 8 categories in priority order: async- and bundle- at CRITICAL, server- at HIGH, client- at MEDIUM-HIGH, rerender- and rendering- at MEDIUM, js- at LOW-MEDIUM, advanced- at LOW.
Sample prompt for a page slowed by a waterfall:
/ak-react-best-practices The /products/[id] page of <app name> takes about 2 seconds to show.
The network tab shows 3 requests for product, reviews and stock running one after another.
Constraints: keep the data the page displays unchanged.
Done when: independent requests run in parallel and load time drops compared with before.This skill has no flags. After the command you write a component name, a page or a code pattern (such as async-parallel), or leave it empty, and it helps to include the symptom and the numbers you already have.
Below is the detailed version: the run flow, 5 situations with prompts, how to write the input, the change history by ak release, and common pitfalls. The detailed version and the interactive page are for subscribers. Your agent can also search them through the portal's MCP.
Opens when your account has subscriber access
This guide is for subscribers
Once your account has access, the full piece, the interactive visual and the agent call all open.
- Sign in or create a modernEngineer accountReading access belongs to your account email.
- Choose a plan on the pricing page1, 3 or 12 months, paid by VietQR bank transfer. Access opens about a minute after the money arrives.
- Or redeem a Facebook subscriber codePeople supporting the page on Facebook get an activation code by message each month.
Already a subscriber? Sign in to read.
Use this piece in your agent
Get an API keyCopy the text below and paste it into Claude Code, Codex or whichever agent you use. The agent reads the piece and checks it against the repo you have open.
Read "ak-react-best-practices: fix the right slow spot in React and Next.js apps" on modernEngineer and apply it to this repo.
1. Call the content_get tool of the modernengineer MCP server with locale "en", slug "ak-react-best-practices". If the modernengineer MCP server is not connected, stop and walk me through connecting it from https://modernengineer.dev/en/mcp.
2. Summarize the main steps of the piece and point out which apply to this repo.
3. Propose concrete changes and ask me before editing any file.Connect MCP in Claude Code (once)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Reading the full piece over MCP needs an API key from a subscriber account or one that bought this guide. Without access, the agent only gets the opening.
- Version
- v1.0.0
- Updated
- 22/10/2026
- Licence
- All rights reserved
- Slug
- ak-react-best-practices
