html-presentations

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: html-presentations
description: Create single-file HTML slide presentations with vanilla JS/CSS. Themed (terminal.css, catppuccin, nord), keyboard-navigable, with inline SVG diagrams and animations. Use when the user asks for an HTML presentation, slide deck, or single-file slides without a framework.
license: MIT
---

# HTML Presentations

Create self-contained HTML slide presentations. No frameworks, no CDN, no build step — one `.html` file you can open in any browser.

## Usage

Use this skill when the user asks for a presentation, slide deck, or slides and wants a single HTML file with vanilla HTML, CSS, and JavaScript. Not for reveal.js or framework-based presentations. **Before generating slides**, ask about goals, audience, and delivery mode (Step 0); use the answers to shape length, emphasis, and content density.

## Requirements

None. Output is a single `.html` file. Works in any modern browser (Chrome, Firefox, Safari, Edge).

## What It Does

1. **Single file** — All CSS, JS, SVG diagrams, and content in one `.html` file
2. **Themed** — Three color presets: terminal.css (default), catppuccin, nord
3. **Keyboard navigation** — Space/Right/k forward, Shift+Space/Left/j backward; **Escape** opens a visual grid of all slides to jump to any slide
4. **URL hash persistence** — The current slide index is stored in the URL hash (e.g. `#5`). Refreshing the page keeps you on the same slide; sharing a link with a hash opens that slide directly
5. **SVG diagrams** — Flowcharts, architecture diagrams, pipelines, comparisons — all themed via CSS custom properties
6. **SVG animations** — Path drawing, sequential fade-in, pulse/glow, flow — triggered when a slide becomes active

## How It Works

### Exemplars: what’s possible

Study these full presentations to see what the skill can produce:

1. **[assets/example-agent-skills-overview.html](assets/example-agent-skills-overview.html)** — Polished overview with spotlight layout, two-column grids, rich SVG diagrams, pill badges, progress nav, and overview grid. Use it as a quality benchmark for structure and visuals.

2. **[assets/canvas-chat-overview.html](assets/canvas-chat-overview.html)** — Product overview with **interactive, looping slide demos**:
   - **Mini-canvases** — Draggable nodes and live-updating SVG edges on the slide
   - **Chat & Reply** — Simulated typing, node reveal, edge draw; loops automatically
   - **Highlight & Branch** — Simulated text selection, excerpt node, source highlight; loops
   - **Multi-Select** — Simulated node selection, reply, “Thinking…”, merged node; loops
   - **Auto-Layout** — Simulated cursor moving to a toolbar “Layout” button, sunburst/rays on click, nodes animate from messy to clean; resets and loops
   - **Navigate** — Simulated cursor and scroll hint; semantic zoom in (full node content) and zoom out (summary view); loops
   - **URL hash persistence** — Refreshing keeps the current slide; `slidechange` dispatched with `setTimeout(0)` so demo scripts can run on load

Use the Canvas Chat overview when the user wants **automated, looping demos** (cursor, click effects, zoom, or step-by-step UI simulation) instead of static diagrams.

### Step 0: Ask the user (before building)

**Do not generate slides until you have clarified the following with the user.** Ask conversationally; one or two questions per message is fine. Use answers to decide length, emphasis, and how much text vs. diagrams to use.

**(a) Goals of the presentation**

If the user hasn't stated a clear goal, offer choices so they can pick or mix:

- **Pitch / persuade** — convince the audience of an idea, product, or decision
- **Explain / teach** — convey a concept, process, or system so the audience understands
- **Update / status** — share progress, results, or findings (e.g. project update, experiment results)
- **Reference / handout** — something to keep and skim later; dense but scannable
- **Overview / roadmap** — high-level structure or plan; minimal detail