Interactive HTML Slide Generator
Output Directory
Generated decks are saved under ~/slides/<deck-name>/ by default. Before generating, the skill:
- Expands
~ to the user's home directory
- Creates the output directory if it doesn't exist (
mkdir -p)
- Creates
slides/<deck-name>/previews/ for Workflow A preview files
- Creates
slides/<deck-name>/ for the final deck
Custom root directory: If the user specifies a path (e.g., "save it to ~/my-decks" or "output to /tmp/slides"), use that instead of the default. Respect the user's intent — don't override a explicitly requested path.
Directory initialization example:
mkdir -p ~/slides/my-deck/previews
mkdir -p ~/slides/my-deck/previews
Two Workflows
This skill supports two workflows:
- Workflow A — Beautiful HTML Templates (recommended): 32 professionally-designed templates. Best for polished, visually distinctive decks. Asks about occasion and mood, presents 3 candidates, builds from real template HTML/CSS/JS.
- Workflow B — Built-in CSS Themes: 4 CSS themes (Cyberpunk, Corporate, Minimal, Nature). Fast, self-contained single-file output, no external dependencies.
Default to Workflow A unless the user explicitly asks for a specific theme or wants a minimal/lightweight output.
Workflow A — Beautiful HTML Templates (Recommended)
Step 1 — Clarify Taste
Ask the user two questions before picking any template:
"Two quick questions before I pick a template:
- What's the occasion? (e.g. product launch, research talk, brand manifesto, classroom, team review, etc.)
- What mood / vibe do you want? (e.g. confident & editorial, warm & playful, dark & moody, quiet & literary, etc.)"
Wait for the user's answer. Do not skip this — the user's stated taste reveals what no inferred brief can.
Step 2 — Read index.json and Shortlist 3 Candidates
Read skills/ppt/beautiful-html-templates/index.json. Match the user's stated occasion + mood against each template's mood, tone, formality, density, and scheme fields.
Pick three templates whose tones genuinely fit and are different enough from each other (e.g., don't pick three editorial templates — pick one editorial, one warmer alternative, and one wildcard).
Step 3 — Build Title-Slide Previews of Each Candidate
For each of the 3 candidates:
- Read
skills/ppt/beautiful-html-templates/templates/<slug>/template.html
- Extract the first slide only (the cover/title slide)
- Replace placeholder content with the user's actual topic/title/subtitle/author/date
- Save as
~/slides/<deck-name>/previews/01-<slug>.html
- Initialize
~/slides/<deck-name>/ for later use
Open each preview with open <path> (macOS) and send the user a message:
"Three options to compare:
- —
~/slides/<deck-name>/previews/01-template-a.html
- —
~/slides/<deck-name>/previews/02-template-b.html
- —
~/slides/<deck-name>/previews/03-template-c.html
Which one feels right?"
Wait for the user to pick.
Step 4 — Build the Full Deck
Once the user picks:
- Read
skills/ppt/beautiful-html-templates/templates/<slug>/template.html in full
- Adapt every slide per the rules in AGENTS.md §3 — preserve the design system, replace placeholder content
- Add/remove/split slides to match the user's content outline
- If a layout is missing, design it using the template's fonts, color palette, decorative vocabulary, and spacing rhythm — see AGENTS.md §5
- Ensure the navigation (keyboard/click) works correctly
- Save the final deck as
~/slides/<deck-name>/index.html
Step 5 — Open and Deliver
Open the final deck with open <path>. Send:
"Done. Your deck is at ~/slides/<deck-name>/index.html — opened in your browser."
Workflow B — Built-in CSS Themes (Fallback)
Use this when the user wants a specific theme or a self-contained minimal output.
Theme Selection
| Theme |
Style |
When to Use |
| Cyberpunk |
Dark, neon, futuristic |
Default — tech, gaming, innovation |
| Corporate |
Light, professional, blue/slate |
Business, formal reports |
| Minimal |
Black & white, Swiss style |
Academic, stark, editorial |
| Nature |
Cream/green, elegant serif |
Warm, organic, literary |
Default to Cyberpunk if no theme is specified.
Assembly Process
- Read reference files: the selected CSS theme +
templates/template.html + templates/scripts.js + templates/layouts.md
- Load Template: Start with
template.html
- Inject CSS: Replace
/* CSS_INJECTION_POINT */ with the selected theme CSS
- Inject JS: Replace
/* JS_INJECTION_POINT */ with scripts.js, then replace [TOTAL_SLIDES_COUNT] with the actual number
- Generate Slides: Create HTML using patterns from
layouts.md
- Inject Slides: Replace
<!-- SLIDES_INJECTION_POINT -->
- Save:
~/slides/<deck-name>/index.html
Overflow Prevention (Workflow B)
Slides are fixed 1280×720px. Overflow is hidden and will clip content silently.
| Element |
Max |
If Exceeded |
| Bullets |
5 |
Split into 2 slides |
| Cards |
3 |
Use .compact or split |
| Code lines |
10 |
Use .scrollable on content-area |
| Card body |
2 lines |
Shorten |
Rules:
- Max 5 bullets per slide, each max 1-2 lines
- Max 3 cards per grid slide
- Never stack bullets + cards + code on the same slide
- Use
.compact class to reduce font sizes and spacing
- Prefer splitting over cramming
Template Index Summary
| Slug |
Name |
Mood |
Scheme |
| 8-bit-orbit |
8-Bit Orbit |
retro-tech, playful, cyberpunk |
dark |
| biennale-yellow |
Biennale Yellow |
editorial, atmospheric, warm |
light |
| block-frame |
BlockFrame |
neobrutalist, pastel-neon |
mixed |
| blue-professional |
Blue Professional |
clean, modern, professional |
light |
| bold-poster |
Bold Poster |
editorial, massive display |
light |
| broadside |
Broadside |
dark editorial, orange accent |
dark |
| capsule |
Capsule |
modular, pastel-pop |
light |
| cartesian |
Cartesian |
quiet, warm, classical |
light |
| cobalt-grid |
Cobalt Grid |
electric, graph-paper |
dark |
| coral |
Coral |
cream/coral, oversized display |
dark |
| creative-mode |
Creative Mode |
confident, multi-color |
light |
| daisy-days |
Daisy Days |
cheerful, pastel, hand-drawn |
light |
| editorial-tri-tone |
Editorial Tri-Tone |
dusty pink, mustard, burgundy |
light |
| grove |
Grove |
forest-green, classical serif |
dark |
| long-table |
Long Table |
cream/rust, supper-club |
light |
| mat |
Mat |
dark sage, mid-century modern |
dark |
| monochrome |
Monochrome |
ivory, all-black, literary |
light |
| neo-grid-bold |
Neo-Grid Bold |
neo-brutalist, neon yellow |
light |
| peoples-platform |
People's Platform |
activist, bold colors |
light |
| pin-and-paper |
Pin & Paper |
yellow paper, handwritten |
light |
| pink-script |
Pink Script |
hot pink, late-night luxury |
dark |
| playful |
Playful |
sun-warm, indie launch |
light |
| raw-grid |
Raw Grid |
neo-brutalist, thick borders |
light |
| retro-windows |
Retro Windows |
Windows 95, pixel nostalgia |
light |
| retro-zine |
Retro Zine |
riso-printed, beige/green |
light |
| sakura-chroma |
Sakura Chroma |
vintage Japanese cassette |
light |
| scatterbrain |
Scatterbrain |
post-it, pastel handwriting |
light |
| signal |
Signal |
navy, bone, muted-gold |
dark |
| soft-editorial |
Soft Editorial |
serif, warm paper, sage/blush |
light |
| stencil-tablet |
Stencil & Tablet |
stencil-cut, earth palette |
light |
| studio |
Studio |
black canvas, electric yellow |
dark |
| vellum |
Vellum |
navy, yellow italic serif |
dark |
Full details in beautiful-html-templates/index.json.
1---2name: slides3description: Generate high-quality HTML slide presentations with beautiful templates. Make sure to use this skill whenever the user mentions slides, presentation, PPT, deck, keynote, 演示文稿, or 幻灯片 — even if they don't explicitly ask for HTML or templates. This skill handles both polished multi-template workflows and fast self-contained themes. Use it for any request involving creating, building, or generating a presentation regardless of how the request is phrased.4license: MIT5---67# Interactive HTML Slide Generator89## Output Directory1011Generated decks are saved under `~/slides/<deck-name>/` by default. Before generating, the skill:12131. Expands `~` to the user's home directory142. Creates the output directory if it doesn't exist (`mkdir -p`)153. Creates `slides/<deck-name>/previews/` for Workflow A preview files164. Creates `slides/<deck-name>/` for the final deck1718**Custom root directory**: If the user specifies a path (e.g., "save it to `~/my-decks`" or "output to `/tmp/slides`"), use that instead of the default. Respect the user's intent — don't override a explicitly requested path.1920**Directory initialization example**:21```bash22mkdir -p ~/slides/my-deck/previews23mkdir -p ~/slides/my-deck/previews24```2526---2728## Two Workflows2930This skill supports **two workflows**:3132- **Workflow A — Beautiful HTML Templates** (recommended): 32 professionally-designed templates. Best for polished, visually distinctive decks. Asks about occasion and mood, presents 3 candidates, builds from real template HTML/CSS/JS.33- **Workflow B — Built-in CSS Themes**: 4 CSS themes (Cyberpunk, Corporate, Minimal, Nature). Fast, self-contained single-file output, no external dependencies.3435**Default to Workflow A** unless the user explicitly asks for a specific theme or wants a minimal/lightweight output.3637---3839## Workflow A — Beautiful HTML Templates (Recommended)4041### Step 1 — Clarify Taste4243Ask the user two questions before picking any template:4445> "Two quick questions before I pick a template:46> 1. **What's the occasion?** (e.g. product launch, research talk, brand manifesto, classroom, team review, etc.)47> 2. **What mood / vibe do you want?** (e.g. confident & editorial, warm & playful, dark & moody, quiet & literary, etc.)"4849Wait for the user's answer. Do not skip this — the user's stated taste reveals what no inferred brief can.5051### Step 2 — Read index.json and Shortlist 3 Candidates5253Read `skills/ppt/beautiful-html-templates/index.json`. Match the user's stated **occasion + mood** against each template's `mood`, `tone`, `formality`, `density`, and `scheme` fields.5455Pick **three templates** whose tones genuinely fit and are *different enough* from each other (e.g., don't pick three editorial templates — pick one editorial, one warmer alternative, and one wildcard).5657### Step 3 — Build Title-Slide Previews of Each Candidate5859For each of the 3 candidates:60611. Read `skills/ppt/beautiful-html-templates/templates/<slug>/template.html`622. Extract **the first slide only** (the cover/title slide)633. Replace placeholder content with **the user's actual topic/title/subtitle/author/date**644. Save as `~/slides/<deck-name>/previews/01-<slug>.html`655. Initialize `~/slides/<deck-name>/` for later use6667Open each preview with `open <path>` (macOS) and send the user a message:6869> "Three options to compare:70> 1. **<Template A>** — <one-line tone description>71> `~/slides/<deck-name>/previews/01-template-a.html`72> 2. **<Template B>** — <one-line tone description>73> `~/slides/<deck-name>/previews/02-template-b.html`74> 3. **<Template C>** — <one-line tone description>75> `~/slides/<deck-name>/previews/03-template-c.html`76>77> Which one feels right?"7879Wait for the user to pick.8081### Step 4 — Build the Full Deck8283Once the user picks:84851. Read `skills/ppt/beautiful-html-templates/templates/<slug>/template.html` in full862. Adapt every slide per the rules in [AGENTS.md](./beautiful-html-templates/AGENTS.md) §3 — preserve the design system, replace placeholder content873. Add/remove/split slides to match the user's content outline884. **If a layout is missing**, design it using the template's fonts, color palette, decorative vocabulary, and spacing rhythm — see [AGENTS.md](./beautiful-html-templates/AGENTS.md) §5895. Ensure the navigation (keyboard/click) works correctly906. Save the final deck as `~/slides/<deck-name>/index.html`9192### Step 5 — Open and Deliver9394Open the final deck with `open <path>`. Send:9596> "Done. Your deck is at `~/slides/<deck-name>/index.html` — opened in your browser."9798---99100## Workflow B — Built-in CSS Themes (Fallback)101102Use this when the user wants a specific theme or a self-contained minimal output.103104### Theme Selection105106| Theme | Style | When to Use |107|---|---|---|108| **Cyberpunk** | Dark, neon, futuristic | Default — tech, gaming, innovation |109| **Corporate** | Light, professional, blue/slate | Business, formal reports |110| **Minimal** | Black & white, Swiss style | Academic, stark, editorial |111| **Nature** | Cream/green, elegant serif | Warm, organic, literary |112113**Default to Cyberpunk** if no theme is specified.114115### Assembly Process1161171. **Read reference files**: the selected CSS theme + `templates/template.html` + `templates/scripts.js` + `templates/layouts.md`1182. **Load Template**: Start with `template.html`1193. **Inject CSS**: Replace `/* CSS_INJECTION_POINT */` with the selected theme CSS1204. **Inject JS**: Replace `/* JS_INJECTION_POINT */` with `scripts.js`, then replace `[TOTAL_SLIDES_COUNT]` with the actual number1215. **Generate Slides**: Create HTML using patterns from `layouts.md`1226. **Inject Slides**: Replace `<!-- SLIDES_INJECTION_POINT -->`1237. **Save**: `~/slides/<deck-name>/index.html`124125---126127## Overflow Prevention (Workflow B)128129Slides are fixed **1280×720px**. Overflow is hidden and will clip content silently.130131| Element | Max | If Exceeded |132|---|---|---|133| Bullets | **5** | Split into 2 slides |134| Cards | **3** | Use `.compact` or split |135| Code lines | **10** | Use `.scrollable` on content-area |136| Card body | 2 lines | Shorten |137138**Rules**:139- Max 5 bullets per slide, each max 1-2 lines140- Max 3 cards per grid slide141- Never stack bullets + cards + code on the same slide142- Use `.compact` class to reduce font sizes and spacing143- Prefer splitting over cramming144145---146147## Template Index Summary148149| Slug | Name | Mood | Scheme |150|---|---|---|---|151| 8-bit-orbit | 8-Bit Orbit | retro-tech, playful, cyberpunk | dark |152| biennale-yellow | Biennale Yellow | editorial, atmospheric, warm | light |153| block-frame | BlockFrame | neobrutalist, pastel-neon | mixed |154| blue-professional | Blue Professional | clean, modern, professional | light |155| bold-poster | Bold Poster | editorial, massive display | light |156| broadside | Broadside | dark editorial, orange accent | dark |157| capsule | Capsule | modular, pastel-pop | light |158| cartesian | Cartesian | quiet, warm, classical | light |159| cobalt-grid | Cobalt Grid | electric, graph-paper | dark |160| coral | Coral | cream/coral, oversized display | dark |161| creative-mode | Creative Mode | confident, multi-color | light |162| daisy-days | Daisy Days | cheerful, pastel, hand-drawn | light |163| editorial-tri-tone | Editorial Tri-Tone | dusty pink, mustard, burgundy | light |164| grove | Grove | forest-green, classical serif | dark |165| long-table | Long Table | cream/rust, supper-club | light |166| mat | Mat | dark sage, mid-century modern | dark |167| monochrome | Monochrome | ivory, all-black, literary | light |168| neo-grid-bold | Neo-Grid Bold | neo-brutalist, neon yellow | light |169| peoples-platform | People's Platform | activist, bold colors | light |170| pin-and-paper | Pin & Paper | yellow paper, handwritten | light |171| pink-script | Pink Script | hot pink, late-night luxury | dark |172| playful | Playful | sun-warm, indie launch | light |173| raw-grid | Raw Grid | neo-brutalist, thick borders | light |174| retro-windows | Retro Windows | Windows 95, pixel nostalgia | light |175| retro-zine | Retro Zine | riso-printed, beige/green | light |176| sakura-chroma | Sakura Chroma | vintage Japanese cassette | light |177| scatterbrain | Scatterbrain | post-it, pastel handwriting | light |178| signal | Signal | navy, bone, muted-gold | dark |179| soft-editorial | Soft Editorial | serif, warm paper, sage/blush | light |180| stencil-tablet | Stencil & Tablet | stencil-cut, earth palette | light |181| studio | Studio | black canvas, electric yellow | dark |182| vellum | Vellum | navy, yellow italic serif | dark |183184Full details in `beautiful-html-templates/index.json`.
yugasun