Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelinesnpx skills add YangsonHung/awesome-agent-skills --skill react-component-hook-guidelinesgit clone --depth 1 https://github.com/YangsonHung/awesome-agent-skillsWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines)<a href="https://agentmods.dev/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines"><img src="https://agentmods.dev/badge/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00027 | $0.01010 |
| Opus 5 | $0.00014 | $0.00505 |
| Sonnet 5 | $0.00005 | $0.00202 |
| Haiku 4.5 | $0.00003 | $0.00101 |
Grade A, and why
react-component-hook-guidelines scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 96 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
- Identify the task type first: code review, refactor, new implementation, or layer or structure cleanup.
- Locate the core unit: page component, business component, presentation component, custom Hook, or utility function.
- Check whether the change has a single reason, then look for accidental coupling between props, state, effects, routing, caching, modals, and analytics.
- 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. Do not start with cosmetic style moves.
- When implementing a new component, decide first whether it is page orchestration, a business container, a presentation component, or a reusable UI component.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 96 lines · 27 tokens per session scan A 152cf09ddbea
react-component-hook-guidelines is a skill published in the GitHub repository YangsonHung/awesome-agent-skills (18 stars, last pushed 28d ago), licensed MIT. It adds 27 tokens to every session and 1,010 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
reablocks
Use when building UI in React with the reablocks component library (Button, Dialog, Drawer, Select, Calendar, CommandPalette, Tabs, Tree, Tooltip, etc.). Covers ThemeProvider setup, extendTheme, custom variants, mergeThemeClasses, useComponentTheme/useTheme hooks, and the 50+ component index.
reachat
Use when building chat / LLM UIs in React with the reachat component library (Chat, ChatInput, SessionsList, SessionMessages, ChatBubble, AppBar, Markdown rendering with code highlighting, RichTextInput with @mentions and /commands, MessageStatus, ComponentCatalog for LLM-driven dynamic components, useAgUi for ag-ui…
catalog
System for letting an LLM render custom React components by emitting fenced code blocks with JSON specs. The catalog ships a remark plugin, a override, and a system-prompt generator — all wired through .
graph-canvas
Main entry point for reagraph. Wraps the Three.js canvas, scene, camera controls, and lasso selection into a single component. Pass nodes and edges data along with layout, theme, and interaction configuration.
ag-ui
React hook that connects an AG-UI protocol agent endpoint to reachat. Returns the props needed by plus session helpers, and streams responses via SSE (text/event-stream).
reagraph
Use when building interactive 2D or 3D graph or network visualizations in React with the reagraph library (GraphCanvas, node-link diagrams, force-directed layouts). Covers data shapes (GraphNode, GraphEdge), 16 layout algorithms, selection, lasso, camera controls, sizing strategies, and theming.