html-presentation

これはレビュー時に保存された抜粋です。完全で最新の内容は外部ソースを確認してください。

---
name: html-presentation
description: 'Converts documents, outlines, or notes into self-contained HTML slide decks with horizontal (Reveal.js) or vertical scroll navigation and multiple themes. Triggers on: "create a presentation", "slide deck", "pitch deck", "HTML presentation", "web-based slides", "reveal.js deck", "convert document into slides".'
metadata:
  version: 1.1.1
  category: visualization
  tags: [slides, presentation, reveal-js, html]
  difficulty: intermediate
---

# HTML Presentation Skill

Convert documents, outlines, or freeform content into polished, self-contained HTML slide presentations with keyboard and scroll navigation.

## When This Skill Triggers

- User provides a document and asks for a "presentation", "slides", or "deck" as HTML
- User asks to convert notes/outline/content into browser-presentable slides
- User wants a Reveal.js or scroll-based HTML presentation
- User references wanting to present from a browser rather than PowerPoint

## Step 0: Gather Requirements

Before generating anything, check whether the user has specified the following. If any are missing, ask for clarification in a single concise message. Do NOT ask more than once — use sensible defaults for anything the user declines to specify.

**Required context (ask if missing):**

| Parameter                  | What to ask                                                                                                                                                                                                                  | Default if not specified            |
| -------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| **Navigation mode**        | "Should slides go left-to-right (horizontal) or top-to-bottom (vertical scroll)?"                                                                                                                                            | `horizontal`                        |
| **Theme**                  | "Which visual style? Options: `dark-editorial` (dark bg, serif headlines, editorial feel), `light-minimal` (clean white, sans-serif), `corporate` (navy/white, professional), `hacker` (terminal green-on-black, monospace)" | `dark-editorial`                    |
| **Audience & tone**        | "Who is this for? (e.g., investors, engineers, conference talk, internal team)"                                                                                                                                              | Infer from content                  |
| **Slide count preference** | "Roughly how many slides?"                                                                                                                                                                                                   | Auto-determine from content density |
| **Branding**               | "Any logo text, tagline, or accent color to use in the header?"                                                                                                                                                              | None                                |
| **CTA / closing**          | "Any call-to-action, links, or contact info for the final slide?"                                                                                                                                                            | None                                |

If the user provides a document and says something like "make this a presentation", ask all missing parameters in one shot. If they say "just make it look good", use defaults and proceed.

## Step 1: Analyze the Source Document

Read the uploaded document or provided content. Identify:

1. **Logical sections** — these become slides or slide groups
2. **Key dat