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 slide1 heading + 1 subtitle
Content slide1 heading + 4–6 bullets
Feature grid1 heading + 6 cards max (2×3 or 3×2)
Code slide1 heading + 8–10 lines
Quote slide1 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