메뉴
子 skill — 周期性报告。当用户要写每周状态报告（status.html，KPI/已发货/速率/carryover）或事故 postmortem（postmortem.html，timeline/根因/影响/行动项）时使用。当父 skill 路由命中"周报/状态/status report/postmortem/事故/RCA"类请求时加载。
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 — 代码评审与理解。当用户要 PR 评审、PR 写作（作者侧）、或要理解陌生代码模块的请求路径/调用栈时使用。包含 PR 评审（diff.html）、PR 写作（pr.html）、模块图三种范式。当父 skill 路由命中"评审/PR/审阅/这段代码怎么工作"类请求时加载。
| name | html-effectiveness-report |
| description | 子 skill — 周期性报告。当用户要写每周状态报告（status.html，KPI/已发货/速率/carryover）或事故 postmortem（postmortem.html，timeline/根因/影响/行动项）时使用。当父 skill 路由命中"周报/状态/status report/postmortem/事故/RCA"类请求时加载。 |
"Recurring documents — status updates, post-mortems — benefit most from a bit of structure and color. A small chart and a colored timeline turn something people skim into something they actually read."
| 用户说 | 用哪个范式 | 模板 |
|---|---|---|
| "写一份这周的 engineering status" | 状态周报 | ../../templates/status.html |
| "周报模板填一下" | 同上 | 同上 |
| "昨天那个 incident 的 postmortem" | 事故报告 | ../../templates/postmortem.html |
| "RCA / SEV-2 总结" | 同上 | 同上 |
空间形状：5 段，按"扫一眼 → 细看 → 跟进"顺序
关键 CSS：
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kpi { padding: 20px; border-radius: 12px; background: var(--white);
border: 1px solid var(--gray-300); }
.kpi .num { font-size: 36px; font-weight: 500; line-height: 1; }
.kpi .label { color: var(--gray-700); font-size: 13px; margin-top: 6px; }
.kpi .delta.up { color: var(--success); }
.kpi .delta.down { color: var(--danger); }
.carryover .item { border-left: 3px solid; padding: 12px 16px;
background: var(--white); border-radius: 8px; }
.carryover .in-review { border-left-color: var(--info); }
.carryover .blocked { border-left-color: var(--warning); }
.carryover .slipped { border-left-color: var(--gray-500); }
Velocity 柱状图技巧（不需要 Chart.js）：
<div class="chart">
<div class="bar"><div class="col" style="height:0%" data-v="0"></div><small>Mon</small></div>
<div class="bar"><div class="col" style="height:25%" data-v="1"></div><small>Tue</small></div>
<!-- ... -->
</div>
.chart { display: flex; align-items: flex-end; gap: 12px; height: 140px; }
.bar { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.bar .col { width: 100%; max-width: 56px; background: var(--clay);
border-radius: 4px 4px 0 0; position: relative; }
.bar .col::before { content: attr(data-v); position: absolute;
top: -22px; left: 50%; transform: translateX(-50%);
font-size: 12px; }
参见 ../shared/components.html 第 3 节"KPI tiles"和第 4 节"Carryover items"。
直接可用模板：../../templates/status.html
空间形状：5 段
<ol class="timeline"> + <time>）关键 CSS（时间线）：
.timeline { list-style: none; padding-left: 16px;
border-left: 2px solid var(--gray-300); }
.timeline li { position: relative; padding: 8px 0 8px 24px; }
.timeline li::before { content: ''; position: absolute; left: -25px; top: 14px;
width: 12px; height: 12px; border-radius: 50%;
background: var(--clay); }
.timeline time { font-family: var(--font-mono); font-size: 13px;
color: var(--gray-700); display: inline-block; width: 60px; }
shared/base.css 已含 .timeline，直接使用。
Action items 表格：
<table class="actions">
<thead><tr><th>Owner</th><th>Action</th><th>Due</th></tr></thead>
<tbody>
<tr><td>DP</td><td>Revert cfg-9a12 and restore pool limit to 64</td><td>Apr 12</td></tr>
<tr><td>MO</td><td>Add config-linter range check for max_connections</td><td>Apr 18</td></tr>
<tr><td>SR</td><td>Surface "recent config rollouts" alongside deploys</td><td>Apr 25</td></tr>
</tbody>
</table>
直接可用模板：../../templates/postmortem.html
14:02 / 14:06 / 14:31 比 "around 2pm" 强 100 倍