article-to-html

article-to-html

ドキュメント（会話のコンテキスト内のもの、または指定された Markdown ファイル）を、references/template.html で定義された「paper proposal」デザインシステムを再利用して、自己完結型の HTML ファイルに変換します。セリフ体の本文＋等幅フォントのメタ情報＋番号付きセクション＋インライン SVG 図＋コールアウト＋表＋オプションの JavaScript インタラクティブ機能を備えます。

トリガー後のフロー

1. ソースを取得します。 ユーザーがファイルパスを指定した場合は、それをReadします。会話のコンテキストに下書きがある場合は、それを直接使用します。
2. ドキュメントの骨組みを抽出します。 タイトル、副題、TL;DR、セクション一覧、図が必要かどうか、表が必要かどうか、インタラクティブ機能が必要かどうかを確認します。
3. テンプレートを読み込みます。 references/template.htmlをReadし、CSS と構造全体をひな形として使用します。
4. コンポーネントのリファレンスを読み込みます。 references/components.mdをReadし、今回必要なスニペットを選びます。
5. 図が必要な場合： references/svg-figures.mdを参照し、インライン SVG で描画します（外部画像への参照は使わず、ファイルをポータブルに保ちます）。
6. インタラクティブ機能が必要な場合： references/interactive.mdを参照し、</body>の前に<script>ブロックを追加します。
7. 出力します。 {same dir as source or current working dir}/{slug}.htmlにWriteします。ファイル名はタイトルの英語スラッグ、またはユーザーが指定した名前にします。
8. 報告します。 ファイルパスと、ブラウザーで開くためのコマンドを1行で伝えます。

デザイン上の不変条件（変更しないでください）

• 単一ファイルにします。 CSS／SVG／JS はすべてインラインにします。外部フォント、CDN、リモート画像は使いません。
• paperパレットは変更しないでください。 --paper: #f7f7f5 と --ink: #1a1a1aは、このスキルの視覚的な特徴です。ユーザーが明示的に異なる雰囲気（ダークモード、別のアクセントカラーなど）を求めた場合は、--accent／--warnを変更できますが、paper／ink は維持してください。
• 本文はセリフ体、メタ情報は等幅フォントにします。 bodyにはui-serifを使用します。すべての「メタデータスロット」（.doc-eyebrow / .doc-meta / th / code / figcaption / .num）にはui-monospaceを使用します。この組み合わせが特徴です。
• セクション番号の接頭辞を付けます。 <h2><span class="num">01</span>Section title</h2> — 小さな等幅フォントで薄いグレーにし、タイトルとの間隔を14pxにします。ソースに番号がない場合も追加します。
• 図にはキャプションが必要です。 <figcaption><span class="fig-num">FIG 1</span>caption text</figcaption>を使い、FIG Nはアクセントカラーにします。
• TL;DR は必ず先頭に置きます。 ソースに TL;DR がない場合は、最初の1〜2段落を約60語に要約し、そこに配置します。
• ユーザーから明示的に依頼されない限り、「AI によって生成されました」というフッターの透かしは入れません。

コンポーネント早見表

ソースに含まれるもの...	使用するもの...
導入／概要	.tldrブロック
引用	.callout.cite（.cite-sourceを含めます）
警告／注意事項	.callout.warn
一般的な補足	.callout（デフォルトの白い背景）
3つの並列する概念／役割	.cards（3列カード）
N 個の並列する概念	.cards cols-2／.cards cols-4
比較／ベンダーマトリクス	<table>
フロー／アーキテクチャ／タイミング／棒グラフ	インライン SVG 図 — references/svg-figures.mdを参照
未解決の質問のリスト	項目ごとに先頭の語句を太字にした<ol>
参考リンク	<ul>を含む<footer>

インタラクティブ要素（任意）

テンプレートはデフォルトで静的です。ドキュメントに明らかな利点がある場合は、積極的にインタラクティブ機能を追加します。

• セクションの折りたたみ／展開（長いドキュメント）
• コードブロックの「コピー」ボタン
• 表のフィルター／並べ替え（ベンダー比較表に最適）
• ダークモードの切り替え（localStorageに保存）
• 目次＋スクロールスパイ
• フォーム（RFC／意思決定ドキュメント用の「投票／コメントを残す」フォームをlocalStorageに保存する場合など）

具体的なスニペットはreferences/interactive.mdにあります。デフォルトでは何も追加しません。ただし、(a) ドキュメントが長い（セクションが3つ以上かつ図が2つ以上）場合、または (b) ソースがインタラクションを前提とした形式（チュートリアル、意思決定ドキュメント、ベンダー選定）の場合を除きます。

命名と出力先

• ファイル名：タイトルを英語のスラッグにし、小文字とハイフンを使用して、40文字以内にします。中国語のタイトルの場合は、ピンインまたは翻訳したキーワードのヒントを使用します。例：《新基建提案》→ infra-proposal.html。
• 出力先：
  • ユーザーがソースの Markdown パスを指定した場合は、同じディレクトリに出力します。
  • それ以外の場合は、現在の作業ディレクトリに出力します。
  • ユーザーがパスを指定した場合は、その指定に従います。
• 同じ名前のファイルがすでに存在する場合は、末尾に -v2／-v3 を付けます。ユーザーの既存の出力を決して黙って上書きしないでください。

よくある間違い

• CSSの色を変更する。 ユーザーが「別の配色にしてください」と言わない限り、紙／インク／アクセントの色は変更しないでください。見た目の一貫性こそが重要です。
• 本文をサンセリフ体にする。 「提案書」のような雰囲気は本文のセリフ体によって成り立っています。フォントを変えると見た目が損なわれます。
• アイコンに絵文字を使う。 このスキルで使用する文字表現は、大文字の等幅フォントのラベルと小さな色ブロック（.mascot／.layer-icon）です。ユーザーが明示的に求めない限り、絵文字は使わないでください。
• 外部の <img src="https://...">。 移植性が損なわれます。インライン SVG、base64 を使うか、省略してください。
• figcaption の番号が抜けている。 「学術論文」のような雰囲気を出すうえで、「FIG 1 / FIG 2 / FIG 3」の通しラベルは重要です。
• すべての段落にコールアウトを付ける。 コールアウトは装飾ではなく、1〜2か所の文章を目立たせるために使います。ドキュメント全体で5個以下にしてください。
• 3列カードに5項目を詰め込む。 repeat(N, 1fr) に切り替える（または .cols-N 修飾子を使う）ことで、無理に折り返さないようにします。
• 例に含まれる特定分野の名前を流用する。 テンプレートは空の状態です。ソースに Crewlet／Anthropic などが記載されていない場合、HTMLにも含めないでください。

ファイル一覧

• references/template.html — 空のひな形（CSS一式とプレースホルダー構造）。ここから始めます。
• references/components.md — 各コンポーネントのコピー＆ペースト用 HTML スニペット。
• references/svg-figures.md — 代表的な5種類の SVG 図のひな形（アーキテクチャ、タイミング、棒グラフによる比較、積層レイヤー、ライフサイクル）。
• references/interactive.md — JS スニペット（折りたたみ、コピー、テーブルのフィルター／並べ替え、目次、ダークモード、フォームから localStorage への保存、読書の進捗状況、図のズーム）。
• assets/example.html — 完成済みの参考レンダリング（元の中国語記事 article.html を、見た目のベンチマークとして保持したもの）。