What problem does it solve? React codebases drift toward god-components, useEffect data-fetching, prop-drilling, and render-phase side effects when no automated guardrail reviews each edit. This Skill mirrors the planning-time React architecture pack at runtime so the same boundaries are enforced while code is being written. ## Core Features & Use Cases - Runtime boundary checks: Soft-warns on useEffect fetch chains, god-components over 200 LOC with more than 3 useState calls, repeated inline style objects, prop-drilling beyond 2 levels, localStorage access in render, and unnecessary dynamic imports. - Scoped activation: Loads only when edits touch *.tsx, *.jsx, components/, app/, or pages/ paths, staying silent for Vue, Svelte, build config, and non-React files. - Pack parity: Mirrors kb/architecture-packs/react.md so the PreToolUse hook and the plan phase enforce identical rules, with the pack winning on any disagreement. - Use Case: While an agent edits a Next.js App Router page that fetches data inside useEffect, the hook emits a soft-warn recommending a server component or SWR before the pattern spreads. ## Quick Start Ask the agent to review edits to your React components and warn whenever a change introduces useEffect data-fetching, god-components, or prop-drilling.
