Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx agentmods add skills/mathruffian-dot/claude-html-slide-builder/skillnpx skills add mathruffian-dot/claude-html-slide-builder --skill skillgit clone --depth 1 https://github.com/mathruffian-dot/claude-html-slide-builderWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/mathruffian-dot/claude-html-slide-builder/skill)<a href="https://agentmods.dev/skills/mathruffian-dot/claude-html-slide-builder/skill"><img src="https://agentmods.dev/badge/skills/mathruffian-dot/claude-html-slide-builder/skill.svg" alt="Measured on agentmods" height="20"></a>What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00256 | $0.02954 |
| Opus 5 | $0.00128 | $0.01477 |
| Sonnet 5 | $0.00051 | $0.00591 |
| Haiku 4.5 | $0.00026 | $0.00295 |
Grade A, and why
html-slide-builder scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 6d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
How it starts
The opening of the file, as written. The whole thing — 261 lines — stays where its author put it; the contents beside it link to each section on GitHub.
HTML 智慧簡報生成器
教材 → 分析 → 確認大綱 → 生成 Reveal.js 簡報 → 強化（底圖/圖標/互動/視覺化）→ GitHub Pages 部署
0. 讀取教材
接受任何形式的輸入：
- 文字 / Markdown：直接分析
- PDF：用 Read 工具讀取（若有多頁先讀摘要頁）
- 口述主題：自行根據標準教學邏輯設計（引言→概念→範例→互動→結論）
若教材資訊不足，不要詢問，直接用教學慣例補充。
1. 分析大綱，等使用者確認
分析完畢後輸出大綱表格，等使用者確認後才繼續：
## 📋 簡報大綱草稿（共 N 頁）
| 頁碼 | 標題 | 內容摘要 | 功能標記 |
|------|------|----------|----------|
| 1 | 封面 | 課程名稱、講師 | [BG] |
| 2 | 破冰提問 | 文字雲收集學員想法 | [INTERACT:wordcloud] |
| 3 | 三大重點 | 並列說明三個核心概念 | [ICON] |
| 4 | 前後對比 | A 方案 vs B 方案演進 | [VIZ] |
...
**功能標記說明**
- [BG] 背景底圖（draw 技能，暗色風格）
- [ICON] 扁平化圖標（draw + PIL 去背）
- [INTERACT:wordcloud] Firebase 即時文字雲
- [INTERACT:poll] Firebase 單選投票
- [VIZ] 滑桿視覺化演示（clip-path）
請確認大綱，或說明要調整的地方。
功能標記的決策原則
| 標記 | 觸發條件 | 每份簡報目標數量 |
|---|---|---|
| [BG] | 封面、封底、章節轉換、高衝擊結論 | 3–5 頁 |
| [ICON] | 頁面有 3–6 個並列項目（優缺點、步驟、特性） | 1–3 頁 |
| [INTERACT:wordcloud] | 開場破冰、先備知識調查、課尾反思 | 1 頁（通常第 2 頁） |
| [INTERACT:poll] | 概念確認、意見調查、前測/後測 | 0–1 頁 |
| [VIZ] | 「前後對比」「格式轉換」「A 到 B 的演進」 | 0–1 頁 |
2. 建立專案目錄與基礎 HTML
使用者確認後：
- 建立專案目錄：
<當前工作目錄>/<簡報英文短名>/ - 建立
images/子目錄 - 生成
index.html（完整 Reveal.js 骨架）
讀取 references/reveal-template.md 獲得：完整 CSS 變數、元件樣式、Reveal.js 初始化程式碼。
命名規則：
- 專案目錄：kebab-case 英文（
ai-course、math-lesson） - Firestore 集合：
<slug>_wordcloud、<slug>_poll（避免不同簡報資料混用）
調色盤（所有簡報統一使用）：
--accent: #e8643a 橘紅（主強調）
--accent2: #4fc3f7 青（次強調）
--success: #81c784 綠（正面）
--warn: #ffb74d 琥珀（提示）
背景： #0d1117 ~ #1a1a2e（深暗色）
3. 生成背景底圖 [BG]
對每個 [BG] 頁面呼叫 draw 技能，可平行執行：
python "{{DRAW_SKILL_PATH}}" \
"<底圖 prompt>" \
--size 1536x1024 --quality low \
--name <slide-slug> \
--outdir "<專案目錄>/images"
{{DRAW_SKILL_PATH}}在安裝時由 install.py 自動替換為 draw.py 的實際路徑。
底圖 Prompt 設計原則：
- 深暗色系（deep navy、dark space、#0d1117 背景）
- 無文字
- 與投影片主題有關但抽象（概念視覺化，非字面圖示）
- 霓虹/發光效果，配合主題色
- 例：AI 課程封面 →
"deep navy background, glowing neural network nodes and light trails, cinematic wide, no text, abstract tech art"
What ships with it
3 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 6d ago First seen · 261 lines · 256 tokens per session scan A b014bdf56086
html-slide-builder is a skill published in the GitHub repository mathruffian-dot/claude-html-slide-builder (21 stars, last pushed 3mo ago), licensed MIT. It adds 256 tokens to every session and 2,954 once invoked, about $0.0013 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
baoyu-comic
Knowledge comics (知识漫画): educational, biography, tutorial.
html-ppt-zhangzara-cartesian
An economics senior thesis on the employment effects of local minimum-wage increases — identification strategy, evidence, and limitations. Built as a decision-grade coursework defense deck for thesis committee.
html-ppt-zhangzara-daisy-days
A customer-success workshop onboarding users to a project-management app — the first-value path and the habits that retain. Built as a decision-grade professional training deck for new customers, CS team.
html-ppt-zhangzara-playful
A retail sales-floor training on consultative selling — the flow, the role-plays, and the daily habit that lifts conversion. Built as a decision-grade professional training deck for store associates, floor managers.
html-ppt-zhangzara-retro-windows
An IT security-awareness training on spotting phishing — the tells, the drill, and what to do in the first 60 seconds. Built as a decision-grade professional training deck for all employees.
sprite-animation
A pixel / sprite-style animated explainer slide — full-bleed cream stage, bold display year, animated pixel-art mascot (e.g. Hanafuda card, mushroom, or 8-bit console), kinetic Japanese display type, ticking timeline ribbon. Reads like a single frame of an educational motion video — looping CSS keyframes, no JS, ready…