kevin-aoun/progress-report

Phase progress report

One 1280×720 slide shipped as a standalone HTML file. Self-scaling, light theme by default, T toggles dark/light, F fullscreen. The look is locked: copy template.html from this skill's directory and edit only the content slots marked with {{...}} and the HTML comments. Never restyle — no font, color, spacing, or layout changes, no extra sections.

Step 1 — Ask, never guess

Ask the user, in one plain-text message, and wait for the answers before writing anything:

1. Done — what's completed since the last report (short title + one-line detail each)
2. In progress — what's in flight
3. Next up — what's pending / queued
4. Phase label (e.g. P1, P0.2) and project name if not obvious from context
5. Footer content: either the phase exit criterion (one sentence) or a metrics strip (e.g. per-hop latency numbers + sample size) — and overall status (default On track)
6. Report date (default: today)

Do not draft the report from repo state, chat history, or assumptions. The user's answers are the only source of items. It's fine to lightly tighten their wording to fit the copy rules below — but never add or drop an item.

Step 2 — Compile

Copy template.html → <project-dir>/<PHASE>-progress.html. Filename uses dashes (P0-1-progress.html); display text uses dots (P0.1). Fill the slots:

No em dashes anywhere. Never use — or — in any slot (headline, sub, cards, footer, speaker note). Use commas, colons, semicolons, or parentheses instead. Keep the copy tight, since long copy overflows the fixed frame (Step 3 catches this).

• <title>: <Project> · <PHASE> progress. Kicker: <Project> &middot; <PHASE> progress. Brand: {{Brand}} (your name or organization).
• Headline: ≤ 10 words, two beats — achievement stated flatly, period, then "Now …" with exactly one word/term wrapped in <span class="em">. (Examples: "Fundamentals cleared. Now integrating the pipeline." / "One repo, fully instrumented. Now RAG enters the loop.")
• Sub: 1–2 plain sentences, ≤ 2 rendered lines.
• Columns: 2–3 items each. Item h5 is 2–4 words, no period. Item p is one clause ≤ ~12 words, ends with a period, with 1–2 key terms wrapped in <span class="k">. Use HTML entities as the originals do: →, ·, ↔, ≤,   for tight number-unit pairs.
• Counts: set each column's .cnt to its item count.
• Density: if any column has 3 items, add compact to the section class — <section class="slide compact" ...>. With 2 items everywhere, leave it roomy (no class).
• Footer: keep exactly one of the two variants in the template, delete the other:
  • Option A (P0 style) — .fnote: uppercase .flab label (e.g. "P0 exit") + one sentence with key numbers/terms in <b>.
  • Option B (P0.1 style) — .lat: .flab metric label, .lchip.total first, then one .lchip per stage (.lh stage name + <b> value), then .latmeta sample-size note.
  • Status pill: .pill.ok → On track. Only if the user reports trouble, add a .pill.warn rule cloned from .pill.ok using --warn in place of --mint.
• Speaker note: fill data-note with 2–4 sentences of presenter narration — lead with the status, walk the columns left → right, close on the footer.
• Date stamp: .pg → Progress &middot; <d MMM yyyy> (e.g. Progress · 10 Jul 2026).

Two footer variants exist: a 2-items-per-column layout with an exit-criterion footer, and a 3-items-per-column layout with a metrics footer.

Step 3 — Verify the render (do not skip)

The frame is a fixed 1280×720 with overflow:hidden, so any too-long copy silently overflows or overlaps (a card can collapse onto the footer) with no error. Screenshot the slide, look at the PNG, and fix it before returning to the user.

Render to a PNG with Playwright (its chromium is cached under ~/.cache/ms-playwright):

python3 - <<'PY'
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
    b = p.chromium.launch()
    pg = b.new_page(viewport={"width": 1280, "height": 720})
    pg.goto("file://<ABS>/<PHASE>-progress.html")
    pg.wait_for_timeout(1500)   # let fonts + scale() settle
    pg.screenshot(path="/tmp/<PHASE>-progress.png")
    b.close()
PY

If playwright isn't importable, fall back to headless Chrome (equivalent result):

google-chrome-stable --headless=new --disable-gpu --no-sandbox \
  --screenshot=/tmp/<PHASE>-progress.png --window-size=1280,720 \
  --hide-scrollbars --virtual-time-budget=4000 "file://<ABS>/<PHASE>-progress.html"

Open the PNG (Read it) and check: nothing crosses the 1280×720 edges, no card overlaps the footer, the subtitle is ≤ 2 rendered lines, and each card is ≤ 2 lines. If anything spills, the copy is too long — shorten the subtitle and the longest cards (the 3-item column is the usual culprit), re-render, and repeat until the layout is clean. Only then deliver.

Step 4 — Deliver

Tell the user the file path and that opening it in a browser gives them the presentable slide (T theme, F fullscreen). Show a short text recap of the three columns so they can verify the content without opening it.

Optional — only if the user asks

• Shareable Artifact version: fill template-artifact.html (same content slots; no external fonts, .fit wrapper, no help bar or data-note), save as <PHASE>-progress-artifact.html, publish with the Artifact tool.
• PNG export (both themes): reuse the Step 3 screenshot command. It captures the default light theme; for dark, drop the light class before shooting (Playwright: pg.evaluate("document.body.classList.remove('light')"), or in Chrome load with #dark handling / toggle T). Save the light + dark PNGs next to the report.