wlsdnen/explainer-page

解説ページの作成

いつ使うか

• 新しい解説ページ（単一HTMLまたはフォルダ）を作成するとき。
• 既存の解説ページの構成・図・説明を大幅に変更するとき。

ページフォルダやプロジェクトに CLAUDE.md がある場合、そのルールがこのスキルより優先されます。

出力言語

デフォルトの出力言語は韓国語です（合쇼체、lang="ko"）。ユーザーが別の言語を要求した場合や、プロジェクトの CLAUDE.md で指定されている場合は、その言語で記述し、lang 属性・フォントスタック・文体ルール（references/writing.md）をその言語に合わせて変更します。その他のルールは言語に関係なくそのまま適用されます。

成果物

• ビルドステップ不要の自己完結型単一 index.html（インラインCSS/JS）。動画クリップや画像がある場合は同じフォルダに配置します。
• 外部ライブラリはCDNから正確なバージョンを固定して読み込むか、オフライン対応が必要な場合はファイルをフォルダにベンダリング（vendoring）して相対パスで読み込みます。どちらの方法を使うかはユーザーに確認するか、ページフォルダの CLAUDE.md に記載します。

作業手順

1. 資料収集と事実確認

• 論文・動画・コードリポジトリ・技術ブログ/ウェブページを直接開いて読みます。ページに使用する主張や数値は、原文（表・図番号、講義のタイムスタンプ、コードの位置、ブログのセクション）で確認します。ブログが論文を引用している場合は、可能な限り論文で確認します。
• 本文を理解するために必要な前提知識のリストを作成します。これは次のステップでのインタビューの材料となります。

2. 読者レベルのインタビュー（構成案の前に必須）

• AskUserQuestion（多肢選択）を使用して、前提知識ごとに「知っている／あいまい／知らない」を尋ねます。AskUserQuestion がない場合は、同じ質問をテキストで尋ねます。
• 回答に応じてさらに深掘りします。本文の理解に必要なレベルが確定するまで続けます。
• 結果をページフォルダの CLAUDE.md の ## 読者レベル セクションに概念ごとに記録します。以降の修正時もこの記録を読み、同じレベルを維持します。ページをデプロイする際に CLAUDE.md はアップロードしません。
• 本文への反映:
  • 知らない: 本文で詳細に解説します。
  • あいまい: 短い復習ボックス（<details>）で補足します。
  • 知っている: 説明を省略します。

3. 構成

• ページの流れとセクションタイトル（主張文）を最初に決めます。セクションごとに、主張を示す図（アニメーション・静的画像・スライダー）とクリップを決めます。
• データ・モデル・評価が登場するテーマの場合は、データから評価指標までの流れをセクション構成に含めます。
• 詳細: references/writing.md、references/visuals.md。

4. 作成

• 単一の index.html にインラインCSS/JS。計算ロジックはDOM非依存のスクリプトとして分離します。
• 動画ソースがある場合は、説明の区間ごとにクリップを切り取って埋め込みます。
• 詳細: references/writing.md、references/visuals.md、references/style.md。

5. 検証

• scripts/check_page.py で、375・768・1280px での横はみ出し、コンソールエラー、最初の [data-widget] のタッチサイズを確認します。
• すべての操作部とアニメーションの動作、計算ロジック（check.mjs）も確認します。
• コマンド: references/verify.md。

核となるルール

• 事実: 論文の主張・数値は原文で確認したもののみ使用します。すべての数字に 論文/ブログ/講義/計算/例 のタグを付けます。
• 構成: タイトル＋一行要約 → セクション群 → 落とし穴・誤解 → 出典。h2 は主張文にします。
• セクション内: 何を見るかを1～2文 → 図 → なぜそうなるのかを簡潔に。誘導・例外は <details> 内に記述。
• 数式: 導出全体ではなく、各項の役割と核となる概念を説明します。
• 図: 読者が主張を直接確認できるもののみ。基本は自動再生アニメーション（再生/一時停止・最初に戻る）。
• 文体: 合쇼체（デフォルト言語基準）、1段落3文以内、比喩はセクションごとに最大1つ。
• デザイン: テーマに合わせてページごとに新しく決めます（既存ページのコピー禁止）。固定要件はライト専用（color-scheme: light）、色はCSS変数で一元管理。

完成チェックリスト

• ページフォルダの CLAUDE.md に ## 読者レベル セクションがある。
• 「知らない」とマークされた概念が本文ですべて説明されている。
• 「あいまい」とマークされた概念には <details> の復習ボックスがある。
• すべての h2 が主張文である。
• すべての数字にタグが付いており、論文・ブログ の数値は原文で確認済みである。
• 数式ごとに各項の役割を説明している。
• データ・モデル・評価が登場する場合、データクリーニング → 入出力形式 → モデル内部処理 → 出力 → 損失・学習 → 評価指標の流れが図とともに記載されている。
• 装飾用の図はなく、操作部の初期値で現象がすぐに確認でき、図の下に一行のガイドがある。
• 動画ソースがある場合は、区間ごとのクリップと出力言語の字幕（例: .ja.vtt）が存在する。
• 一番下に出典一覧（論文・動画・コードリポジトリ・ブログ/ウェブページへのリンク）がある。
• lang 属性、viewport、<title>、color-scheme: light、色はCSS変数で管理されている。
• レイアウト・色がテーマの性質に合っており、既存ページのデザインをコピーしていない。
• check_page.py をパスし、すべての操作部・アニメーションが動作する。
• 計算ロジックがある場合は node check.mjs をパスする。