react-component-hook-guidelineslisted

# React Component Hook Guidelines ## Overview Guide the splitting, refactoring, and review of React page components, business components, presentation components, custom Hooks, and utility functions. Focus on responsibility boundaries, props width, state flow, branching, page orchestration, and coupling between UI and logic. Use this skill to decide whether logic belongs in a page, a Hook, a presentation component, or `lib/utils`. ## When to Use Use this skill when the user asks to: - Split a component or Hook - Refactor a component, page, or Hook that feels too large or too heavy - Review React code structure, component design, or Hook design - Reduce prop width, state fan-out, or branch complexity - Reorganize frontend layering or page orchestration - Separate UI from logic, requests, routing, caching, modals, or analytics - Extract business Hooks, presentation components, or pure utility functions ## Do not use Do not use this skill for: - Tasks unrelated to React components, Hooks, or page orchestration - Pure backend work - Simple style-only changes that do not involve boundaries, state flow, or props design ## Instructions 1. Identify the task type first: code review, refactor, new implementation, or layer or structure cleanup. 2. Locate the core unit: page component, business component, presentation component, custom Hook, or utility function. 3. Check whether the change has a single reason, then look for accidental coupling between props, state, effects, routi