Reviews pasted React and Next.js App Router code for five performance mistakes that pass every test and then make pages slow, and lists only those, one line each with a fixed code, the place, why it costs time and the fix - or exactly No findings. It catches independent awaits written one after another so the page waits for their sum, an effect that copies something derivable during render into state, a use client mark placed on a whole page when only a small leaf needs interactivity, a heavy library imported at the top of a client file though it is used only after a click, and a new object, array or function passed every render to a memo child or an effect dependency. It leaves out the safe look-alikes: a second await that needs the first result, an effect that syncs with an outside system, and use client on a small button. Use to review React or Next.js code before release, to find why a page ships too much JavaScript or renders twice, or to gate a pull request that touches components.
React Performance Review is a tested SKILL.md that reviews pasted React and Next.js App Router code for five performance mistakes that pass every test and then make pages slow, and lists only those, one line each with a fixed code, the place, why it costs time and the fix - or exactly No findings; an agent buys it once for $0.01 over x402.
Not for
Caching and revalidation, layout and styling, measured timings or bundle sizes, and files that are imported but not pasted. It reads pasted React and Next.js code and judges only what is written in it.
Tested, honestly
Tested 2026-10-29 with a strong and a weak model.
- SonnetStrong model, claude-sonnet-5-5
- Right on all 3 cases, read by hand. On the dashboard page it named the three independent awaits as one waterfall and added that the posts call must still follow the user call, and it gave the PDF libraries imported at the top of the export button as the heavy eager import, without flagging the small client button. On the guide page it found the client mark on the whole page that drags react-markdown to the browser and the effect that copies the filtered list into state, and left out the WebSocket effect. On the clean orders page it answered exactly No findings.
- HaikuWeak model, claude-haiku-5-5
- Right on all 3 cases, read by hand. It gave the same pairs of findings as Sonnet on the dashboard and on the guide page, with the same safe look-alikes left out, and answered exactly No findings on the clean orders page. One of its lines on the dashboard case came out indented by four spaces, which the checks accept.
Full test summary
Example
Our own test text, before and after the skill ran. Excerpts only.
English · claude-sonnet-5-5
Before
// app/guides/setup/page.tsx
'use client';
import { useState } from 'react';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { guideMarkdown } from '@/content/setup-guide';
export default function SetupGuidePage() {
const [helpful, setHelpful] = useState<boolean | null>(null);
return (
<article>
<h1>Setup guide</h1>…
After
CLIENT-BOUNDARY-HIGH — app/guides/setup/page.tsx, `'use client'` on SetupGuidePage — only the helpful/not-helpful buttons need state, yet react-markdown and remark-gfm and the guide text are sent to the browser — keep the page a server component and move the feedback buttons into a small client component…
What is in the file
- The answer
- The codes
- How to read the code
- Rules
- Work in this order
- Short example
Languages
English. Tried in: English.
License
Perpetual, non-exclusive; use and modify for yourself incl. paid work; no resale or republishing. Holder: Georgi Kalchev, aiskills402.com. Full terms.
Versions
Current version 1.0.0, updated 2026-10-30. Whoever bought an earlier version gets new ones free through the same re-download token.
v1.0.0 · 2026-10-30
First release, written in the light-test batch of 29 October 2026 (three cases, price $0.01). The idea is ours; no foreign skill was opened, facts come from the public React and Next.js documentation (see notes/ideas.md). Output: one line per finding with a fixed code, or exactly `No findings.`
Test: three cases written by hand (two planted, each with a safe look-alike, one clean control), one run on Claude Sonnet and one on Claude Haiku, no run without the skill, no iteration on the skill text after the runs. `test/control.mjs` shows that the checks pass on the ideal answers and fail on realistic wrong ones. See `test-summary.json` for the verdicts read by hand.
FAQ
Awaits: when does a second one stay unlisted?
When it needs a value from the first result, such as an id or a token. That call has to wait, so only calls independent of each other are reported as a waterfall; the skill suggests starting those together and awaiting them with Promise.all, and leaves the dependent call alone.
Why is use client on a small button left alone?
Because that component is interactive as a whole, so the mark is where it belongs. The skill reports the mark only when it sits on a page or another large component while a small part needs state, since the file's imports then travel to the browser with it.
What about the React Compiler?
The documentation says the compiler handles memoization, so when the paste shows it is on, the skill does not report a new object or function handed to a memo child. Without that sign in the paste, the code is reported with a fix that moves the value out or wraps it.
What was it checked against?
Three pages: a dashboard with independent awaits and a heavy PDF library, a guide with the client mark on the whole page and a derived-state effect, and a clean orders page. Each got one reply from Sonnet and one from Haiku, and all six were read by hand for the summary.