doc-html-report

doc-html-report: single-file HTML report renderer

Purpose and Scope

moai-officer:doc-html-reportis the terminal rendererof the cowork text output pipeline. moai-coworker:collab-exec-summary, moai-accountant:finance-financial-statements, moai-consultant:consult-sbiz365 Converts Markdown reports generated by etc. into single-file, self-contained HTML.

Core Principles:

Zero dependency on external JS libraries (Chart.js, D3, htmx)
Zero dependency on external CSS frameworks (Tailwind, Bootstrap)
Render charts directly with inline SVG
Allow a single exception for a font CDN for Korean readability

This skill does not replace Markdown output. Markdown remains the single source of truth, and HTML rendering operates only as an additional branch.

Input

Argument	Required	Default	Description
`markdown`	✓	—	Markdown body to convert
`mode`	✓	—	`status` \| `incident` \| `plan` \| `explainer` \| `financial` \| `pr`
`design_system`	—	(zero-dependency default template when unspecified)	`claude` \| `clickhouse` \| `clay` or `design-system-library`75 systems of. When specified Apply the corresponding brand tokens with Tailwind Play CDN + shadcn vanilla components (internet connection required)
`slug`	—	Auto-generated from the title	Output filename prefix
`output_path`	—	`<cwd>/reports/<slug>-<YYYYMMDD>.html`	Output path
`font_stack`	—	Mode-specific default	Font mapping override

Output

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

Size: ≤ 50KB (excluding font CDN traffic, before body compression)
External dependencies: font CDN <link> 1건 + preconnect 2 items (Korean fonts)
Self-contained: can be opened directly in the browser, attached to email, or used offline

6 Modes

Implemented Modes

Mode	Structure Sections	Target Skill
`status`	4 metric cards · Highlights · Completed table · Velocity SVG bar chart · Carryover	`moai-coworker:collab-exec-summary`, `moai-officer:productivity-briefing`
`incident`	TL;DR dark banner · Timeline · Log excerpt `<details>` · Code diff panel · Impact table · Action checklist	`moai-lawyer:legal-compliance-check`
`plan`	Summary KPI strip · Vertical milestone timeline · Data flow SVG · Slice table · Risk grid · Success metrics	`moai-consultant:consult-sbiz365`
`explainer`	Side nav · `<details>` Collapsible steps · Tab code blocks (vanilla JS) · FAQ accordion · Callout boxes	`moai-coworker:`, `moai-coworker:`
`financial`	4 KPI cards · Income statement table (item/current period/prior period/change/change rate) · Variance SVG horizontal bar chart · Commentary panel	`moai-accountant:finance-financial-statements`
`pr`	TL;DR · PR meta row (file count · +/− · branch) · Before/After two-column card · File tour `<details>` · Key Points · Test Checklist · Rollout Steps	`moai-accountant:finance-investor-relations`

Summary of Input Items by Mode

These are the main items each template fills in (based on variable names inside the template).

