New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

React Best Practices

by majiayu000 in majiayu000/spellbook

React and Next.js performance playbook distilled from Vercel Engineering guidance.

MITAuto-check passedFrontend & Design

Install React Best Practices

skills CLI
$ npx skills add majiayu000/spellbook --skill react-best-practices -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install majiayu000/spellbook react-best-practices --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/majiayu000/spellbook.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/react-best-practices .claude/skills/react-best-practices && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
react-best-practices
GitHub stars
287
Token cost
~1.1k tokens
SKILL.md length
528 words
Files
1
Skills in repo
97
Repo updated
First seen
Licence
MIT

At a glance

React and Next.js performance playbook distilled from Vercel Engineering guidance.

  • Works in 6 steps: Eliminate Waterfalls First → Protect Bundle Size → Prefer Server Work Over Client Work → …
  • Refactoring React/Next.js code for waterfalls
  • SKILL.md covers When To Use, Priority Order, Hard Rules and Review Checklist, plus 2 more sections
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

React Best Practices is an agent skill from majiayu000/spellbook. React and Next.js performance playbook distilled from Vercel Engineering guidance. Use when building, reviewing, or refactoring React/Next.js code for waterfalls, bundle size, rendering cost, and client/server data flow.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Frontend & Design, covering React components, Web performance and Refactoring. It works with Next.js, React and Vercel. The repository describes itself as: Cross-runtime skills for Claude Code, Codex, and multi-agent workflows. The licence is MIT.

When your agent uses it

  • Refactoring React/Next.js code for waterfalls
  • Client/server data flow

Example prompts

  • “/react-best-practices”

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Eliminate Waterfalls First
  2. Protect Bundle Size
  3. Prefer Server Work Over Client Work
  4. Control Rerenders
  5. Optimize Rendering Paths
  6. Clean Up JavaScript Hot Spots

What it can do on your machine

Read from SKILL.md and the folder at commit ed52af7. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

React Best Practices loads about 1.1k tokens when it runs. Until then it costs about 60 tokens; SKILL.md has 528 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~60
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from majiayu000/spellbook at commit ed52af7, republished under its MIT licence (© majiayu000). 528 words, ~1,060 tokens.

