技能概述
html-ppt-obsidian-claude-gradient 係一個專注嘅 16:9 HTML 簡報模板，視覺識別基於 obsidian-claude-gradient 全頁模板。
核心視覺：GitHub-dark #0d1117 + 紫藍 radial 環境光 + 60px 網格 mask + 居中佈局 + 紫色 pill 標籤 + 三色漸變標題（#a855f7 → #60a5fa → #34d399）+ GitHub 風格代碼調色板 + 紫色左邊框高亮塊。
類似 GitHub Blog / Linear Changelog 風格。適合開發者工作流教程、MCP 教程、Agent 教程、dev tool 教程。
觸發關鍵字
- github dark、developer tutorial
- mcp tutorial、agent tutorial
- dev workflow、changelog deck
- GitHub 風格簡報、開發者教程 PPT
視覺特徵
| 特徵 | 說明 |
|---|---|
| 背景 | GitHub-dark #0d1117 |
| 環境光 | 紫藍 radial 漸變 |
| 網格 | 60px 網格 mask |
| 佈局 | 居中佈局 |
| 標籤 | 紫色 pill 標籤 |
| 標題 | 三色漸變（紫 #a855f7 → 藍 #60a5fa → 綠 #34d399） |
| 代碼 | GitHub 風代碼 palette |
| 高亮塊 | 紫色左邊框 |
使用方法
自然語言觸發
用 obsidian-claude-gradient 模板做一份開發者教程 PPT
GitHub 暗紫漸變 + 居中佈局 + 紫色 pill + 三色漸變標題 + 配置/步驟代碼塊
github dark developer tutorial deck for MCP setup
預先確認
Agent 會先同你確認以下資訊：
- 教什麼
- 目標受眾
- 需唔需要 MCP/Agent 配置示例
工作流程
- 先讀主技能：所有作者規則在
html-ppt/SKILL.md - 從模板文件夾開始：複製
obsidian-claude-gradient/中嘅index.html和style.css，保留.tpl-obsidian-claude-gradientbody class - 處理共享 runtime：將上游
../../../assets/...路徑改寫為項目本地路徑或內聯 - 替換 demo 內容，不要修改結構 class
- 演講者備註放進
<aside class="notes">
功能支持
- 演講者備註
- 鍵盤導航 runtime
- 36 個主題可切換
- 動畫支持