# Slides > 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. - Skill: `yugasun/slides` (Agent Skill, multi-file: 127 files) - Install (CLI): `npx skillmds@latest add yugasun/slides` - Raw SKILL.md: https://api.skillmd.com/api/skills/yugasun/slides/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - License: MIT - Author: yugasun (https://skillmd.com/u/yugasun) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/yugasun/slides --- # Interactive HTML Slide Generator ## Output Directory Generated decks are saved under `~/slides//` 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//previews/` for Workflow A preview files 4. Creates `slides//` 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**: ```bash 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//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//previews/01-.html` 5. Initialize `~/slides//` for later use Open each preview with `open ` (macOS) and send the user a message: > "Three options to compare: > 1. **