# slide-creator — Zero-Dependency HTML Presentations

01 / 10
Claude Code & OpenClaw Skill · v1.4

# slide-creator

Zero-dependency HTML presentations that run entirely in the browser.
No npm · No build tools · No Chromium downloads.

13
Design Presets
0
Dependencies
∞
Slides per deck
Philosophy

## Four principles behind every deck

📦

### Zero Dependencies

Single HTML files with inline CSS/JS. Open in any browser, share as one file, runs forever.

👁️

### Show, Don't Tell

People can't articulate design preferences in words. Generate 3 visual previews first — let them react.

✦

### Distinctive Design

No Inter fonts, no purple gradients, no predictable heroes. Every deck feels custom-crafted.

📐

### Viewport Fitting

Every slide fills exactly 100vh — no scrolling within a slide, ever. Content that overflows gets split.

Usage

## Three ways to create

A

#### Interactive — style discovery first

/slide-creator # answer 4 questions → see 3 previews → generate
B

#### Two-stage — plan first, generate second

/slide-creator --plan My AI startup pitch
/slide-creator --generate
C

#### PPT conversion — drop a .pptx, get a web deck

/slide-creator # auto-detects .pptx in current directory
Style Discovery

## The "wow moment" — show, don't tell

❓

#### 1 · Mood question

Impressed & confident? Excited & energized? Calm & focused?

🎨

#### 2 · 3 visual previews

Three mini title slides — real typography, real colors, real animations.

✅

#### 3 · Pick & generate

Choose A, B, C, or mix elements. Full deck generated immediately.

If you already know what you want, skip discovery: `/slide-creator --generate Blue Sky style pitch deck for my SaaS product`
Design Presets

## 13 curated styles — no generic AI aesthetics

Bold Signal
Keynotes
Electric Studio
Agency
Creative Voltage
Pitches
Dark Botanical
Premium
Blue Sky ✨
SaaS / Tech
Notebook Tabs
Reports
Pastel Geometry
Products
Split Pastel
Creative
Vintage Editorial
Personal
Neon Cyber
Tech
Terminal Green
Dev tools
Swiss Modern
Corporate
Paper & Ink
Storytelling
Featured Style

## Blue Sky — you're looking at it right now

#### Sky gradient background

`#f0f9ff → #e0f2fe`

#### Glassmorphism cards

rgba(255,255,255,0.7) · backdrop-filter: blur(24px)

#### 3 animated ambient orbs

Reposition per slide · 80px blur · spring transition

#### Spring-physics slide transitions

Horizontal track · cubic-bezier(0.22, 1, 0.36, 1)

#### SVG noise texture

feTurbulence overlay · adds tactile depth without photos

#### 40px tech grid

6% opacity · radial gradient mask · fades to edges

#### Cloud hero effect

Title slides only · CSS blur clusters · drift animation

#### Gradient headline text

`#1e3a8a → #3b82f6` · deep navy to bright blue

Content Rules

## Viewport fitting — the non-negotiable

Slide Type | Maximum Content
--- | ---
Title slide | 1 heading + 1 subtitle
Content slide | 1 heading + 4–6 bullets
Feature grid | 1 heading + 6 cards max (2×3 or 3×2)
Code slide | 1 heading + 8–10 lines
Quote slide | 1 quote (3 lines max) + attribution

When in doubt → split the slide. A presentation that scrolls mid-slide is broken. Content that overflows gets split across slides, not squished.
Export

## PPTX export — no Chromium download

1

#### Run the export command

/slide-creator --export pptx
2

#### Playwright uses your existing Chrome

Chrome/Edge/Brave already on your machine · no 300MB Chromium download

3

#### Pixel-perfect PPTX

Screenshots each slide at full resolution · assembles into a native .pptx file

Requirements: `pip install playwright python-pptx` · No Node.js needed.
Install

## One line to get started

#### Claude Code

git clone https://github.com/kaisersong/slide-creator ~/.claude/skills/slide-creator

Restart Claude Code · invoke with `/slide-creator`

#### OpenClaw · via ClawHub

clawhub install html-slide-creator

Auto-installs all dependencies · clawhub.ai/skills/html-slide-creator

Python 3 Pillow python-pptx playwright system Chrome
Ready to create

## Your next presentation
starts with one command

/slide-creator --plan My quarterly review
# → review PLANNING.md
/slide-creator --generate
# → presentation.html opens in browser
13 styles Style discovery PPTX export Zero dependencies

github.com/kaisersong/slide-creator · clawhub.ai/skills/html-slide-creator