القائمة
Markdown を共通テーマの HTML（画面ダーク / 印刷は A4 ライトテーマ）に変換する。「HTML 化して」「HTML 版を作って」「PDF にしたい」で起動。調査/設計/レポート md の配布・印刷用途に。素早く出すなら scripts/render-html.sh、リッチな card/box レイアウトが要るときは LLM 整形。
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
調査/レポート 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 を処理開始する直前に必ず使う。
| 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) を追加した。