Agent skill · yangsonhung
react-component-hook-guidelines
Use when reviewing, refactoring, or implementing React components and custom Hooks with unclear boundaries or oversized props.
What it needs
About 3k tokens when loaded.
What this skill does
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, routing, caching, modals, and analytics. 4. Prefer boundary splits to reduce complexity. Do not use line count as a substitute for design judgment. Quick Decisions When you need to decide whether a component or Hook should be split, read references/react-component-hook-rules.md. When reviewing existing React code, check in this order: responsibility boundary -> props design -> complexity -> branch expansion. When landing a refactor, extract business Hooks, presentation components, and pure functions first. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills yangsonhung/react-component-hook-guidelines