html-report

html-report — Single-File HTML Report Renderer

Purpose and Scope

nullish-content:html-report is the terminal renderer of the cowork text-production pipeline. It converts the markdown reports produced by upstream skills such as nullish-bi:executive-summary, nullish-finance:financial-statements, and nullish-business:sbiz365-analyst into single-file, self-contained HTML.

The cross-referenced plugins above (nullish-bi, nullish-finance, nullish-business, etc.) are optional, external upstreams. They may not be installed in this standalone plugin — html-report works with any markdown input regardless of its source.

Core principles (Thariq philosophy):

• Zero dependency on external JS libraries (Chart.js, D3, htmx)
• Zero dependency on external CSS frameworks (Tailwind, Bootstrap)
• Charts rendered directly with inline SVG
• A single font CDN is the only permitted external exception, for Korean readability

This skill does not replace markdown output. Markdown remains the single source of truth; HTML rendering is purely an additional branch.

---

Input

Argument	Required	Default	Description
markdown	✓	—	The markdown body to convert
mode	✓	—	status | incident | plan | explainer | financial | pr
slug	—	Auto-generated from the title	Output filename prefix
output_path	—	<cwd>/reports/<slug>-<YYYYMMDD>.html	Output path
font_stack	—	Per-mode default	Font mapping override

---

Output

A single .html file (<cwd>/reports/<slug>-<YYYYMMDD>.html):

• Size: ≤ 50KB (excluding font CDN traffic, measured before body compression)
• External dependencies: 1 font CDN <link> + 2 preconnect hints (Korean fonts)
• Self-contained: opens directly in a browser, can be attached to email, works offline

---

The Six Modes

Implemented Modes (Wave 1 + Wave 2)

Mode	Structural Sections	Target Skills
status	4 metric cards · highlights · shipped table · Velocity SVG bar chart · carryover	nullish-bi:executive-summary, nullish-business:daily-briefing
incident	TL;DR dark banner · timeline · log excerpt <details> · code diff panel · impact table · action checklist	nullish-legal:compliance-check
plan	summary KPI strip · vertical milestone timeline · data-flow SVG · slice table · risk grid · success metrics	nullish-business:sbiz365-analyst
explainer	side nav · <details> collapsible steps · tabbed code blocks (vanilla JS) · FAQ accordion · callout boxes	nullish-research:*, nullish-education:*
financial	4 KPI cards · income statement table (line item / current / prior / change / change %) · Variance SVG horizontal bar chart · notes panel	nullish-finance:financial-statements
pr	TL;DR · PR meta row (file count · +/− · branch) · Before/After two-column cards · file tour <details> · review focus · test checklist · rollout stages	nullish-business:investor-relations

Per-Mode Input Slot Summary

Mode	Primary Mustache Slots
status	{{title}}, {{#metrics}}, {{#highlights}}, {{#completed_rows}}, {{#chart_bars}}
incident	{{inc_id}}, {{severity}}, {{title}}, {{#tl_entries}}, {{#impact_rows}}, {{#actions}}
plan	{{title}}, {{#kpis}}, {{#milestones}}, {{diagram_svg}}, {{#slices}}, {{#risks}}, {{#metrics}}
explainer	{{title}}, {{lead}}, {{#steps}}, {{#config_tabs}}, {{#faq_items}}
financial	{{title}}, {{period}}, {{#kpis}}, {{#statement_rows}}, {{chart_height}}, {{#variance_bars}}
pr	{{pr_ref}}, {{title}}, {{author}}, {{branch}}, {{files_changed}}, {{additions}}, {{deletions}}, {{#focus_items}}, {{#test_items}}, {{#rollout_steps}}

---

Korean Font Policy

For Korean readability, this skill permits a single font CDN <link> as its only external dependency.

Relying on system fonts alone breaks consistency because of OS-specific fallbacks (macOS: Apple SD Gothic Neo, Windows: Malgun Gothic), so the font CDN is essential.

Per-Mode Font Mapping

Mode	sans (body)	serif (headings)	mono (code)
status / financial / pr	Pretendard	Pretendard 700	JetBrains Mono
incident	Pretendard	Pretendard 700	JetBrains Mono
plan	Pretendard	Noto Serif KR	JetBrains Mono
explainer	Noto Sans KR	Noto Serif KR	JetBrains Mono
editorial	Pretendard	Chosunilbo Myungjo	JetBrains Mono
legal	KoPubWorld Batang	KoPubWorld Batang Bold	JetBrains Mono

Detailed CDN URLs and preconnect patterns: references/fonts.md

---

Design Tokens (CSS Variable Contract)

Every mode declares the same 8 CSS variables on :root.

:root {
  /* palette */
  --ivory: #FAF9F5;   /* background warm off-white */
  --paper: #FFFFFF;   /* card / panel background */
  --slate: #141413;   /* body text warm black */
  --clay:  #D97757;   /* accent / link terracotta */
  --clay-d:#B85C3E;   /* clay hover state */
  --oat:   #E3DACC;   /* secondary background / divider light tan */
  --olive: #788C5D;   /* secondary accent sage green */

  /* fonts */
  --sans:  "Pretendard", system-ui, -apple-system, sans-serif;
  --serif: "Pretendard", ui-serif, Georgia, serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* layout */
  --max-width:    860px;
  --radius-panel: 12px;
  --radius-row:   8px;
  --border:       1.5px solid var(--g300);
}

Gray scale: --g100: #F0EEE6, --g300: #D1CFC5, --g500: #87867F, --g700: #3D3D3A

Detailed contrast-verification table and print tokens: references/design-tokens.md

---

Recommended Chain Integration

[text skill] → nullish-core:ai-slop-reviewer → nullish-content:humanize-korean → nullish-content:html-report (mode=X)

Minimal chain (fast rendering):

[text skill] → nullish-content:html-report (mode=X)

---

Usage Examples

Example 1: Weekly status report

Take the markdown output from nullish-bi:executive-summary and render it as a status report.
mode=status, company: Hanul Engineering, week: 11

Example 2: Financial statement HTML report

Convert the financial-statements output into an HTML report.
mode=financial

Example 3: Incident report

Summarize the payment gateway 502 outage and turn it into an incident report HTML.
mode=incident, severity=SEV-2

Example 4: PR description document

Turn the PR #312 real-time notification channel integration into an HTML review document.
mode=pr

---

Non-Goals

• [HARD] Do not replace the default markdown output — HTML is an additional rendering branch
• [HARD] Do not introduce React / Vue / Tailwind CDN / Chart.js / D3
• [HARD] Do not introduce a build step (webpack, vite, esbuild)
• [HARD] Do not encroach on the nullish-office:pptx-designer (slides) territory
• [HARD] Do not encroach on the nullish-data:data-visualizer (standalone charts) territory
• Do not produce multi-file output — every artifact is a single .html file

---

Reference Documents

Design Documents

• references/design-tokens.md — CSS variable contract, palette, accessibility
• references/fonts.md — font mapping, CDN URLs, preconnect patterns

Templates

• references/templates/status.html.tmpl — status mode
• references/templates/incident.html.tmpl — incident mode
• references/templates/plan.html.tmpl — plan mode
• references/templates/explainer.html.tmpl — explainer mode
• references/templates/financial.html.tmpl — financial mode
• references/templates/pr.html.tmpl — pr mode

Source philosophy: Thariq Shihipar, "The Unreasonable Effectiveness of HTML"