md-to-html

スキル：md-to-html

概要

目的とコンテキスト

• 目的： Markdown → 自己完結型 HTML：Mermaid ダイアグラム、Chart.js、スタイル付きテーブル、コードハイライト、フローティング目次。
• 使用するタイミング：
  • .md を HTML としてレンダリング／共有する
  • ドキュメントに可視化すべき手順、比較、数値がある
  • ブラウザーですぐに使える、プロフェッショナルな出力が必要
  • トリガーフレーズ：/md-to-html、md2html、md を html に変換、md をレンダリング、md から html を出力、ドキュメントを可視化
• 対象外： ソース .md ファイルの内容は変更しません。ソース .md ファイルと同じ場所に HTML を書き込みません。独自デザインの複数ページのドキュメントサイトではありません（それは docs-site-macos です）。

メンタルモデル

file .md → (template đầy đủ ngoài) → HTML standalone (Mermaid · Chart.js · bảng · code highlight · TOC) + output requirements bắt buộc → html/<tên>.html → output report draft.

入力と出力の契約

	フィールド	必須？	意味
入力	ソース file .md	はい	レンダリングする内容
入力	完全な指示 ~/.gemini/antigravity/skills/md-to-html/SKILL.md	いいえ	詳細な外部テンプレート。以下の出力要件はテンプレートに関係なく適用されます
出力	HTML → html/ dir（例：html/tên-file.html）	はい	ソース .md と同じディレクトリには置きません。自己完結型です
出力	出力レポート llmwiki/wiki/sources/draft/DDMMYY-<ten>.md ＋インデックス＋ログ	はい（成果物が 0 件の場合を除く）	Delivery の項目を参照

ルールと機能

• RULE-01（必須）：出力 HTML は html/ dir に置きます。ソース .md と同じディレクトリには置きません。
• RULE-02（必須）：出力要件（壊れたページを納品しないこと）— 生成する HTML には、外部テンプレートに関係なく、以下の「出力要件」のすべてを含める必要があります。
• 機能：Markdown ファイルの読み込み、静的 HTML ファイルと wiki の下書きの書き込み。レンダリングライブラリ（Mermaid、Chart.js）はページ内に埋め込みます。

失敗時の対応

• ソース .md ファイルが見つからない → ブロック。パスを尋ねます。
• 外部テンプレート（~/.gemini/...）がない → ここに記載された目的と出力要件に基づいてレンダリングを続けます（エラーとはみなしません）。
• ページに出力要件の項目が 1 つでも欠けている → 失敗。納品前に修正します（「壊れたページを納品しないこと」）。

手順

メインワークフロー

ステップ	種類	入力	アクション	出力／終了	失敗時／次の処理
W01	決定的	.md のパス	ソースファイルを読み込みます（存在する場合は外部の完全な指示も読み込みます）	内容	ファイルがない場合 → ブロック
W02	判断	内容	可視化方法を選択します：手順／比較 → Mermaid、数値 → Chart.js、スタイル付きテーブル、コードハイライト、フローティング目次	HTML の構築	—
W03	決定的	HTML	出力要件（以下の一覧）をすべて満たしているか確認します	チェックリスト完了	不足があれば修正し、W03 を繰り返す
W04	副作用	HTML	html/<tên-file>.html に書き込みます	HTML ファイル	—
W05	副作用	結果	出力レポートの下書きを作成します（Delivery の項目を参照）	下書き＋インデックス＋ログ	成果物が 0 件の場合 → スキップ

各ステップの詳細（W01〜W05 の信頼できる情報源）：

出力

HTML → html/ dir（例：html/tên-file.html）。ソース .md と同じディレクトリには置きません。

出力要件（壊れたページを納品しないこと）

外部テンプレートに関係なく、生成する HTML には次の内容を含める必要があります。

• <meta charset="utf-8"> と <meta name="viewport" content="width=device-width, initial-scale=1">、および実際の <title>。viewport がないと、目次やテーブルがモバイルで画面からはみ出します。
• フローティング目次のリンクやボタンにキーボードフォーカスリングを表示できるよう、:focus-visible{outline:2px solid <accent>;outline-offset:2px} を指定します。
• table に font-variant-numeric:tabular-nums を指定します（数値列がガタつかないようにします）。
• Mermaid／Chart の表示アニメーションをスキップし、scroll-behavior:auto を設定する @media(prefers-reduced-motion:reduce) を追加します。目次のアンカージャンプを滑らかにし、見出しが固定ヘッダーに隠れないよう、html{scroll-behavior:smooth} と scroll-margin-top も追加します。
• ファビコン（インライン data-URI でも可）と、情報を伝えるダイアグラムの alt／<title> を追加します。

完全な指示

~/.gemini/antigravity/skills/md-to-html/SKILL.md

分岐

このバージョンにサブブランチはありません。

検証と停止条件

W03 は決定論的なチェックリストです（HTML 内で grep できる項目：charset、viewport、<title>、:focus-visible、tabular-nums、prefers-reduced-motion、favicon）。可視化の品質（Mermaid と Chart のどちらを選ぶか）は、目視でレビューする必要があります。html/ 内のファイルがチェックリストをすべて通過し、レポートを記録した時点で終了します。

例

• 成功例: /md-to-html llmwiki/wiki/concepts/solid-what-how.md → html/solid-what-how.html にフローティング TOC、tabular-nums でスタイル設定された WHAT/HOW テーブル、viewport + フォーカスリング + reduced-motion が含まれる。下書き DDMMYY-md-to-html-swh.md とインデックス／ログの行も作成されます。
• 境界／失敗例: ビルド結果に <meta name="viewport"> がない → W03 失敗（モバイルで TOC／テーブルがはみ出す） → 追加してからファイルを記録します。ソースの .md ファイルと同じ場所には HTML を書き込みません。

納品 — 出力レポート

スキルの主なタスクがすべて完了したら、wiki に提案用の下書きを作成します。

手順

1. ファイル名を作成します：

• 形式：DDMMYY-<ten>.md
• DDMMYY = 今日の日付（例：2026 年 6 月 2 日の場合は 020626）
• <ten> = 実施内容を要約する 2〜4 語の kebab-case 名（例：landing-page-coteccons、brand-kit-fintech、ingest-auth-spec）

2. llmwiki/wiki/sources/draft/DDMMYY-<ten>.md を書き込みます：

---
type: draft
title: "DDMMYY-<ten>"
status: proposed
tags: [<skill-name>, output-report]
timestamp: YYYY-MM-DD
---

# DDMMYY-<ten>
**Type:** draft
**Status:** proposed
**Tags:** <skill-name>, output-report
**Proposed:** YYYY-MM-DD

## What
<One sentence — what this skill invocation produced or decided>

## Output
<Key artefacts, files created/modified, or decisions made>

## Files
| File | Action |
|------|--------|
| `path/to/file` | created / modified |

## Notes
- Invoked via: `/<skill-name>` skill

## Origin
- **Draft:** `wiki/sources/draft/DDMMYY-<ten>.md`
- **Commit:** _(filled by verify-before-commit)_
- **Date promoted:** _(filled by verify-before-commit)_

3. wiki のインデックスとログを更新します：

• llmwiki/wiki/index.md — 1 行追加します：| [DDMMYY-<ten>](sources/draft/DDMMYY-<ten>.md) | draft | YYYY-MM-DD |
• llmwiki/wiki/log.md — 次を追記します：## YYYY-MM-DD — <skill-name> — <ten>

スキルによって成果物も決定事項も一切生じない場合（例：/caveman-stats のような純粋な表示モード）のみ、スキップします。