no-use-effect · alejandrobailo — Claude Code skill: what it does, how to install
Enforces a zero-useEffect policy across React and React Native components, redirecting logic to derived state, handlers, and dedicated libraries.
npx skills add alejandrobailo/no-use-effect --skill no-use-effect -a claude-code
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a claude-codeWhat no-use-effect does
This skill acts as an always-on architectural guard for React and React Native codebases. It bans direct imports and invocations of useEffect in UI components. Instead of chaining effects to mirror state, it instructs the agent to compute values inline or wrap heavy calculations in useMemo. Data fetching shifts entirely to purpose-built querying libraries or React 19's use() hook with <Suspense>.
User actions and submission workflows belong strictly in event handlers, not in flag-flipping state cycles. When a component must reset its state on ID changes, the rule mandates React's native key prop remounting rather than dependency tricks. Direct effect calls remain permitted only inside encapsulated hooks like useMountEffect for third-party browser subscriptions. Bandaging broken effects with useRef guards is flagged as an anti-pattern.
What it helps with
- eliminate unnecessary render passes caused by prop synchronization
- prevent network race conditions in component-level data fetching
- move procedural submission flows into direct event listeners
- remove ref-based guard hacks used to stop effect loops
Example prompts for the agent
- Refactor this product card to remove all useEffect calls
- Handle video player reset on ID change using keys instead of an effect
- Audit this React Native screen for state sync effects
How to install no-use-effect
1Skills CLI (Vercel)
npx skills add alejandrobailo/no-use-effect --skill no-use-effect -a claude-codenpx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a claude-code2Manually: put the files in place
~/.claude/skills/alejandrobailo-no-use-effect/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/alejandrobailo-no-use-effect/
1Skills CLI (Vercel)
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a codex2Manually: put the files in place
.agents/skills/alejandrobailo-no-use-effect/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a cursor2Manually: put the files in place
.cursor/skills/alejandrobailo-no-use-effect/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install alejandrobailo/no-use-effect alejandrobailo-no-use-effect2Manually: put the files in place
.github/skills/alejandrobailo-no-use-effect/SKILL.md1Skills CLI (Vercel)
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -a gemini-cli2Platform CLI
gemini skills install https://github.com/alejandrobailo/no-use-effectManually: put the files in place
.devin/skills/alejandrobailo-no-use-effect/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add alejandrobailo/no-use-effect --skill alejandrobailo-no-use-effect -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 no-use-effect
How do I install no-use-effect in Claude Code?
Run npx skills add alejandrobailo/no-use-effect --skill no-use-effect -a claude-code in your terminal. The agent will load the instructions and apply them automatically across all React files.
What does no-use-effect do?
It stops the AI agent from writing direct useEffect calls in React components. The skill substitutes effects with inline computations, event handlers, remount keys, and specialized fetching tools.
Does no-use-effect ban useEffect completely?
No, direct calls are still permitted inside reusable custom hooks such as useMountEffect when integrating with third-party widgets or DOM subscriptions.
Similar skills
Everything for Frontend and UI →no-use-effect by other authors comes first.
