Single-file HTML slide deck template — dashed hand-drawn aesthetic + in-browser edit mode.
Built as a Claude Code skill, but the template.html is a fully standalone HTML file that opens in any browser.
- One file, no build step — open
template.htmlin a browser, done - Edit in browser — press
E, click any text to edit, press⌘Sto download a new HTML with your changes - Auto-saves drafts to
localStorage(per-deckDRAFT_KEY) - Dashed handcrafted look — 米白底 + 點點格線 + dashed 卡片 + 藍 #4A7CC9 / 黃 #FFD93D
- Sidebar nav with collapse (
[/]/\), keyboard + touch + edge-click navigation - Light/dark theme toggle (persisted)
- Bottom shortcut hint pill (auto-hides in fullscreen + edit mode)
| File | Purpose |
|---|---|
SKILL.md |
Claude Code skill manifest — when to invoke, step-by-step procedure |
template.html |
The deck skeleton (CSS + JS + 5 example slides). Copy this to start a new deck. |
STYLE_GUIDE.md |
Color palette, typography, dashed component library, edit-mode spec |
example-deck-source.md |
Markdown source format — feed this kind of doc to Claude to generate decks |
Put the folder in ~/.claude/skills/editable-deck/. Claude will pick it up and use it whenever you ask for a slide deck / 簡報 / dashed-style HTML.
cp template.html my-deck.html
open my-deck.html
# Press E. Edit. Press ⌘S to save.Then in your editor, change:
<title>and<head>text#sidebar-title/#sidebar-sub(top of sidebar)- 5
<div class="slide" data-slide="N">blocks (your content) const titles = [...]JS array (sidebar labels — must match slide count)const DRAFT_KEY = '...'(use a unique key per deck so drafts don't collide)
| Key | Action |
|---|---|
← / → / Space / PageUp / PageDown |
Navigate |
Home / End |
First / last slide |
F |
Fullscreen |
E |
Toggle edit mode |
⌘S / Ctrl+S |
Download HTML (in edit mode) |
[ / ] / \ |
Toggle sidebar |
MIT