Slide Creator
Generate zero-dependency HTML presentations that run entirely in the browser.
Core Philosophy
| Principle |
Description |
| Zero Dependencies |
Single HTML files with inline CSS/JS. No npm, no build tools. |
| Show, Don't Tell |
Generate visual style previews; design preferences emerge from seeing options. |
| Distinctive Design |
Avoid generic AI aesthetics (Inter font, purple gradients, predictable heroes). |
| Viewport Fitting |
Slides fit exactly in the viewport. Overflowing content gets split, not squished. |
| Plan Before Generate |
--plan creates outline; --generate produces HTML from it. |
Generation Contract (Non-Negotiable)
Every generated HTML file MUST include:
- Presentation Mode — F5 / ▶ button, fullscreen scaling, PresentMode class
- Edit Mode — top-left hotzone, ✏ Edit toggle, contenteditable on all text, notes panel
Command Routing
| Command |
What to Load |
What to Do |
--plan [prompt] |
planning-template.md |
Create PLANNING.md. Stop — no HTML. |
--generate |
html-template.md + style file + base-css.md |
Read PLANNING.md, generate HTML. |
| No flag (interactive) |
workflow.md + html-template.md |
Follow Phase 0–5. |
| Content + style given directly |
html-template.md + style file + base-css.md |
Generate immediately — no Phase 1/2. |
Content-Type → Style Hints
| Content Type |
Suggested Styles |
| Data report / KPI dashboard |
Data Story, Enterprise Dark, Swiss Modern |
| Business pitch / VC deck |
Bold Signal, Aurora Mesh, Enterprise Dark |
| Developer tool / API docs |
Terminal Green, Neon Cyber, Neo-Retro Dev Deck |
| Research / thought leadership |
Modern Newspaper, Paper & Ink, Swiss Modern |
| Creative / personal brand |
Vintage Editorial, Split Pastel, Neo-Brutalism |
| Product launch / SaaS |
Aurora Mesh, Glassmorphism, Electric Studio |
| Education / tutorial |
Notebook Tabs, Paper & Ink, Pastel Geometry |
| Chinese content |
Chinese Chan, Aurora Mesh, Blue Sky |
| Hackathon / indie dev |
Neo-Retro Dev Deck, Neo-Brutalism, Terminal Green |
Style Reference Files
| Style |
File |
| Blue Sky |
blue-sky-starter.html (full base) |
| Aurora Mesh |
aurora-mesh.md |
| Chinese Chan |
chinese-chan.md |
| Data Story |
data-story.md |
| Enterprise Dark |
enterprise-dark.md |
| Glassmorphism |
glassmorphism.md |
| Neo-Brutalism |
neo-brutalism.md |
| All other styles |
STYLE-DESC.md |
For AI Agents
# From a topic or notes
/slide-creator Make a pitch deck for [topic]
# From a plan file (skip interactive phases)
/slide-creator --generate # reads PLANNING.md automatically
# Two-step (review the plan before generating)
/slide-creator --plan "Product launch deck for Acme v2"
# (edit PLANNING.md if needed)
/slide-creator --generate
# Export to PPTX after generation
/kai-html-export presentation.html # image mode (pixel-perfect)
/kai-html-export --mode native presentation.html # native mode
Phase 0: Detect Mode
Before starting:
- PLANNING.md exists → read it, skip to Phase 3
- User provides source content + style directly → skip Phase 1/2, generate immediately
- User has a .ppt/.pptx file → Phase 4 (PPT conversion)
- User wants to enhance existing HTML → read and enhance
- Everything else → Phase 1 (Content Discovery)
When to Use This Skill
- Create HTML presentations from topics or notes
- Convert existing content to slides
- Design pitch decks, reports, tutorials
- Generate zero-dependency HTML slideshows
Related Skills
- report-creator — For long-form scrollable HTML reports (not slides)
- frontend-design — For interactive pages that go beyond slides
1---
2name: kai-slide-creator
3description: Generate zero-dependency HTML presentations that run entirely in the browser. Zero npm, no build tools. Includes presentation mode and edit mode.
4tags: [slides, presentation, html, generator]
5version: 1.0.0
6author: kaisersong
7source: https://clawhub.ai/kaisersong/kai-slide-creator
8---
9
10# Slide Creator
11
12Generate zero-dependency HTML presentations that run entirely in the browser.
13
14---
15
16## Core Philosophy
17
18| Principle | Description |
19|-----------|-------------|
20| **Zero Dependencies** | Single HTML files with inline CSS/JS. No npm, no build tools. |
21| **Show, Don't Tell** | Generate visual style previews; design preferences emerge from seeing options. |
22| **Distinctive Design** | Avoid generic AI aesthetics (Inter font, purple gradients, predictable heroes). |
23| **Viewport Fitting** | Slides fit exactly in the viewport. Overflowing content gets split, not squished. |
24| **Plan Before Generate** | `--plan` creates outline; `--generate` produces HTML from it. |
25
26---
27
28## Generation Contract (Non-Negotiable)
29
30Every generated HTML file MUST include:
31
321. **Presentation Mode** — F5 / ▶ button, fullscreen scaling, PresentMode class
332. **Edit Mode** — top-left hotzone, ✏ Edit toggle, contenteditable on all text, notes panel
34
35---
36
37## Command Routing
38
39| Command | What to Load | What to Do |
40|---------|-------------|------------|
41| `--plan [prompt]` | planning-template.md | Create PLANNING.md. Stop — no HTML. |
42| `--generate` | html-template.md + style file + base-css.md | Read PLANNING.md, generate HTML. |
43| No flag (interactive) | workflow.md + html-template.md | Follow Phase 0–5. |
44| Content + style given directly | html-template.md + style file + base-css.md | Generate immediately — no Phase 1/2. |
45
46---
47
48## Content-Type → Style Hints
49
50| Content Type | Suggested Styles |
51|--------------|-----------------|
52| Data report / KPI dashboard | Data Story, Enterprise Dark, Swiss Modern |
53| Business pitch / VC deck | Bold Signal, Aurora Mesh, Enterprise Dark |
54| Developer tool / API docs | Terminal Green, Neon Cyber, Neo-Retro Dev Deck |
55| Research / thought leadership | Modern Newspaper, Paper & Ink, Swiss Modern |
56| Creative / personal brand | Vintage Editorial, Split Pastel, Neo-Brutalism |
57| Product launch / SaaS | Aurora Mesh, Glassmorphism, Electric Studio |
58| Education / tutorial | Notebook Tabs, Paper & Ink, Pastel Geometry |
59| Chinese content | Chinese Chan, Aurora Mesh, Blue Sky |
60| Hackathon / indie dev | Neo-Retro Dev Deck, Neo-Brutalism, Terminal Green |
61
62---
63
64## Style Reference Files
65
66| Style | File |
67|-------|------|
68| Blue Sky | blue-sky-starter.html (full base) |
69| Aurora Mesh | aurora-mesh.md |
70| Chinese Chan | chinese-chan.md |
71| Data Story | data-story.md |
72| Enterprise Dark | enterprise-dark.md |
73| Glassmorphism | glassmorphism.md |
74| Neo-Brutalism | neo-brutalism.md |
75| All other styles | STYLE-DESC.md |
76
77---
78
79## For AI Agents
80
81```bash
82# From a topic or notes
83/slide-creator Make a pitch deck for [topic]
84
85# From a plan file (skip interactive phases)
86/slide-creator --generate # reads PLANNING.md automatically
87
88# Two-step (review the plan before generating)
89/slide-creator --plan "Product launch deck for Acme v2"
90# (edit PLANNING.md if needed)
91/slide-creator --generate
92
93# Export to PPTX after generation
94/kai-html-export presentation.html # image mode (pixel-perfect)
95/kai-html-export --mode native presentation.html # native mode
96```
97
98---
99
100## Phase 0: Detect Mode
101
102Before starting:
103- PLANNING.md exists → read it, skip to Phase 3
104- User provides source content + style directly → skip Phase 1/2, generate immediately
105- User has a .ppt/.pptx file → Phase 4 (PPT conversion)
106- User wants to enhance existing HTML → read and enhance
107- Everything else → Phase 1 (Content Discovery)
108
109---
110
111## When to Use This Skill
112
113- Create HTML presentations from topics or notes
114- Convert existing content to slides
115- Design pitch decks, reports, tutorials
116- Generate zero-dependency HTML slideshows
117
118---
119
120## Related Skills
121
122- **report-creator** — For long-form scrollable HTML reports (not slides)
123- **frontend-design** — For interactive pages that go beyond slides
wentorai