Download SKILL.mdSave it as .claude/skills/react-best-practices/SKILL.md (or your agent's skills folder).
name
react-best-practices
description
React and Next.js performance playbook distilled from Vercel Engineering guidance. Use when building, reviewing, or refactoring React/Next.js code for waterfalls, bundle size, rendering cost, and client/server data flow.

React Best Practices

Practical React and Next.js guidance for performance-sensitive product work.

This skill is a self-contained distillation of the Vercel React performance guidance so it can be installed and used directly inside Spellbook.

When To Use

Use this skill when the user asks to:

  • build or refactor React components
  • improve Next.js performance
  • reduce bundle size
  • remove data-fetch waterfalls
  • fix expensive rerenders
  • review frontend code for performance issues

Priority Order

Always check higher-priority categories first.

PriorityCategoryFocus
1Waterfallsstart async work early, await late, parallelize independent fetches
2Bundle sizeavoid barrel imports, defer heavy code, split by feature
3Server-side performancededupe work, minimize serialization, prefer server execution
4Client data fetchingdedupe requests, avoid redundant listeners and client churn
5Rerendersreduce subscriptions, stabilize dependencies, move expensive work
6Renderingavoid hydration flicker, reduce DOM/SVG cost, optimize long lists
7JavaScript hot pathscache repeated lookups, combine iterations, exit early
8Advanced patternsstable refs and callback patterns for edge cases

Hard Rules

1. Eliminate Waterfalls First
  • Start independent requests in parallel.
  • Do not serialize async work unless there is a real dependency.
  • In API routes and server components, create promises early and await them as late as possible.
  • Use Suspense boundaries when streaming content helps unblock rendering.
2. Protect Bundle Size
  • Prefer direct imports over barrel files on hot paths.
  • Use dynamic imports for heavy or infrequently used components.
  • Defer analytics, logging, and other non-critical third-party code until after hydration.
  • Load optional modules only when the related feature is activated.
3. Prefer Server Work Over Client Work
  • Keep data fetching and heavy transformation on the server when possible.
  • Minimize data serialized into client components.
  • Cache server-side repeated work when the request model allows it.
4. Control Rerenders
  • Subscribe only to the state needed for rendering.
  • Use primitive effect dependencies where possible.
  • Use functional setState when it removes unstable dependencies.
  • Initialize expensive state lazily.
  • Use startTransition for non-urgent UI updates.
Show full SKILL.md (204 more words)Show less
5. Optimize Rendering Paths
  • Use virtualization or content-visibility for long lists when appropriate.
  • Avoid animating heavy SVG nodes directly when a wrapper works.
  • Hoist static JSX outside render paths when it is truly constant.
  • Prefer explicit ternaries over brittle && branches when rendering conditions matter.
6. Clean Up JavaScript Hot Spots
  • Build Map or Set for repeated membership checks.
  • Cache repeated property access or derived results in tight loops.
  • Combine adjacent filter / map passes when the path is performance-sensitive.
  • Return early from branches instead of carrying unnecessary work forward.

Review Checklist

When reviewing React or Next.js code, check for:

  1. Any sequential async calls that could be parallelized
  2. Barrel imports or large dependencies in hot components
  3. Data fetched on the client that could move to the server
  4. Effects or callbacks with unstable object/function dependencies
  5. Repeated list scans where Map or Set would help
  6. User-visible loading or hydration flicker

Output Expectations

When using this skill, the output should:

  • identify the highest-impact category first
  • explain why the current pattern is costly
  • propose the smallest effective change
  • include concrete verification ideas such as bundle diff, profiler, or render-count checks

References

  • React docs: react.dev
  • Next.js docs: nextjs.org
  • SWR docs: swr.vercel.app
  • Vercel engineering performance posts

© majiayu000, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

Just SKILL.md in skills/react-best-practices of majiayu000/spellbook.

Open the folder on GitHubat commit ed52af7

Compare with similar skills

React Best Practices next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

React Best Practices compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
React Best Practices this skillmajiayu000/spellbook287—~1.1kAutomated safety check: PassMIT
React Best Practicesryokun6/ryos1.3k—~2kAutomated safety check: PassMIT
Vercel React Best Practicesgambitph/Stackable351—~2kAutomated safety check: PassMIT
React Performanceaffaan-m/ECC276k1 repos~4.5kAutomated safety check: PassMIT
Vercel React Best Practicessanity-io/sanity6.4k129 repos~1.6kAutomated safety check: PassMIT
React Idiomsirahardianto/awesome-agv157—~3.8kAutomated safety check: PassMIT

Similar skills

  • React Best Practices

    ryokun6/ryos

    React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).

    1.3k GitHub stars~2k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Vercel React Best Practices

    gambitph/Stackable

    React performance optimization guidelines from Vercel Engineering.

    351 GitHub stars~2k tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed

  • React Performance

    affaan-m/ECC

    React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills).

    276k GitHub starsUsed in 1 repo~4.5k tokens
    DevelopmentAuto-check passed

  • Vercel React Best Practices

    sanity-io/sanity

    Official

    React and Next.js performance optimization guidelines from Vercel Engineering.

    6.4k GitHub starsUsed in 129 repos~1.6k tokens
    Frontend & DesignAuto-check passed

  • React Idioms

    irahardianto/awesome-agv

    React 19+ patterns: custom hooks, Suspense boundaries, state management, component composition, and web performance.

    157 GitHub stars~3.8k tokensUpdated 4 days ago
    Frontend & DesignAuto-check passed

  • React Refactor Tournament

    ragnar-pwninskjold/tech-snacks

    Review React/Next.js code against the real vercel-react-best-practices skill, backlog the performance findings keyed to actual rule ids + impact tiers, rank the most over-subscribed tiers, then fix…

    137 GitHub stars~1.3k tokensUpdated 1 mo ago
    DevelopmentAuto-check passed

