Slide Deck Skill — Development skill for Claude Code

slide-deck-skill

跨平台專業 16:9 網頁簡報與講義製作 Skill。支援手機無線遙控、雙螢幕跨視窗同步主控台、PACE 節奏計時、逐頁排版溢出檢查、高解析度截圖轉 16:9 PDF、與配套講義生成。

---

核心特色

• 零依賴播放：純 HTML5 + CSS + 原生 JS，任何瀏覽器（Chrome、Edge、Safari、Firefox）雙擊即播，支援 Windows、macOS、Linux 與平板觸控。
• 手機無線遙控（跨裝置同步）：按 P 點擊「手機遙控」，手機相機掃描 QR Code 即可化身遙控器（超大翻頁按鈕、觸控震動回饋、即時講稿備忘與時間同步），開箱即用免設定。
• 講者雙螢幕主控台（按 P）：筆電開主控台（看講稿備註、縮圖清單、超時警示），投影機開全螢幕投影片，兩視窗透過 localStorage 毫秒級自動同步（斷網亦穩定運作）。
• PACE 節奏時間守護：內建每頁目標時間倒數，講超時右上角計時器自動轉紅提醒。
• 自動化驗收與 16:9 PDF 匯出：透過 Playwright 自動翻頁測試，自動偵測排版溢出、自動生成縮圖清單、無損匯出 16:9 PDF。
• 學員講義配套：內建獨立的 handout.html 與按一下 A4 PDF 轉檔工具。
• 開源中繼服務：內建極簡 Cloudflare Worker WebSocket 轉發架構（worker/），零資料庫、零隱私洩漏。

---

安裝方式

1. 安裝給 AI Agent（Claude Code / Antigravity / Codex）

# Clone 到本地並建立 symlink
git clone https://github.com/yazelin/slide-deck-skill ~/slide-deck-skill
ln -s ~/slide-deck-skill ~/.claude/skills/slide-deck

2. 一般開發者與聽眾使用

只需安裝 Node.js 與 Playwright（用來執行自動化測試與 PDF 匯出）：

git clone https://github.com/yazelin/slide-deck-skill my-deck-tools
cd my-deck-tools
npm install

---

快速上手

建立一個新的簡報與講義專案

node deck.mjs init ./my-talk --title "AI Agent 架構實戰"
cd my-talk

專案目錄會包含：

my-talk/
├── deck.html           # 簡報主檔（瀏覽器打開即可播放，按 P 開啟主控台／手機遙控）
├── deck.css            # 16:9 響應式樣式庫
├── qrcode.min.js       # 純前端向量 QR Code 生成器
├── deck-tools.mjs      # 自動驗收、縮圖與 16:9 PDF 匯出工具
├── handout.html        # 學員講義樣板
├── handout-to-pdf.mjs  # 講義 A4 PDF 轉換工具
└── assets/thumbs/      # 主控台縮圖存放目錄

常用指令

# 1. 執行排版溢出檢查、產生縮圖並匯出 16:9 投影片 PDF
node deck-tools.mjs

# 2. 只匯出學員講義 A4 PDF
node handout-to-pdf.mjs

# 3. 只進行排版與頁數檢查
node deck-tools.mjs verify

# 4. 啟動 100% 離線區域網路同步伺服器（斷網環境使用）
node <你 clone 的位置>/deck.mjs serve 8080 .

# 5. 跑煙霧測試（確認 CLI 與離線遙控真的還活著）
npm test

啟動後**請用它印出來的區網網址開簡報**（像 `http://192.168.1.23:8080/deck.html`）， 不要用 `localhost`。簡報會把遙控中繼指向你開它的那個位址，用 localhost 開的話， QR Code 會指到 `localhost`，手機連不到。

---

手機無線遙控怎麼用

1. 電腦打開 deck.html，按下鍵盤上的 P 鍵開啟講者主控台。
2. 點擊右