# HTML Effectiveness Report > 子 skill — 周期性报告。当用户要写每周状态报告（status.html，KPI/已发货/速率/carryover）或事故 postmortem（postmortem.html，timeline/根因/影响/行动项）时使用。当父 skill 路由命中"周报/状态/status report/postmortem/事故/RCA"类请求时加载。 - Skill: `azhi-ss/html-effectiveness-report` (Agent Skill) - Install (CLI): `npx skillmds@latest add azhi-ss/html-effectiveness-report` - Raw SKILL.md: https://api.skillmd.com/api/skills/azhi-ss/html-effectiveness-report/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: azhi-ss (https://skillmd.com/u/azhi-ss) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/azhi-ss/html-effectiveness-report --- # 08-report — 周期性报告 > "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 总结" | 同上 | 同上 | --- ## 范式 8.1 · 状态周报 **空间形状**：5 段，按"扫一眼 → 细看 → 跟进"顺序 1. **4 大数字 KPI** — 顶部一行卡片，3 秒能看完 2. **Highlights** — 3 个 bullet（高亮事件，不是流水账） 3. **Shipped** — 表格 (PR / Title / Author / Risk) 4. **Velocity** — 7 天柱状图（小图，不喧宾夺主） 5. **Carryover** — 三段 in-review / blocked / slipped，用 border-left 颜色区分 **关键 CSS**： ```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）： ```html
Mon
Tue
``` ```css .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`](../../templates/status.html) --- ## 范式 8.2 · 事故报告（postmortem） **空间形状**：5 段 1. **TL;DR** — 一段话：发生了什么、影响多大、怎么 mitigate 的 2. **Timeline** — 分钟级时间戳（用 `
    ` + `