forge-react-hooks

Detect React hook order violations using AST-based analysis.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-react-hooks
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: forge-react-hooks
Source: https://github.com/f4rkh4d/forge-skill/tree/main/skills/design/forge-react-hooks
Command: npx skills add https://github.com/f4rkh4d/forge-skill --skill forge-react-hooks

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It prevents React hook order violations that can break state alignment across renders and cause runtime errors like "Rendered fewer hooks than expected."

Core Features & Use Cases

  • AST-precise Rules of Hooks verification: Detects conditional/loop/ternary/short-circuit/try-catch/early-return patterns with hook-level accuracy.
  • React component and custom hook enforcement: Ensures hooks are only called at the top level of function components or other custom hooks.
  • Scope coverage for similar ecosystems: Applies to React and compatible hook-based libraries referenced by the skill (e.g., preact/solid-js patterns with the same discipline).

Quick Start

Use the forge-react-hooks skill to check a React or TypeScript file and fix any hooks called conditionally, in loops, via short-circuits/ternaries, inside try/catch, or after early returns.

Frequently Asked Questions about forge-react-hooks

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I prevent React hook order violations in AI-generated code?

React hook order violations occur when hooks are called conditionally, inside loops, or after early returns. AST-based code verification detects these patterns by analyzing the syntax tree to enforce top-level unconditional hook calls, preventing runtime failures like "Rendered fewer hooks than expected."

Why does my React component render fewer hooks than expected?

Your React component renders fewer hooks than expected because hooks are called conditionally or after early returns, breaking state alignment. AST analysis identifies these Rules of Hooks violations to ensure hooks remain at the top level of function components and custom hooks.

How do I check a React file for conditional hook calls?

Check a React file for conditional hook calls by running AST-precise Rules of Hooks verification. This process detects hooks executed within conditionals, loops, short-circuit operators, ternaries, try/catch blocks, or after early returns to fix structural violations.

Does AST analysis catch hooks called inside try/catch or short-circuit operators?

AST analysis does catch hooks called inside try/catch blocks and short-circuit operators. It provides hook-level accuracy for React components and custom hooks by enforcing top-level unconditional calls across all control flow patterns that violate the Rules of Hooks.

Can I use this Rules of Hooks enforcement for SolidJS or Preact patterns?

You can use Rules of Hooks enforcement for compatible hook-based libraries like Preact and SolidJS patterns. The AST-based detection applies the same top-level unconditional hook call discipline required by React to prevent hook order corruption across similar ecosystems.