html-report

html-report — single-file HTML report renderer

Purpose and scope

moai-content:html-reportis the cowork text output pipeline's terminal renderer. moai-bi:executive-summary, moai-finance:financial-statements, moai-business:sbiz365-analyst Converts Markdown reports generated by 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 is kept as 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`	—	(if unspecified, zero-dependency default template)	`claude` \| `clickhouse` \| `clay` or `design-system-library`'s 75 systems. 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`	—	Default per mode	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, and used offline

6 modes

Implemented modes

Mode	Structure sections	Target skill
`status`	4 metric cards · highlights · completed table · Velocity SVG bar chart · Carryover	`moai-bi:executive-summary`, `moai-business:daily-briefing`
`incident`	TL;DR dark banner · timeline · log excerpt `<details>` · code diff panel · impact table · action checklist	`moai-legal:compliance-check`
`plan`	Summary KPI strip · milestone vertical timeline · data flow SVG · slice table · risk grid · success metrics	`moai-business:sbiz365-analyst`
`explainer`	Side nav · `<details>` collapsible steps · tabbed code blocks (vanilla JS) · FAQ accordion · callout box	`moai-research:`, `moai-education:`
`financial`	4 KPI cards · income statement table (item/current period/prior period/change/change rate) · Variance SVG horizontal bar chart · commentary panel	`moai-finance:financial-statements`
`pr`	TL;DR · PR meta row (file count·+/−·branch) · Before/After two-column cards · file tour `<details>` · Key Points · Test Checklist · Rollout Steps	`moai-business: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

This skill, for Korean readability, 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 essential.

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 declare :rootthe 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 verification table and print tokens: references/design-tokens.md

Applying the Design System (`design_system` parameter)

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

Two Rendering Engines (maintaining backward compatibility):

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

Automatically 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 · trustworthy)

Application Procedure

design_system With the value, systems/<name>.md load tokens
mapping/tailwind.md With the rule, tailwind.config create object
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 Tailwind Play CDN at runtime, so styles will not be applied offline. If the purpose is offline, printing, or email attachment, design_systemleave unspecified (0-dependency template).

Recommended Chain Integration

[텍스트 스킬] → moai-core:ai-slop-reviewer → moai-content:humanize-korean → moai-content:html-report (서식 선택)

Minimal chain (fast rendering):

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

Brand design system application chain:

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

design_system When specified, moai-design:design-system-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 리뷰 문서로 만들어줘.

What it does not do

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

Reference documentation

Design documentation

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 reference: Thariq Shihipar, "The Unreasonable Effectiveness of HTML" — source of the approach of finishing with a single HTML file without external libraries.

P1 consumer integration

These are the integration test results of rendering the Markdown output of the four P1 consumer skills with the html-report template.

Consumer skill	Suitable mode	Input file	Rendered output	Compatibility
`moai-bi:executive-summary`	`status`	`references/integration-tests/executive-summary-input.md`	`references/integration-tests/executive-summary-rendered.html`	★★★★☆ (4/5)
`moai-finance:financial-statements`	`financial`	`references/integration-tests/financial-statements-input.md`	`references/integration-tests/financial-statements-rendered.html`	★★★★☆ (4/5)
`moai-business:sbiz365-analyst`	`plan`	`references/integration-tests/sbiz365-analyst-input.md`	`references/integration-tests/sbiz365-analyst-rendered.html`	★★★★☆ (4/5)
`moai-business:daily-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