解說頁面撰寫
何時使用
- 建立新的解說頁面（單一 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檢查 375px、768px、1280px 寬度下是否有水平溢出、控制台錯誤、第一個[data-widget]的觸控大小。 - 確認所有控制項與動畫運作正常，以及計算邏輯（
check.mjs）。 - 指令：references/verify.md。
核心規則
- 事實：僅使用從原始來源驗證過的論文主張與數值。所有數字需附上標籤，標明來自「論文」/「部落格」/「課程」/「計算」/「範例」。
- 架構：標題 + 一行摘要 → 各章節 → 陷阱與誤解 → 參考來源。h2 必須是主張陳述句。
- 章節內：用 1-2 句話說明要看什麼 → 圖表 → 簡短解釋原因。引導與例外情況置於
<details>。 - 公式：不列出完整推導，而是說明各項的角色與核心概念。
- 圖表：僅包含能讓讀者親自驗證主張的圖表。預設為自動播放動畫（含播放/暫停、重播按鈕）。
- 文體：敬語體（以預設語言為準），每段落不超過三句話，每個章節最多一個比喻。
- 設計：每個頁面根據主題重新決定設計（禁止複製現有頁面）。固定要求：僅限淺色模式（
color-scheme: light），顏色集中以 CSS 變數管理。
完成檢查清單
- 頁面資料夾
CLAUDE.md中存在## 讀者程度章節。 - 所有標記為「不了解」的概念已在正文中解釋。
- 所有標記為「模糊」的概念都有
<details>複習盒。 - 所有 h2 都是主張陳述句。
- 所有數字都有標籤，且來自「論文」或「部落格」的數值已從原始來源驗證。
- 每個公式都說明了各項的角色。
- 若涉及數據、模型、評估，則包含從數據清理 → 輸入/輸出格式 → 模型內部處理 → 輸出 → 損失/訓練 → 評估指標的流程圖。
- 沒有裝飾用圖表，預設控制狀態下現象應一目了然，圖表下方有一行指引文字。
- 若有影片來源，則包含按區段剪輯的片段與輸出語言字幕（例如
.ko.vtt）。 - 頁面底部有參考來源列表（論文、影片、程式碼儲存庫、部落格/網頁連結）。
-
lang屬性、viewport、<title>、color-scheme: light、顏色以 CSS 變數管理。 - 版面與顏色符合主題風格，且未複製現有頁面設計。
- 通過
check_page.py檢查，所有控制項與動畫運作正常。 - 若有計算邏輯，則通過
node check.mjs檢查。