Vercel React Best Practices Skill: one waterfall test

Tested and written by Fred at SkillsTested · Published 2026-10-13 · Updated 2026-10-13

In one isolated Codex run, a project-local copy of Vercel's pinned React Best Practices Skill helped the agent identify two independent data loads awaited in sequence. It read the async-parallel rule, changed the component to use Promise.all, and preserved the exact server-rendered HTML. The controlled timed check fell from 251.9 ms to 127.2 ms. This is one fixture result, not a measured speedup for real sites or proof the Skill caused the fix.

What we asked it to do

A small React server component rendered a person's name and two topic names. loadProfile() and loadTopics() each resolved after a fixed 125 ms delay and did not depend on one another. The request asked Codex to review performance, make the smallest safe change, preserve rendered HTML, use any relevant installed project Skill, and run node --test. It did not name this Skill. The failing timing test and unchanged-output test were supplied up front, so the agent was guided toward a known issue.

The change and the check

// Before: independent requests wait in sequence
const profile = await loadProfile();
const topics = await loadTopics();

// After: start both together
const [profile, topics] = await Promise.all([loadProfile(), loadTopics()]);

Before the change, the HTML assertion passed and the timing assertion failed at 251.9 ms against a 215 ms limit. Codex read the installed SKILL.md and its rules/async-parallel.md, changed only ProfileCard.mjs, and ran the tests. Both passed, with the timed test at 126.4 ms in the agent run; an independent rerun measured 127.2 ms. The expected HTML remained <article><h1>Ari</h1><p>React · Testing</p></article>. The source, tests, and before/after files are in the replay bundle.

Install and source review

We fixed the official repository at commit 063bee94c3f4df8453406c830b0a7df0f2860278 and copied its skills/react-best-practices/ folder into the temporary project's .agents/skills/. The Skill folder contained Markdown rules, metadata, and no executable scripts. This trial required no account, credential, or external API call. The Skill declares MIT in its frontmatter, but we did not find a separate repository LICENSE file at this commit; the replay bundle therefore contains our fixture, not a copy of the upstream Skill. An attempted npm registry install did not complete in this sandbox, so we used locally available React packages of the recorded versions. The first Codex launch was blocked by the host sandbox; a scoped retry ran the same temporary project.

When this result helps

If a React component waits for independent data in sequence, inspect whether both operations can start together and verify that output and error behavior remain correct. This trial shows the Skill supplied the right rule for that task and that the agent applied it in one run. It does not show repeated activation reliability, a no-Skill comparison, Claude Code or Next.js behavior, production latency, or whether this Skill outperforms another React guide. Timing depends on the fixture and machine load. Review the pinned rule before adopting a later version.