Mode	Main Input Items
`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 uses a single font CDN <link>as the only external dependencyis allowed.

If only system fonts are used, consistency breaks due to OS-specific fallbacks (macOS: Apple SD Gothic Neo, Windows: Malgun Gothic), so a font CDN is required.

Font Mapping by Mode

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	Chosun Ilbo Myeongjo	JetBrains Mono
`legal`	KoPubWorld Batang	KoPubWorld Batang Bold	JetBrains Mono

Detailed CDN URL and preconnect pattern: references/fonts.md

Design Tokens (CSS Variable Contract)

All modes use :rootdeclare the same 8 CSS variables in .

:root {
  /* 팔레트 */
  --ivory: #FAF9F5;   /* 배경 warm off-white */
  --paper: #FFFFFF;   /* 카드·패널 배경 */
  --slate: #141413;   /* 본문 텍스트 warm black */
  --clay:  #D97757;   /* 강조·링크 terracotta */
  --clay-d:#B85C3E;   /* clay hover 상태 */
  --oat:   #E3DACC;   /* 보조 배경·구분선 light tan */
  --olive: #788C5D;   /* 보조 강조 sage green */

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

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

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

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

Applying the Design System (`design_system` parameter)

design_system If you specify the input, moai-officer:doc-design-libraryloads brand tokens from and Tailwind Play CDN + shadcn vanilla componentsrenders with .

Two Rendering Engines (backward compatibility maintained):

`design_system`	Engine	External Dependency	Output Characteristics
Unspecified	0 dependency (existing template)	Only 1 font CDN	Single file usable for email attachments, offline, and printing
`claude` / `clickhouse` / `clay` / 75개	Tailwind Play CDN	Tailwind CDN + font CDN	Applies brand mood, requires internet connection

Auto-recommends 3 default themes

Mode	Recommended design_system
`status` / `plan` / `pr`	`claude` (warm editorial)
`incident` / Technical Report	`clickhouse` (Dark Engineering)
`explainer` / Marketing	`clay` (playful saturated)
`financial`	`claude` (Editorial · Trust)

Application Procedure

design_system Load tokens with the value, systems/<name>.md token loading
mapping/tailwind.md Create with the rules, tailwind.config object generation
Replace structure with shadcn vanilla components (card/button/table/badge)
Output as a single-file HTML (CDN script + config + markup)

Caution: design_system Outputs with specified load the Tailwind Play CDN at runtime, so styles will not apply offline. For offline, printing, or email attachment purposes, design_systemleave unspecified (0-dependency template).

Recommended Chain Integration

[텍스트 스킬] → moai-coworker:ai-slop-reviewer → moai-writer:korean-humanize → moai-officer:doc-html-report (서식 선택)

Minimal chain (fast rendering):

[텍스트 스킬] → moai-officer:doc-html-report (서식 선택)

Brand design system application chain:

[텍스트 스킬] → ai-slop-reviewer → doc-html-report (design_system: clickhouse)

design_system When specified, moai-officer:doc-design-libraryautomatically loads tokens from — no separate preceding skill call needed.

Usage Examples

Example 1: Weekly Status Report

경영 요약 결과를 받아서 한울 엔지니어링 11주차 현황 보고서 HTML로 만들어줘.

Example 2: Financial Statement HTML Report

재무제표 결과를 HTML 보고서로 변환해줘.

Example 3: Incident Report

결제 게이트웨이 502 장애 내용을 정리해서 인시던트 리포트 HTML로 만들어줘. 심각도는 SEV-2.

Example 4: PR Description Document

PR #312 실시간 알림 채널 통합 내용을 HTML 리뷰 문서로 만들어줘.

Visual quality gate (required)

[HARD] When rendering is done, open the output HTML in a browser, measure the following 4 axes, and report PASS/FAIL.

Common 4 axes — judged by DOM measurement after rendering. Do not substitute a visual skim.

축	Measurement	Criteria	Grade
Body text size	Body text node computed `font-size`	≥16px (screen-reading basis). Supporting text and captions ≥14px	hard
Contrast ratio	WCAG contrast ratio based on relative luminance	Body text ≥4.5:1 · Large text ≥3:1	hard
Text overflow	`scrollHeight > clientHeight`	0건	hard
Elements outside the output	Rendered text nodes outside the body container	0 — such as page count, resolution, and fonts used Production metadata is not printed on screen(as HTML comments)	hard

When using icons — icons look like empty slots in the layout, so unless evidence is required, a few handy ones get reused.

The wording's verbchoose from (write → memo, stop → stop). Match the action the slot calls for, not the noun.
Do not use the same icon more than 3 times.
in one document. If nothing fits, leave it empty. An empty slot is better than a wrong icon.
[HARD] If an icon was used, include it in the PASS/FAIL evidence table. Report the slot wording, icon, and reason for choosing it side by side. Tautologies like "because an icon was needed" are not evidence, and if the reason cannot be written in one line, leave it empty.

These 4 axes are doc-html-slide/references/deck-quality-rubric.mdfrom the hard-fail of only those corresponding to document type (continuous scroll) carried over. The pt lower bound (24pt) for projector projection is not applied to document type and is replaced by the screen-reading basis (16px).

What not to do

Does not replace the default Markdown output — HTML is an additional rendering branch.
Do not use external libraries such as React / Vue / Tailwind CDN / Chart.js / D3.
Do not introduce a build step (webpack, vite, esbuild).
Slides are handled by moai-officer:doc-pptx, and standalone charts by moai-analyst:data-visualizer.
Do not split into multiple files — all output is a single .html file.

Reference documents

Design documents

references/design-tokens.md — CSS variable contract, palette, accessibility
references/fonts.md — font mapping, CDN URL, preconnect pattern

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

Sample output

references/samples/status-sample.html — status mode rendering example
references/samples/incident-sample.html — incident mode rendering example
references/samples/plan-sample.html — plan mode rendering example
references/samples/explainer-sample.html — explainer mode rendering example
references/samples/financial-sample.html — financial mode rendering example
references/samples/pr-sample.html — pr mode rendering example

Design note: Thariq Shihipar, "The Unreasonable Effectiveness of HTML" — source of the approach of finishing with a single HTML file without external libraries.

P1 consumer integration

This is the integration test result of rendering the markdown output of the four P1 consumer skills with the doc-html-report template.

Consumer skill	Compatible mode	Input file	Rendering output	Compatibility
`moai-coworker:collab-exec-summary`	`status`	`references/integration-tests/executive-summary-input.md`	`references/integration-tests/executive-summary-rendered.html`	★★★★☆ (4/5)
`moai-accountant:finance-financial-statements`	`financial`	`references/integration-tests/financial-statements-input.md`	`references/integration-tests/financial-statements-rendered.html`	★★★★☆ (4/5)
`moai-consultant:consult-sbiz365`	`plan`	`references/integration-tests/sbiz365-analyst-input.md`	`references/integration-tests/sbiz365-analyst-rendered.html`	★★★★☆ (4/5)
`moai-officer:productivity-briefing`	`status` (daily variant)	`references/integration-tests/daily-briefing-input.md`	`references/integration-tests/daily-briefing-rendered.html`	★★★★☆ (4/5)

Detailed compatibility analysis: references/integration-tests/COMPATIBILITY.md