slides

name	slides
description	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.
license	MIT
author	yugasun
homepage	https://github.com/yugasun/slides-skills
version	1.0.0
config	{"outputRoot":"~/slides","previewOpen":true}

Interactive HTML Slide Generator

Output Directory

Generated decks are saved under ~/slides/<deck-name>/ by default. Before generating, the skill:

1. Expands ~ to the user's home directory
2. Creates the output directory if it doesn't exist (mkdir -p)
3. Creates slides/<deck-name>/previews/ for Workflow A preview files
4. 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:

1. What's the occasion? (e.g. product launch, research talk, brand manifesto, classroom, team review, etc.)
2. 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:

1. Read skills/ppt/beautiful-html-templates/templates/<slug>/template.html
2. Extract the first slide only (the cover/title slide)
3. Replace placeholder content with the user's actual topic/title/subtitle/author/date
4. Save as ~/slides/<deck-name>/previews/01-<slug>.html
5. Initialize ~/slides/<deck-name>/ for later use

Open each preview with open <path> (macOS) and send the user a message:

"Three options to compare: