slide-creator

What this skill does

# Slide Creator

Generate zero-dependency HTML presentations that run entirely in the browser. This skill guides users from raw ideas to a polished, animated slide deck — using visual style discovery ("show, don't tell") to nail the aesthetic before writing a line of code.

## Core Philosophy

1. **Zero Dependencies** — Single HTML files with inline CSS/JS. No npm, no build tools.
2. **Show, Don't Tell** — People can't articulate design preferences until they see options. Generate visual previews rather than asking abstract questions like "do you want minimalist or bold?"
3. **Distinctive Design** — Avoid generic AI aesthetics (Inter font, purple gradients, predictable heroes). Every deck should feel custom-crafted.
4. **Viewport Fitting** — Slides must fit exactly in the viewport with no scrolling. Content that overflows gets split across slides, not squished. A presentation that scrolls mid-slide is broken — this is why we enforce density limits.
5. **Plan Before Generate** — For complex decks, `--plan` creates a PLANNING.md outline first; `--generate` then produces HTML. Separating thinking from execution leads to better structure and less backtracking.

## Command Flags

Parse the invocation to determine mode:

- **`--plan [prompt]`** — Planning mode. Inspect `resources/`, analyze the prompt, create `PLANNING.md`. **Stop — do NOT generate HTML.**
- **`--generate [instructions]`** — Generation mode. Read `PLANNING.md` if present (skip Phase 1/2 questions), then generate HTML.
- **`--export pptx [--scale N]`** — Export the most recently modified HTML as PPTX via the bundled Python script. Requires Python 3 + `pip install playwright python-pptx`. No Node.js required.
- **No flag** — Auto-detect mode (Phase 0).

---

## Planning Mode (`--plan`)

1. Scan `resources/` — read text/markdown files, note images. Tell the user what was found (or "Planning from prompt only" if empty).
2. Extract: topic, audience, tone, language, slide count, goals from the prompt.
3. Draft the plan following [references/planning-template.md](references/planning-template.md).
4. Save as `PLANNING.md` in the working directory.
5. Present slide count, structure, and key decisions. Ask for approval.
6. **Stop. Do NOT generate HTML.**

---

## Export Mode (`--export pptx`)

1. Find `*.html` in current directory (prefer most recently modified).
2. Run: `python3 <skill-path>/scripts/export-pptx.py <presentation.html> [output.pptx]`
3. Report the PPTX file path and slide count.

The script uses Playwright with the user's **existing system Chrome** (`--channel chrome` flag, no Chromium download). It captures pixel-perfect screenshots of each slide and assembles them into a PPTX. Only `pip install playwright python-pptx` required — no Node.js, no 300MB browser download. If system Chrome is not found, the script will report an error and ask the user to install Chrome.

---

## Phase 0: Detect Mode

Determine what the user wants:

- **Mode A — New Presentation:** Check for `PLANNING.md` first. If it exists, read it as source of truth and jump directly to Phase 3 — skip Phase 1/2.
- **Mode B — PPT Conversion:** User has a `.ppt/.pptx` file → go to Phase 4.
- **Mode C — Enhance Existing:** Read the existing HTML, understand its structure, then enhance. When adding content, always check viewport fit — if adding would overflow a slide, split the content rather than cramming it in. Proactively split and inform the user.

**Content-type → Style hints** (use when user hasn't chosen a style):

| 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 |

---

## Phase 1: Content Discovery

**First, silently scan for a `resources/` folder.** If found, read text/markdown files and note images as background context. Don't ask the user to take any action.

Then gather everything in a **single AskUserQuestion call with all 5 questions at once** — collecting everything before submitting avoids back-and-forth.

- **Purpose** (single select): Pitch deck / Teaching+Tutorial / Conference talk / Internal presentation
- **Length** (single select): Short 5-10 / Medium 10-20 / Long 20+
- **Content** (single select): All content ready / Rough notes / Topic only
- **Images** (single select): No images / ./assets / Other (user types path)
- **Inline Editing** (single select): Yes — edit text in-browser, auto-save (Recommended) / No — presentation only

> **Default:** Always include inline editing unless user explicitly selects "No". When `--generate` skips Phase 1, include inline editing by default.

If user has content, ask them to share it after submitting the form.

**Language:** Detect from the user's message — never default to a fixed language. Maintain the detected language throughout all slide text including labels, CTAs, and captions. English may appear as secondary annotation text only when the style calls for it.

### Image Evaluation

Skip if user chose "No images." Text-only decks are fully first-class — CSS-generated gradients, shapes, and typography create compelling visuals without any images.

If images are provided:

1. `ls` the folder, then use Read (multimodal) to view each image.
2. For each image: mark `USABLE` or `NOT USABLE` (with reason: blurry, irrelevant, broken) + what it represents + dominant colors + shape.
3. Build a slide outline that co-designs text and images from the start. This is not "plan slides, then fit images in after." Example: 3 usable product screenshots → 3 feature slides anchored by those screenshots.
4. Present the evaluation and proposed outline, then confirm via AskUserQuestion (Looks good → Style B / Adjust images / Adjust outline).

---

## Phase 2: Style Discovery

Most people can't articulate design preferences in words. Generate 3 mini visual previews and let them react — this is the "wow moment" of the skill.

### Style Path

Ask via AskUserQuestion:
- **"Show me options"** → ask mood question → generate 3 previews based on answer
- **"I know what I want"** → show preset picker (Bold Signal / Blue Sky / Modern Newspaper / Neo-Retro Dev Deck — with "Other" option for all 21 presets)

**Before showing presets, silently scan `<skill-path>/themes/` for subdirectories.**
Skip any directory whose name starts with `_` (those are examples/templates, not real themes).
Each remaining subdirectory with a `reference.md` is a custom theme. Append them to the preset list as `Custom: <folder-name>` entries. If any custom themes exist, mention them first: "I also found N custom theme(s) in your themes/ folder."

**Available Presets** (full details in [STYLE-DESC.md](STYLE-DESC.md)):

| Preset | Vibe | Best For |
|--------|------|----------|
| Bold Signal | Confident, high-impact | Pitch decks, keynotes |
| Electric Studio | Clean, professional | Agency presentations |
| Creative Voltage | Energetic, retro-modern | Creative pitches |
| Dark Botanical | Elegant, sophisticated | Premium brands |
| Blue Sky | Clean, airy, enterprise-ready | SaaS pitches, AI/tech decks |
| Notebook Tabs | Editorial, organized | Reports, reviews |
| Pastel Geometry | Friendly, approachable | Product overviews |
| Split Pastel | Playful, modern | Creative agencies |
| Vintage Editorial | Witty, personality-driven | Personal brands |
| Neon Cyber | Futuristic, techy | Tech startups |
| Terminal Green | Developer-focused | Dev tools, APIs |
| Swiss Modern |