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-guidelines-cngit 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-cn)<a href="https://agentmods.dev/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines-cn"><img src="https://agentmods.dev/badge/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines-cn/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-cn"><img src="https://agentmods.dev/badge/skills/yangsonhung/awesome-agent-skills/react-component-hook-guidelines-cn.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.00190 | $0.01219 |
| Opus 5.5 | $0.00076 | $0.00488 |
| Sonnet 5.5 | $0.00038 | $0.00244 |
| Haiku 4.5 | $0.00019 | $0.00122 |
Grade A, and why
react-component-hook-guidelines-cn 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.
What it actually says
React Component Hook Guidelines
Overview
提供 React 组件、页面组件、自定义 Hook 的拆分、重构与评审判断。重点处理职责混杂、props 过宽、大状态下传、分支过多、页面编排过重、展示与逻辑耦合。
何时使用
当用户提出以下需求时使用本技能：
- 拆组件
- 拆 Hook
- 组件太大、Hook 太重
- 帮忙梳理页面或 React 分层
- 重构 React 组件、页面逻辑或组件设计
- 减少 props、收敛职责、拆分 God Component 或 God Hook
- 处理页面状态混乱、逻辑和 UI 耦合、分支太多等问题
不要使用
以下场景不应使用本技能：
- 与 React 组件、Hook 或页面编排无关的任务
- 纯后端逻辑或非前端任务
- 与职责边界、状态流转、props 设计无关的简单样式修改
使用说明
- 先识别任务类型：代码评审、重构、实现新功能，或梳理目录/分层。
- 定位核心单位：页面组件、业务组件、展示组件、自定义 Hook、工具函数。
- 判断变化原因是否单一，再检查 props、状态、副作用、路由、缓存、弹窗、埋点是否被错误耦合。
- 优先通过拆分边界解决复杂度，不用机械压行数代替设计判断。
快速决策
- 需要判断组件或 Hook 是否拆分时，读取 references/react-component-hook-rules.md。
- 需要评审现有 React 代码时，按“职责边界 → props 设计 → 复杂度 → 分支扩展”的顺序检查。
- 需要落地重构时，优先抽业务 Hook、展示组件、纯函数，不要先做样式层面的无效搬运。
- 需要实现新组件时，先决定它属于页面编排、业务容器、展示组件还是通用 UI 组件。
执行规则
评审
至少检查以下问题：
- 是否只导出一个主组件或主 Hook。
- 是否把页面级大 state 或整包 actions 直接下发给子组件。
- 是否同时耦合 UI、请求、路由、副作用、缓存、弹窗或埋点。
- 是否存在超过 3 个模式分支且更适合改成映射/策略。
- 是否有应当提取为 Hook 或
lib/utils的逻辑。
重构
优先使用这条拆分路径：
- 从页面组件中拿掉业务状态与副作用。
- 把可复用或可测试的状态流转抽成业务 Hook。
- 把重 JSX 区块拆成最小展示组件。
- 把纯数据转换、校验、映射提到
lib/或utils/。 - 收缩 props，只保留子组件真正需要的字段和回调。
新实现
实现前先做三个判断：
- 这是编排层还是展示层？
- 状态逻辑是否应该进 Hook？
- 这段逻辑是否脱离 React 生命周期后仍成立？如果成立，放到
lib/utils。
补充强约束：
- 代码注释必须使用中文。
- 函数需要在定义前补充功能注释，说明其职责与处理场景。
- Hook 需要在定义前补充功能注释，说明其封装的业务职责、状态范围或副作用边界。
- 注释只说明职责、边界和意图，不写低信息量的逐行翻译式注释。
输出要求
- 如果是评审，先给“发现的问题”，再给修改建议。
- 如果是重构，明确列出新边界：哪些留在页面，哪些进入 Hook，哪些进入展示组件，哪些进入工具函数。
- 如果是实现，产出代码时遵守引用规范，不要重新引入“大对象 props”或“万能 Hook”，并为新增或修改的函数、Hook 补充功能注释。
例外处理
允许合理例外，但必须说明理由。常见可接受例外：
- 纯展示组件略长，但视觉结构集中且职责稳定。
- 同文件存在少量只服务当前主组件的辅助子组件。
- 页面入口文件稍长，但业务逻辑已经拆出。
如果无法给出明确理由，默认按规范收紧边界。
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 · 190 tokens per session scan A 723cbfa005ff
react-component-hook-guidelines-cn is a skill published in the GitHub repository YangsonHung/awesome-agent-skills (18 stars, last pushed 2mo ago), licensed MIT. It adds 190 tokens to every session and 1,219 once invoked, about $0.0008 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…