React Best Practices
ryokun6/ryos
React performance optimization guidelines from Vercel Engineering (vercel-labs/agent-skills).
React performance optimization guidelines. An agent skill from poteto/noodle.
Install React Best Practices
$ npx skills add poteto/noodle --skill react-best-practices -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install poteto/noodle react-best-practices --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.agents/skills/react-best-practices .claude/skills/react-best-practices && rm -rf skills-srcUse ~/.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/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .claude/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practicesType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add poteto/noodle --skill react-best-practices -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install poteto/noodle react-best-practices --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .agents/skills && cp -r skills-src/.agents/skills/react-best-practices .agents/skills/react-best-practices && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .agents/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add poteto/noodle --skill react-best-practices -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install poteto/noodle react-best-practices --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/.agents/skills/react-best-practices .cursor/skills/react-best-practices && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .cursor/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/poteto/noodle.git --path .agents/skills/react-best-practices--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add poteto/noodle --skill react-best-practices -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install poteto/noodle react-best-practices --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/.agents/skills/react-best-practices .gemini/skills/react-best-practices && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .gemini/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install poteto/noodle react-best-practicesInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add poteto/noodle --skill react-best-practices -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .github/skills && cp -r skills-src/.agents/skills/react-best-practices .github/skills/react-best-practices && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .github/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add poteto/noodle --skill react-best-practices -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install poteto/noodle react-best-practices --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/poteto/noodle.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/.agents/skills/react-best-practices .opencode/skills/react-best-practices && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "react-best-practices" agent skill from https://github.com/poteto/noodle/tree/main/.agents/skills/react-best-practices into .opencode/skills/react-best-practices/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "react-best-practices", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
react-best-practices- GitHub stars
- 437
- Token cost
- ~1.4k tokens
- SKILL.md length
- 501 words
- Files
- 49 (incl. references)
- Skills in repo
- 26
- Repo updated
- First seen
- Licence
- MIT
At a glance
React performance optimization guidelines. An agent skill from poteto/noodle.
- Works in 8 steps: Eliminating Waterfalls (CRITICAL) → Bundle Size Optimization (CRITICAL) → Client-Side Data Fetching (MEDIUM-HIGH) → …
- Refactoring React components
- SKILL.md covers When to Apply, Rule Categories by Priority, Quick Reference and How to Use
- Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md
What it does
React Best Practices is an agent skill from poteto/noodle. React performance optimization guidelines. Use when writing, reviewing, or refactoring React components, hooks, effects, data fetching, or bundle optimization. Includes useEffect best practices — when NOT to use effects and better alternatives. Triggers: "when writing React code", "reviewing a React PR", "why is this component re-rendering", "reviewing code for performance issues", "optimizing bundle size".
Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 49 other files, including reference files (for example `references/_sections.md`, `references/advanced-event-handler-refs.md` and `references/advanced-init-once.md`).
It sits in Frontend & Design, covering React components, Web performance and Performance optimization. It works with React. The repository describes itself as: Orchestrate agents using skills. The licence is MIT.
When your agent uses it
- Refactoring React components
- Bundle optimization
Example prompts
- “when writing React code”
- “reviewing a React PR”
- “why is this component re-rendering”
- “/react-best-practices”
Workflow steps
8 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 82d2921. 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.4k tokens when it runs, and up to ~21k if it reads all its reference files. Until then it costs about 108 tokens; SKILL.md has 501 words of instructions outside code blocks.
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 poteto/noodle at commit 82d2921, republished under its MIT licence (© poteto). 501 words, ~1,392 tokens.
Download SKILL.mdSave it as
.claude/skills/react-best-practices/SKILL.md (or your agent's skills folder). This skill also uses 48 other files; get the full folder from GitHub.- name
- react-best-practices
- description
- React performance optimization guidelines. Use when writing, reviewing, or refactoring React components, hooks, effects, data fetching, or bundle optimization. Includes useEffect best practices — when NOT to use effects and better alternatives. Triggers: "when writing React code", "reviewing a React PR", "why is this component re-rendering", "reviewing code for performance issues", "optimizing bundle size".
React Best Practices
Performance optimization guide for client-side React applications. Contains 47 rules across 8 categories, prioritized by impact. Adapted from Vercel Engineering's guidelines, filtered for client-only React + Vite (no Next.js / SSR).
When to Apply
Reference these guidelines when:
- Writing new React components or hooks
- Reviewing code for performance issues
- Refactoring existing React code
- Optimizing bundle size or render performance
- Writing or reviewing
useEffectusage
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
| 3 | Client-Side Data Fetching | MEDIUM-HIGH | client- |
| 4 | Re-render Optimization | MEDIUM | rerender- |
| 5 | useEffect Patterns | MEDIUM | useeffect- |
| 6 | Rendering Performance | MEDIUM | rendering- |
| 7 | JavaScript Performance | LOW-MEDIUM | js- |
| 8 | Advanced Patterns | LOW | advanced- |
Quick Reference
1. Eliminating Waterfalls (CRITICAL)
async-defer-await— Move await into branches where actually usedasync-parallel— Use Promise.all() for independent operationsasync-dependencies— Use promise chaining for partial dependenciesasync-api-routes— Start promises early, await late
2. Bundle Size Optimization (CRITICAL)
bundle-barrel-imports— Import directly, avoid barrel filesbundle-conditional— Load modules only when feature is activatedbundle-defer-third-party— Load analytics/logging after mountbundle-preload— Preload on hover/focus for perceived speed
3. Client-Side Data Fetching (MEDIUM-HIGH)
client-event-listeners— Deduplicate global event listenersclient-passive-event-listeners— Use passive listeners for scroll/touchclient-swr-dedup— Use SWR for automatic request deduplicationclient-localstorage-schema— Version and minimize localStorage data
4. Re-render Optimization (MEDIUM)
rerender-derived-state-no-effect— Derive state during render, not effectsrerender-defer-reads— Don't subscribe to state only used in callbacksrerender-simple-expression-in-memo— Avoid memo for simple primitivesrerender-memo-with-default-value— Hoist default non-primitive propsrerender-memo— Extract expensive work into memoized componentsrerender-dependencies— Use primitive dependencies in effectsrerender-move-effect-to-event— Put interaction logic in event handlersrerender-derived-state— Subscribe to derived booleans, not raw valuesrerender-functional-setstate— Use functional setState for stable callbacksrerender-lazy-state-init— Pass function to useState for expensive valuesrerender-transitions— Use startTransition for non-urgent updatesrerender-use-ref-transient-values— Use refs for transient frequent values
Show full SKILL.md (206 more words)Show less
5. useEffect Patterns (MEDIUM)
useeffect-anti-patterns— Common mistakes: derived state in effects, effect chains, notifying parentsuseeffect-alternatives— Decision tree and alternatives: derived state, key prop, event handlers, useSyncExternalStore
6. Rendering Performance (MEDIUM)
rendering-animate-svg-wrapper— Animate div wrapper, not SVG elementrendering-content-visibility— Use content-visibility for long listsrendering-hoist-jsx— Extract static JSX outside componentsrendering-svg-precision— Reduce SVG coordinate precisionrendering-conditional-render— Use ternary, not && for conditionalsrendering-usetransition-loading— Prefer useTransition for loading state
7. JavaScript Performance (LOW-MEDIUM)
js-batch-dom-css— Batch DOM reads/writes to avoid layout thrashingjs-index-maps— Build Map for repeated lookupsjs-cache-property-access— Cache object properties in loopsjs-cache-function-results— Cache function results in module-level Mapjs-cache-storage— Cache localStorage/sessionStorage readsjs-combine-iterations— Combine multiple filter/map into one loopjs-length-check-first— Check array length before expensive comparisonjs-early-exit— Return early from functionsjs-hoist-regexp— Hoist RegExp creation outside loopsjs-min-max-loop— Use loop for min/max instead of sortjs-set-map-lookups— Use Set/Map for O(1) lookupsjs-tosorted-immutable— Use toSorted() for immutability
8. Advanced Patterns (LOW)
advanced-init-once— Initialize app once per app loadadvanced-event-handler-refs— Store event handlers in refsadvanced-use-latest— useEffectEvent for stable callback refs
How to Use
Read individual reference files for detailed explanations and code examples:
references/async-parallel.md
references/rerender-derived-state-no-effect.md
references/useeffect-anti-patterns.mdEach reference file contains:
- Brief explanation of why it matters
- Incorrect code example with explanation
- Correct code example with explanation
- Additional context and references
© poteto, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 48 other files (references) in .agents/skills/react-best-practices of poteto/noodle.
- SKILL.md
- references/_sections.md
- references/advanced-event-handler-refs.md
- references/advanced-init-once.md
- references/advanced-use-latest.md
- references/async-api-routes.md
- references/async-defer-await.md
- references/async-dependencies.md
- references/async-parallel.md
- references/bundle-barrel-imports.md
- references/bundle-conditional.md
- references/bundle-defer-third-party.md
- references/bundle-preload.md
- references/client-event-listeners.md
- references/client-localstorage-schema.md
- references/client-passive-event-listeners.md
- references/client-swr-dedup.md
- references/js-batch-dom-css.md
- references/js-cache-function-results.md
- references/js-cache-property-access.md
- … and 29 more
Open the folder on GitHubat commit 82d2921
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.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| React Best Practices this skillpoteto/noodle | 437 | — | ~1.4k | Automated safety check: Pass | MIT | |
| React Best Practicesryokun6/ryos | 1.3k | — | ~2k | Automated safety check: Pass | MIT | |
| Vercel React Best Practicesgambitph/Stackable | 350 | — | ~2k | Automated safety check: Pass | MIT | |
| React Performanceaffaan-m/ECC | 275k | 1 repos | ~4.5k | Automated safety check: Pass | MIT | |
| Vercel React Best Practicessanity-io/sanity | 6.4k | 130 repos | ~1.6k | Automated safety check: Pass | MIT | |
| React Best Practicesmajiayu000/spellbook | 286 | — | ~1.1k | Automated safety check: Pass | MIT |
Similar skills
Vercel React Best Practices
gambitph/Stackable
React performance optimization guidelines from Vercel Engineering.
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).
- Official
Vercel React Best Practices
sanity-io/sanity
React and Next.js performance optimization guidelines from Vercel Engineering.
React Best Practices
majiayu000/spellbook
React and Next.js performance playbook distilled from Vercel Engineering guidance.
React
blencorp/claude-code-kit
Core React 19 patterns including hooks, Suspense, lazy loading, component structure, TypeScript best practices, and performance optimization.
More from poteto/noodle
All 26 skills in this repoMeditate
poteto/noodle
Audit and evolve the brain vault — prune outdated content, discover cross-cutting principles, review skills for structural encoding opportunities.
Ruminate
poteto/noodle
Mine past Claude Code and Codex conversations for uncaptured patterns, corrections, and knowledge.
Ast Grep
poteto/noodle
Structural code search via ast-grep — use when code shape and element relationships matter, not just text.
Execute
poteto/noodle
Implementation methodology for executing tasks. An agent skill from poteto/noodle.
Noodle
poteto/noodle
Operate the Noodle CLI — explain commands, find flags, create/edit .noodle.toml config.
Plan
poteto/noodle
Systematic planning for medium-to-large tasks. An agent skill from poteto/noodle.
Related
Works with
Categories
Questions about React Best Practices
What does React Best Practices do?
React performance optimization guidelines. An agent skill from poteto/noodle. React Best Practices is an agent skill from poteto/noodle. React performance optimization guidelines.
When should I use React Best Practices?
React Best Practices fits situations like: refactoring React components; bundle optimization.
How do I install React Best Practices in Claude Code?
Run `npx skills add poteto/noodle --skill react-best-practices -a claude-code`. Or copy the skill folder (.agents/skills/react-best-practices in poteto/noodle) 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 poteto/noodle --skill react-best-practices -a codex`. Or copy the skill folder (.agents/skills/react-best-practices in poteto/noodle) 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 poteto/noodle --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.4k tokens (SKILL.md is roughly 5.6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 20k tokens, read only when the agent opens those files.
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, 350 stars), React Performance (affaan-m/ECC, 275k 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?
poteto (a GitHub user) maintains it in poteto/noodle, which has 437 GitHub stars. The repository holds 26 skills in this directory. The repository was last updated on March 19, 2026.
Source: poteto/noodle on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.