More from majiayu000/spellbook

All 97 skills in this repo

  • Skill Ecosystem Doctor

    majiayu000/spellbook

    Audits and repairs how coding-agent Skills are owned, copied and exposed across runtimes, from canonical sources to quarantine and retirement.

    287 GitHub stars~3k tokensUpdated today
    Auto-check passed

  • AGENTS.md Scaffold

    majiayu000/spellbook

    Scans a repository for real evidence and proposes, or on request writes, a small stack of root and scoped AGENTS.md files with validation commands and generated-file boundaries.

    287 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Product Demo Builder

    majiayu000/spellbook

    Plans, produces or diagnoses evidence-backed product demo videos: script, capture plan, pacing checks and verified final media built on real product behavior.

    287 GitHub stars~3.3k tokensUpdated today
    Auto-check passed

  • Flowguard Task Guard

    majiayu000/spellbook

    Single entry point that routes long or ambiguous agent tasks, checks live state, bounds autonomous loops and leaves a resumable handoff.

    287 GitHub stars~2.1k tokensUpdated today
    Auto-check passed

  • npm Supply Chain Check

    majiayu000/spellbook

    Scans a repository, its lockfiles and node_modules for known malicious npm package versions and install-time indicators, using a read-only Python scanner.

    287 GitHub stars~1.5k tokensUpdated today
    Auto-check passed

  • Product Manager Toolkit

    majiayu000/spellbook

    Product management helpers: a RICE scoring script, an interview transcript analyzer and PRD templates for prioritizing features, synthesizing research and writing requirements.

    287 GitHub stars~2.2k tokensUpdated today
    Auto-check passed

Works with

Categories

Questions about React Best Practices

What does React Best Practices do?

React and Next.js performance playbook distilled from Vercel Engineering guidance. React Best Practices is an agent skill from majiayu000/spellbook.js performance playbook distilled from Vercel Engineering guidance.

When should I use React Best Practices?

React Best Practices fits situations like: refactoring React/Next.js code for waterfalls; client/server data flow.

How do I install React Best Practices in Claude Code?

Run `npx skills add majiayu000/spellbook --skill react-best-practices -a claude-code`. Or copy the skill folder (skills/react-best-practices in majiayu000/spellbook) into .claude/skills/react-best-practices in your project. Claude Code loads it when a task matches its description.

How do I install React Best Practices in Codex?

Run `npx skills add majiayu000/spellbook --skill react-best-practices -a codex`. Or copy the skill folder (skills/react-best-practices in majiayu000/spellbook) into .agents/skills/react-best-practices in your project. Codex loads it when a task matches its description.

Can I use React Best Practices in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add majiayu000/spellbook --skill react-best-practices -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/react-best-practices, .gemini/skills/react-best-practices, .github/skills/react-best-practices and .opencode/skills/react-best-practices in your project.

What does React Best Practices need to run?

SKILL.md names no scripts, command-line tools or credentials: React Best Practices is instructions for the agent only.

Does React Best Practices access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is React Best Practices safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does React Best Practices use?

React Best Practices is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does React Best Practices use?

About 1.1k tokens (SKILL.md is roughly 4.2k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to React Best Practices?

Skills that share tags, products or a category with React Best Practices: React Best Practices (ryokun6/ryos, 1.3k stars), Vercel React Best Practices (gambitph/Stackable, 351 stars), React Performance (affaan-m/ECC, 276k stars) and Vercel React Best Practices (sanity-io/sanity, 6.4k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains React Best Practices?

majiayu000 (a GitHub user) maintains it in majiayu000/spellbook, which has 287 GitHub stars. The repository holds 97 skills in this directory. The repository was last updated on October 8, 2026.

Source: majiayu000/spellbook on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.