メニュー
Markdown を共通テーマの HTML（画面ダーク / 印刷は A4 ライトテーマ）に変換する。「HTML 化して」「HTML 版を作って」「PDF にしたい」で起動。調査/設計/レポート md の配布・印刷用途に。素早く出すなら scripts/render-html.sh、リッチな card/box レイアウトが要るときは LLM 整形。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | md-to-html |
| description | Markdown を共通テーマの HTML（画面ダーク / 印刷は A4 ライトテーマ）に変換する。「HTML 化して」「HTML 版を作って」「PDF にしたい」で起動。調査/設計/レポート md の配布・印刷用途に。素早く出すなら scripts/render-html.sh、リッチな card/box レイアウトが要るときは LLM 整形。 |
| user_invocable | true |
| argument_hint | <markdown-file-path> [--rich] [--sync] |
| origin | ai-research-pipeline/.claude/skills/md-to-html (PR |
md→HTML→slide パイプラインの Stage 2。md (正) を共通テーマの HTML (派生) に変換する。 画面表示はダークテーマ、印刷 (PDF 化) 時は A4 ライトテーマに自動で切り替わる。
前段の readable-md (Stage 1) で構造を整えた md を入力に想定する （H1 単一・見出し非スキップ・frontmatter 付き）。
*.md (正) → 変換 → *.html (派生)
↓ 修正 ↓ 再生成
*.md (更新) → 変換 → *.html (更新)
.html。CSS/デザイントークンは assets/report-theme-head.html に集約。
HTML 生成時はこの <style> ブロックを 逐語コピーして <head> に挿入する。
SKILL.md 本文や生成 HTML に独自 CSS を散らさない（ドリフト防止）。テーマ変更は asset 側だけ編集。
| パス | 使う場面 | 手段 |
|---|---|---|
| 決定論パス (既定) | CI 自動生成・素早く出す・素の md 構造で十分 | scripts/render-html.sh（markdown-it + theme） |
リッチパス (--rich) | card-grid / 強調ボックス / フロー図で魅せたい | LLM が md を解析し bespoke HTML を生成 |
./scripts/render-html.sh <input.md> # 同名 .html を出力
./scripts/render-html.sh <input.md> -o out.html # 出力先指定
frontmatter を除去し title を <title> に流用、本文を markdown-it で HTML 化して theme を
注入する。生 HTML はエスケープされる（コードブロック内 <script> 等が表示を壊さない）。
LLM 不要なので CI に置ける（§F-3）。
--rich) — LLM が整形MD の構造を解析し、HTML コンポーネントへマッピングする:
| MD 要素 | HTML コンポーネント |
|---|---|
# タイトル | <h1> + .subtitle |
## セクション | <h2> + セクション区切り |
### サブセクション | <h3> |
> 引用 / > **注意:** | .highlight-box / .warn-box / .risk-box / .ok-box（内容で判別） |
| テーブル | <table>（必要なら .card 内） |
| 箇条書き | <ul> / <ol> |
--- (区切り線) | .divider |
| frontmatter / 冒頭メタ | .subtitle に統合（YAML は表示しない） |
| コードブロック（フロー図） | .vflow フロー図 or <pre> |
HTML エスケープ必須: MD 本文の < > & は < > & に。
標準コンポーネント: .card / .card-grid / .card-sm / .tag-* / .highlight-box /
.warn-box / .risk-box / .ok-box / .vflow / .note / .divider。
判断が要る場合（表をカードグリッドにするか等）はユーザーに確認する。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{タイトル}}</title>
<!-- assets/report-theme-head.html の <style> をここに逐語挿入 -->
</head>
<body>
<div class="container">
<h1>{{タイトル}}</h1>
<p class="subtitle">{{サブタイトル・メタ情報}}</p>
<!-- セクション群 -->
<div class="note">{{フッターノート}}</div>
</div>
</body>
</html>
--sync の挙動既存 HTML があるとき:
--sync なし: 既存 HTML を読み、MD との差分箇所のみ更新。--sync あり: 差分検出せず MD から全面再生成（手で壊れた HTML をリセットしたいとき）。<style> の同一性: asset の <style> がそのまま入っているか（改変していないか）。style="..." を使わない（印刷時に上書きできず壊れる）。CSS クラスを使う。ブラウザで HTML を開き Cmd+P / Ctrl+P →「PDF として保存」。A4 1 ページに収まるか・
カードの途中改ページがないかをプレビューで確認。
# chromium (印刷 CSS @media print を最も忠実に再現・JS 実行で Mermaid/KaTeX 可)
chromium --headless --no-sandbox --print-to-pdf=out.pdf --no-pdf-header-footer report.html
# weasyprint (Python・Paged Media 強い・JS 不要)
weasyprint report.html out.pdf
いずれも未インストールなら無理に apt install せず、その旨を報告して GUI 印刷を促す。
日本語は fonts-noto-cjk（Noto Sans CJK JP）が必要。font-family は
Hiragino → Noto Sans JP → Noto Sans CJK JP の順で fallback。
style="..." は印刷で壊れる。CSS クラスを使う。assets/report-theme-head.html のみが正。ai-research-pipeline の md-to-html スキル (PR #506) を移植・汎用化。
リポ固有のパス前提を外し、決定論パス (render-html.sh) を追加した。調査/レポート md を発表スライド (Marp) に昇華する。report.md を要約・分割して slides.md を作り、HTML/PDF/PPTX に書き出す。「スライドにして」「発表資料を作って」「Marp で」で起動。文書とスライドは編集距離があるため別ファイル (slides.md) として作る。
Markdown を「人が読みやすく、かつ機械が HTML/スライドへ変換しやすい」構造に執筆・整形する。新規に調査/設計 md を書くときや、既存 md を昇華 (md→HTML→slide) の前に整えるときに使う。「読みやすい md にして」「昇華しやすく整形して」「調査 md を書いて」で起動。
生成した HTML / スライドが「見た目 human friendly」か、ノンデザイナーズ・デザインブックの C.R.A.P. (Contrast/Repetition/Alignment/Proximity) + タイポグラフィで品質レビューする。「デザインを見て」「読みやすい見た目か」「レイアウトをレビュー」で起動。機械監査 (design-audit.sh) を先に走らせ、静的に測れない整列・近接・視覚的印象を補う。
[2] design を実装単位に分解し、複数の [3] impl issue を起票する ([2]→[3] のブレイクダウン)。[2] を review + needs-human に遷移する。
[1] request を入力に [2] design issue を起票する ([1]→[2] のブレイクダウン)。元の [1] は close する。
status:ready の issue を claim する。遷移直前に ready を再確認してから in-progress へ atomic 遷移し、二重取得のレース窓を最小化する。issue を処理開始する直前に必ず使う。