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 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/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<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="Reviewed on agentmods" width="80" 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.5 | $0.00011 | $0.00404 |
| Sonnet 5.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 1mo 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.
- 1mo 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 2mo ago), licensed MIT. It adds 27 tokens to every session and 1,010 once invoked, about $0.0001 per session on Opus 5.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
fork-discipline
Audit and enforce the core/client boundary in multi-client projects. Detects where shared platform code is tangled with client-specific code, finds hardcoded client checks, config files that replace instead of merge, scattered client code, migration conflicts, and missing extension points. Produces a boundary map…
react-patterns
React 19 performance patterns and composition architecture for Vite + Cloudflare projects. 50+ rules ranked by impact — eliminating waterfalls, bundle optimisation, re-render prevention, composition over boolean props, server/client boundaries, and React 19 APIs. Use when writing, reviewing, or refactoring React…
codex-review
Run an independent code review using the OpenAI Codex CLI in headless mode. Gets a second opinion from a different model family (the current Codex models) on recent changes, a PR, a commit, or the whole app — covering bugs, regressions, security, data consistency, UX/state bugs, performance risks, and testing gaps.…
react-effects-audit
Use when auditing React or Next.js components for unnecessary or unsafe useEffect usage -- detects 9 anti-patterns from "You Might Not Need an Effect".
React Component Reviewer
Analyzes React components for performance, accessibility, and modern hook usage.
react-senior-code-review
Senior-level review of a React feature, by theSeniorDev — structure & boundaries, state & data flow, performance & rendering, types/forms/testability/a11y, and styling architecture & motion. Recommends design patterns by name when one fits. Produces prioritized findings (Critical → Nit) with file:line, why, and a…