react · pedronauck — Claude Code skill: React rules and setup
Guidance for building and reviewing React 19 components and hooks with React Compiler in mind. Use it for compiler setup, state and Effects decisions, or component tests.
npx skills add pedronauck/skills --skill react -a claude-codeWhat react does
This skill covers React 19.2 and React Compiler 1.0, from render purity and mutation to refs, state, and Effects. It helps decide when manual useMemo or useCallback still matters and when the compiler handles component work. An incomplete dependency list can make the compiler skip optimization, so lint rules are part of the workflow.
Topic-specific references cover compiler and lint setup, component structure and types, state, React 19 APIs, and testing. Read the reference relevant to the change; bring in adjacent material when the task crosses topics. Testing guidance uses Vitest.
The target stack is React 19.2, React Compiler 1.0, and eslint-plugin-react-hooks 7.1+. React Native, other frameworks, and backend-only Node.js are outside its scope. Set up linting before enabling the compiler: a rule violation can leave a component unoptimized without failing the build.
What it helps with
- decide whether a component needs manual memoization
- review Effects and derived state
- configure React Compiler and its lint rules
- write or repair component and hook tests
Example prompts for the agent
- Review this component against React Compiler rules and explain which manual memoization should stay.
- Show how to avoid copying derived state inside an Effect when the React rules allow it.
- Help me test this hook using the skill's testing guidance.
How to install react
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a claude-code2Manually: put the files in place
~/.claude/skills/react/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/react/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a codex2Manually: put the files in place
.agents/skills/react/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a cursor2Manually: put the files in place
.cursor/skills/react/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install pedronauck/skills react2Manually: put the files in place
.github/skills/react/SKILL.md1Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a gemini-cli2Platform CLI
gemini skills install https://github.com/pedronauck/skills --path skills/mine/reactManually: put the files in place
.devin/skills/react/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add pedronauck/skills --skill react -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about react
How do I install react in Claude Code?
Run npx skills add pedronauck/skills --skill react -a claude-code. The skill file is at ~/.claude/skills/react/SKILL.md.
What does the react skill do?
It guides React 19 component and hook work, including state, Effects, compiler-aware memoization, and React 19 APIs. It also covers lint setup and tests.
Which React Compiler versions does react target?
The skill targets React 19.2 with React Compiler 1.0 and lists eslint-plugin-react-hooks 7.1+ for linting.
Similar skills
Everything for Frontend and UI →react by other authors comes first.
