運作原理網站
產生一個無依賴的幻燈片簡報，放在 site/ 目錄中，用來從「為什麼」到「程式碼」層層解說程式碼庫，包含反映專案真實邏輯的互動展示，以及一個負責發佈的 CI 工作。參考實作：
https://mveplus.github.io/onair-led-sign-firmware/（19 張投影片，4 個模擬；原始碼在
https://github.com/mveplus/onair-led-sign-firmware/tree/main/site）。
此技能 templates/ 目錄中的模板：
| 檔案 | 複製到 | 用途 |
|---|---|---|
index.html | site/index.html | 頁面外框 + 可供複製的投影片模式 |
deck.css | site/deck.css | 主題變數、版面、元件 |
deck.js | site/deck.js | 導覽、概覽、雜湊路由、影格迴圈、逐步輔助程式 |
app.js | site/app.js | 專案展示的起點（逐步連接、影格掛鉤） |
github-pages.yml | .github/workflows/pages.yml | GitHub Pages 部署 |
gitlab-ci.yml | 合併到 .gitlab-ci.yml | GitLab Pages 部署 |
專屬的展示程式碼放在 site/app.js（以及選用的樣式 site/app.css）；保持 deck.js 和 deck.css 通用。
流程
1. 開始前先詢問（一次 AskUserQuestion 呼叫）
首先執行 git remote -v，以便託管問題能反映實際情況。如果遠端是 GitHub 但使用者說是 GitLab（或相反），請向使用者確認。最多問四個問題：
- 託管： GitHub Pages、GitLab Pages，或兩者都有。
- 受眾/深度： 混合（先理念，再深入探討；這是預設選項）、開發者、或非開發者。
- 互動展示： 提出 3–4 個專屬於此專案的候選項目（透過快速瀏覽發現，例如狀態機、計時/邏輯判斷、請求流程、數學或公式、設定建置器）。多選。
- 選擇性：語言或品牌限制，如果儲存庫有相關提示。
2. 仔細閱讀程式碼
閱讀進入點、主要模組、README/文件以及 CI 檔案。投影片中提到的每個宣稱（超時、臨界值、預設值、主題、端點、重置清除的內容）都必須來自程式碼，而非 README。記錄一份文件與程式碼不一致以及死路（例如，某個 CI 工作的消費者不存在）的清單。在投影片上展示程式碼的真實行為，並在最後將清單報告給使用者。切勿默默「修正」投影片以符合文件。
3. 大綱（約 12–20 張投影片），分為章節
典型架構：標題（帶有有趣的互動元素）→ 理念/問題 → 總覽（可點擊的架構圖）→ 請求/資料流程（動畫逐步）→ 每個主要元件一張投影片 → 彈性/錯誤處理 → 安全性/密碼 → 建置、CI、交付 → 設計原則回顧（附連結）。每張投影片都需要 data-chapter 和 data-title 屬性。
4. 建置
- 複製模板並在
index.html中複製投影片模式（英雄區、帶卡片的雙欄、逐步、資訊網格）。 - 模擬重複使用專案的實際演算法：移植函式（整數運算、臨界值、排序）並在投影片上標示其名稱。一個看起來對但實際不對的模擬就是個錯誤。
- 使用
Deck.onFrame(slideId, fn)進行動畫，這樣只有可見的投影片會動畫。使用Deck.stepper(...)處理點擊逐步序列。 - 圖表：使用 CSS 變數的內聯 SVG；不使用任何外部資源。不使用 CDN 和不需下載的字型，這樣網站才能離線運作，也能在鎖定的 Pages 環境中執行。
- 圖片：將它們複製到
site/img/，調整大小並移除中繼資料（使用 ImageMagick：magick in -auto-orient -strip -resize 1200x -quality 80 out.jpg）。檢查儲存庫原始圖片的 GPS EXIF（例如identify -format '%[EXIF:GPSLatitude]'或exiftool -gps:all），如果發現任何 GPS 資料，請警告使用者。手機照片通常會攜帶拍攝地點的位置。一旦推送上去，它們就會留在 git 歷史中，因此移除它們需要改寫歷史，這由使用者決定。
5. 發佈設定
- GitHub：複製
github-pages.yml。Pages 必須啟用一次，且來源設定為 Actions（設定 → Pages），或使用下面的指令。提供使用者可直接複製的圍籬程式碼區塊，區塊後不要有任何內容。如果句子結尾的句號連同指令一起被複製，會變成參數的一部分（build_type=workflow.），API 會拒絕：
它只會從預設分支部署。gh api -X POST repos/OWNER/REPO/pages -f build_type=workflow - GitLab：將
pages工作合併到任何現有的.gitlab-ci.yml中；不要覆蓋它。Pages 會自動開啟；URL 會顯示在「部署 → Pages」下。 - 在 README 的概覽/「運作原理」區段中，加入一段簡短的連結說明。
6. 回報前進行驗證
node --check site/*.js- 使用
python3 -m http.server 8765 --bind 127.0.0.1 --directory site（在背景執行）來提供服務。如果有可用的瀏覽器自動化工具（例如 Claude 在 Chrome 中），開啟網站，為每個章節截圖，並透過在頁面中執行 JavaScript（.click()、分發 PointerEvents）來驅動每個展示，而不是點擊座標：螢幕截圖通常會相對於 CSS 像素縮放，因此座標點擊會失準。如果無法調整視窗大小，請透過在 380 像素寬的 iframe 中載入網站來檢查手機寬度，並尋找getBoundingClientRect().right > 381的元素。 - 如果沒有瀏覽器工具，告訴使用者需要手動檢查哪些頁面和展示。不要將網站回報為已測試。
- 關閉你開啟的任何分頁，並在之後停止伺服器。
7. 交接
在提交或推送前先詢問使用者。然後，在一個分支上：為網站建立一個提交，為使用者要求的任何程式碼修正建立單獨的提交。回報：建置了什麼、如何啟用 Pages、不一致清單，以及任何未測試的項目（例如硬體）。
風格規則
- 預設為深色主題（在
deck.css中設定變數），搭配紅色強調色，您可以透過--accent為每個專案重新調整顏色。 - 樸實、具體的文字。解釋為什麼存在某個設計選擇，而不僅僅是它做什麼。
- 程式碼片段簡短且真實（從原始碼中擷取，並加上命名該檔案的註解）。
- 鍵盤：←/→/空白鍵/PageUp/PageDown/Home/End，
O開啟概覽，Esc關閉。觸控支援滑動。每張投影片都有自己專屬的 URL（#/slide-id）。