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