html-effectiveness-report

08-report — Periodic reports

"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."

When to use

The user says	Which paradigm to use	Template
"Write an engineering status for this week"	Weekly status report	`../../templates/status.html`
"Fill in the weekly report template"	Same as above	Same as above
"The postmortem for yesterday's incident"	Incident report	`../../templates/postmortem.html`
"RCA / SEV-2 summary"	Same as above	Same as above

Paradigm 8.1 · Weekly status report

Spatial shape: 5 sections, in the order "glance → look closely → follow up"

4 big-number KPIs — a top row of cards, readable in 3 seconds
Highlights — 3 bullets (highlight events, not a running log)
Shipped — table (PR / Title / Author / Risk)
Velocity — 7-day bar chart (small chart, does not steal the spotlight)
Carryover — three sections in-review / blocked / slipped, distinguished by border-left color

Key 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 bar chart technique(no Chart.js needed):

<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; }

See ../shared/components.html Section 3 "KPI tiles" and Section 4 "Carryover items".

Ready-to-use template：../../templates/status.html

Paradigm 8.2 · Incident report (postmortem)

Spatial shape: 5 sections

TL;DR — one paragraph: what happened, how big the impact was, how it was mitigated
Timeline — minute-level timestamps (use <ol class="timeline"> + <time>）
Root cause — prose + config diff highlights (if any)
Impact — table (failed requests / peak error rate / affected users / data loss / SLA)
Action items — table (Owner / Description / Due date)

Key CSS(timeline):

.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 already includes .timeline, use it directly.

Action items table：

<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>

Ready-to-use template：../../templates/postmortem.html

Shared principles

Numbers must be specific— not "latency improved", but "p99 1.4s → 180ms"
Timestamps must be minute-level——14:02 / 14:06 / 14:31 is 100 times stronger than "around 2pm"
Action items must have an owner and due date— an action without an owner is as good as nonexistent
The three carryover sections must be distinguished by color— in-review/blocked/slipped are different emotions
Do not put charts in KPI cards— KPIs are numbers, charts are charts, keep them separate

About this skill

When to use

Paradigm 8.1 · Weekly status report

Paradigm 8.2 · Incident report (postmortem)

Shared principles