菜单
子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
让 agent 用单文件 HTML 替代 markdown 输出空间性、并行性、可比较或可交互的内容。当用户请求"对比/计划/评审/报告/解释器/幻灯片/编辑器/可视化"或当输出含并排选项、流程图、时间线、代码 diff、可交互元素、需要"指着某处说就是它"的场景时使用。本 skill 是路由器：先用决策框架判断是否走 HTML，再按 9 大类调度对应的子 skill（01-explore / 02-review / 03-design / 04-proto / 05-diagram / 06-slides / 07-research / 08-report / 09-editor），并复用 ../templates/*.html 与 shared/base.css 输出真实可运行的产物。
子 skill — 设计系统与组件展示。当用户要从 repo 提取 design tokens 做团队 reference、或要把一个组件的所有 variant 平铺在一张 contact sheet 上 review 时使用。包含设计系统参考（design-tokens.html）和组件变体陈列两种范式。当父 skill 路由命中"设计系统/design tokens/组件变体/展示组件库"类请求时加载。
子 skill — 原型与可点击流。当用户要决定一个 transition 的 duration/easing（动画沙盒，animation.html）或要"走一遍"4-6 屏交互流验证手感时使用。包含动画沙盒和可点击流两种范式。当父 skill 路由命中"动画/原型/手感/clickable flow"类请求时加载。
子 skill — 插画与图表。当用户要博客/文档配图（SVG 插图集）、流程图、状态机、deploy pipeline（flowchart.html）时使用。所有图都用内联 SVG，不引外部库（mermaid/d3/excalidraw）。当父 skill 路由命中"图/diagram/flowchart/state machine/pipeline 可视化"类请求时加载。
子 skill — 探索与规划。用户在多种实现方案/设计风格之间未决，或方案选定后要写工程版 RFC 时使用。包含三方案对比（compare.html）、视觉设计方向、实现计划（plan.html）三种范式。当父 skill html-effectiveness 路由命中"对比/选型/RFC/计划"类请求时加载。
子 skill — 键盘控制幻灯片。当用户要"上去就能讲"的会议幻灯片、不想用 Keynote/PPT/Google Slides、希望单 HTML 文件左右键翻页时使用。当父 skill 路由命中"幻灯片/slide deck/做几张 slides/讲几页"类请求时加载。
| name | html-effectiveness-review |
| description | 子 skill — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。 |
"Diffs and call-graphs are spatial information; markdown flattens them. Let the agent render the change as an annotated diff, draw the module as boxes and arrows, or write the PR description your reviewers actually want."
| 用户说 | 用哪个范式 | 模板 |
|---|---|---|
| "review this PR / 评审一下 #312" | PR 评审 (reviewer 视角) | ../../templates/diff.html |
| "帮我写 PR 描述 / write a PR writeup" | PR 写作 (author 视角) | ../../templates/pr.html |
| "X 在这个 repo 怎么工作 / 调用栈是什么" | 模块图 | 自建（见下） |
| "解释一下 auth flow / sync 是怎么转的" | 模块图 | 同上 |
空间形状：
风险标签 3 档（不要再细分，用户记不住）：
safe — 纯加法 / 类型扩展 / 测试 → 绿色worth a look — 行为微变 / 重构 → 黄色needs attention — 关键路径 / 新抽象 / 易错点 → 红色HTML 骨架：
<header class="pr-summary">
<h1>PR #247 — Review Summary</h1>
<p>[一句话: what this PR does]</p>
</header>
<section class="risk-map">
<h2>Risk map</h2>
<svg viewBox="0 0 600 120">
<g><circle cx="60" cy="60" r="14" class="needs-attn" />
<text x="60" y="95" text-anchor="middle">useOptimisticTasks.ts</text></g>
<g><circle cx="160" cy="60" r="20" class="worth" />
<text x="160" y="95" text-anchor="middle">TaskList.tsx</text></g>
<!-- ... 圆点大小 = LOC log；位置随便排但保持视觉密度 -->
</svg>
</section>
<section class="files">
<details open>
<summary>
<code>src/hooks/useOptimisticTasks.ts</code>
<span class="badge danger">needs attention</span>
<span class="muted">+58 −0</span>
</summary>
<pre class="diff"><div class="line added"><span class="ln">12</span><span>+ ...</span></div></pre>
</details>
</section>
关键 CSS（diff 行号）：
.diff { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; }
.diff .line { display: grid; grid-template-columns: 56px 1fr; gap: 0; }
.diff .ln { color: var(--gray-500); padding: 0 12px; text-align: right;
background: var(--gray-100); user-select: none; }
.diff .added { background: rgba(120, 140, 93, 0.12); }
.diff .removed { background: rgba(176, 74, 74, 0.10); }
shared/base.css 已含上述类，直接使用。
直接可用模板：../../templates/diff.html
空间形状：6 段，按 reviewer 阅读顺序排：
关键 CSS（rollout 阶梯）：
ol.ramp { list-style: none; padding: 0; display: grid;
grid-template-columns: repeat(3, 1fr); gap: 12px; }
ol.ramp li { padding: 16px 18px; background: var(--white);
border: 1px solid var(--gray-300); border-radius: 10px;
display: flex; flex-direction: column; gap: 4px; }
ol.ramp .pct { font-size: 22px; font-weight: 500; color: var(--clay); }
直接可用模板：../../templates/pr.html
空间形状：
<details> 折叠源码关键 CSS：
.callstack li { display: grid; grid-template-columns: 32px 1fr; gap: 16px;
margin-bottom: 24px; list-style: none; }
.callstack .num { width: 32px; height: 32px; border-radius: 50%;
background: var(--clay); color: white; display: grid;
place-items: center; font-weight: 600;
font-family: var(--font-mono); }
.callstack .file { font-family: var(--font-mono); font-size: 13px;
color: var(--gray-700); }
.callstack details summary { cursor: pointer; padding: 6px 0;
color: var(--info); font-size: 13px; }
无独立模板（按需生成，结构清晰，可由 plan.html 的 step 部分启发）。