# HTML Slide Deck

> 製作或修改可離線開啟的 HTML 教學、研習與研究簡報，包含單頁投影片架構、方向鍵換頁、章節導覽、頁碼、講者備註、響應式排版與瀏覽器逐頁測試。當使用者要求 HTML 簡報、網頁投影片、Reveal.js 風格簡報、互動簡報或不依賴 PowerPoint 的簡報時使用。

- Skill: `mathruffian-dot/html-slide-deck` (Agent Skill, multi-file: 4 files)
- Install (CLI): `npx skillmds@latest add mathruffian-dot/html-slide-deck`
- Raw SKILL.md: https://api.skillmd.com/api/skills/mathruffian-dot/html-slide-deck/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: mathruffian-dot (https://skillmd.com/u/mathruffian-dot)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/mathruffian-dot/html-slide-deck

---


# HTML 教學簡報

## 交付目標

建立可直接以瀏覽器開啟的離線簡報。預設使用原生 HTML、CSS、JavaScript，不要求建置工具或網路服務。

## 工作流

1. 讀取來源內容並確認受眾、場合、時間、比例與是否離線。
2. 建立頁面表：頁碼、角色、唯一主張、理解任務、版型與互動。
3. 複製 `assets/starter/index.html` 到工作目錄。
4. 替換範例內容，保留必要的導覽、鍵盤與列印功能。
5. 將圖片、字體與資料放入本地 `assets/`，避免不必要的外部依賴。
6. 使用瀏覽器逐頁測試桌面與窄螢幕版面。
7. 檢查主控台錯誤、連結、鍵盤、列印與離線開啟。
8. 交付 HTML 與資產資料夾。

## 必備功能

- 左右方向鍵、PageUp／PageDown、Home／End 換頁。
- 畫面上的上一頁、下一頁按鈕。
- 目前頁碼與總頁數。
- 章節或投影片導覽。
- 講者備註放在語意清楚但預設隱藏的元素中。
- `?print=1` 或列印樣式可一次顯示所有頁面。
- URL hash 記住目前頁面，重新整理後可回到原頁。

## 版面規則

- 以 16:9 投影為預設，內容在 1280 × 720 與 1920 × 1080 均可讀。
- 一頁一個主張，最多三個主要元素。
- 使用 CSS Grid／Flexbox 建立穩定排版。
- 文字使用 `clamp()` 控制響應式字級。
- 不依賴滑動長頁閱讀；每張投影片必須完整落在視窗內。
- 動畫必須尊重 `prefers-reduced-motion`。

完整規則見 `references/html-deck-principles.md`。

## 安全與相容性

- 不把 API key、token 或敏感資料寫入 HTML。
- 不使用遠端腳本執行不明程式。
- 若需 KaTeX、圖表函式庫或字體，離線需求下應下載本地副本。
- 互動元件可用鍵盤操作，文字與背景須有足夠對比。

## Browser QA

完成後必須實際開啟並檢查：

- 第一頁、最後一頁與至少一張內容密集頁。
- 方向鍵、按鈕、Home／End、hash 與列印模式。
- 1280 × 720 及窄螢幕版面。
- 無水平捲動、文字裁切、元素重疊與主控台錯誤。

## 交付

回報入口 HTML 絕對路徑、投影片數、使用方式、瀏覽器檢查結果與任何外部依賴。