The vercel-react-best-practices skill, reviewed

What it tells the agent to do

1. Apply when writing, reviewing or refactoring React/Next.js code, data fetching, or bundle and load-time work
2. Work through rule categories by impact: waterfalls and bundle size first, advanced patterns last
3. Match the code to a rule by prefix in the quick reference (async-, bundle-, server-, rerender-, etc.)
4. Open rules/<rule-name>.md for the explanation and the incorrect and correct code examples
5. Read AGENTS.md when the full expanded guide is needed

Lines worth reading

Straight from the file, with why each one matters.

1. line 3Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

   A clear trigger list, but 'React components' alone covers nearly any frontend task, so expect this to load often.

2. line 12Contains 70 rules across 8 categories

   The count is honest. The quick reference lists exactly 70 rules across 8 categories.

3. line 58`server-auth-actions` - Authenticate server actions like API routes

   A security rule hiding in a performance guide, and arguably the most important line here.

4. line 103`rendering-conditional-render` - Use ternary, not && for conditionals

   A sharp, opinionated rule that catches the classic stray '0' rendered by `count && <List/>`.

5. line 43`async-dependencies` - Use better-all for partial dependencies

   Recommends a specific third-party library by name with no context in this file. Check the rule file before adding the dependency.

Watch out for

Nothing risky that Kin could see in SKILL.md. Scripts beside it were not read.

The scorecard

• TriggerSays when to use it
  8/10

  Says what and when with real keywords; 'React components' makes it fire on almost anything.

• FocusOne clear job
  7/10

  One theme, performance, but 70 rules range from SSR waterfalls to RegExp hoisting.

• LeanLight to load
  9/10

  About 150 lines, a pure index. Detail is pushed to rule files loaded on demand.

• ConcreteSteps you can follow
  5/10

  One-liners only. No examples, procedure or done check here; those live in unseen files.

• SafeSafe to run
  10/10

  Advice only. No shell, network, deletes, secrets or instruction overrides.

How it could be better

1. Add a short review procedure with a done check

   The file lists rules but never tells the agent what order to work in or how to confirm a change helped.

   Add

   ## Procedure
   1. Identify the code type: server component, client component, API route, or shared util.
   2. Check CRITICAL rules (async-, bundle-) first, then HIGH, then lower.
   3. For each match, open rules/<rule-id>.md and apply the 'Correct' pattern.
   4. Report findings as: <rule-id> — <file:line> — <one-line fix>.
   5. Done when <build passes / bundle size checked with <analyzer command> / no new waterfalls remain>.

   Copy

2. Inline one example for the top two rules

   If rules/ is missing or not read, the agent has nothing concrete. One before/after pair for the CRITICAL rules keeps the skill useful on its own.

   Add

   ### Example: async-parallel
   Incorrect:
   ```ts
   const a = await getA();
   const b = await getB();
   ```
   Correct:
   ```ts
   const [a, b] = await Promise.all([getA(), getB()]);
   ```

   Copy

3. State version requirements for newer APIs

   Rules like Activity, useEffectEvent, after() and toSorted() need recent React, Next.js or runtimes. The agent should check before suggesting them.

   Add

   ## Version notes
   Some rules need recent versions: <rule-id> requires <React/Next.js version>. Check package.json before applying them and skip any rule the project's versions do not support.

   Copy