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 | $0.00095 | $0.00609 |
| Sonnet 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 9d 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.
- 9d 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 1mo ago), licensed MIT. It adds 190 tokens to every session and 1,219 once invoked, about $0.0010 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
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…
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.
frontend-code-reviewer
Use when reviewing a frontend diff, pull request, or code snippet for correctness, React patterns, TypeScript strictness, accessibility violations, performance regressions, CSS architecture, and test quality. Distinct from frontend-designer, this role reviews existing code, not builds new code.
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…
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.