/frontend-slides

name: frontend-slides
promoted_to: distinctive-frontend-design
description: "Browser-based HTML presentation generation."
user-invocable: false
agent: typescript-frontend-engineer
allowed-tools:
  - Read
  - Write
  - Bash
  - Grep
  - Glob
  - Edit
  - Task
  - Skill
routing:
  triggers:
    - HTML slides
    - browser presentation
    - web deck
    - reveal-style
    - viewport presentation
    - convert PPTX to web
    - convert PPTX to HTML
    - slides for a browser
    - kiosk presentation
    - interactive presentation keyboard
    - projector browser
  pairs_with:
    - typescript-frontend-engineer
  complexity: Medium
  category: frontend

Frontend Slides Skill

Generate browser-based HTML presentations as a single self-contained `.html` file. Three entry paths: new build from topic/notes, PPTX-to-HTML conversion, or enhancement of an existing HTML deck.

**Routing disambiguation**: When the user says only "slides" or "deck" without specifying format, ask exactly one question before proceeding: "Should this be an HTML file (opens in browser) or a PowerPoint file (.pptx)?" This skill only produces HTML — it converts an existing PPTX to HTML but cannot generate a new .pptx file.

Reference Loading Table

| Signal | Load These Files | Why | |--------|-----------------|-----| | Phase 3 (style selection) or Phase 4 (build) | `references/STYLE_PRESETS.md` | CSS base block, 12 named presets, mood mapping, density limits, validation breakpoints | | SlideController, keyboard nav, touch swipe, wheel scroll, Intersection Observer, reveal animation | `references/slide-controller.md` | Canonical JS implementation, `navigating` guard, wheel debounce, IO reveal pattern, failure modes with detection commands | | PPTX, `.pptx`, python-pptx, convert slides, extract slides | `references/pptx-conversion.md` | Safe extraction loop, notes guard, GROUP shape recursion, base64 image embedding, error-fix mappings |

Instructions

Phase 1: DETECT

Identify which of the three paths applies:

| Path | Signal | Action | |------|--------|--------| | **New build** | User provides topic, outline, or notes -- no existing file | Proceed to Phase 2 to gather content | | **PPTX conversion** | User provides a `.pptx` file path | Extract with `python-pptx`; collect slides, notes, and asset order; then proceed to Phase 3 | | **HTML enhancement** | User provides an existing `.html` deck | Read the file; identify what needs improving; skip to Phase 4 |

**GATE 1**: Do not proceed without identifying the path. If the input is ambiguous (e.g., "make me a deck" with no file and no topic), ask one question to resolve it.

---

Phase 2: DISCOVER CONTENT

Ask exactly three questions -- no more:

1. What is the purpose of this presentation? (e.g., pitch, tutorial, conference talk, internal review) 2. How many slides? (approximate is fine) 3. What is the content state? (bullet points, full prose, raw notes, nothing yet)

Collect or generate the content before touching any style decisions.

**GATE 2**: Content exists (or the user has confirmed topic-only intent with an explicit "I'll provide content as we go") before Phase 3 begins. Do not start style work with no content direction.

---

Phase 3: DISCOVER STYLE

**Load `skills/frontend/frontend-slides/references/STYLE_PRESETS.md` now.**

Two sub-paths:

**Sub-path A -- User names a preset directly**: Skip previews. Confirm the preset name exists in STYLE_PRESETS.md. Proceed to Phase 4.

**Sub-path B -- User does not know the preset**: Ask for mood using exactly these four options: impressed / energized / focused / inspired. Map the mood to candidate presets using the mood table in STYLE_PRESETS.md -- translate the user's mood description to a preset name rather than asking them to choose from a list. Generate 3 single-slide HTML preview files in `.design/slide-previews/` -- one per candidate preset -- using real slide content (not placeholder lorem ipsum). Present the previews and ask the user to pick.

**GATE 3**: User has either named a preset from STYLE_PRESETS.md or selected one of the three previews. A vague direction like "make it look professional" is not sufficient -- a named preset must be confirmed before Phase 4. If no selection is made, regenerate previews with different presets. Never fall back to a generic purple gradient; presets exist to avoid exactly that.

---

Phase 4: BUILD

**Load `skills/frontend/frontend-slides/references/STYLE_PRESETS.md` if not already loaded.**

Build the presentation as a single `.html` file with all CSS and JS inline (no external CDN dependencies). Follow these rules:

1. **CSS base block verbatim**: Copy the mandatory CSS base block from STYLE_PRESETS.md exactly as written -- do not paraphrase or rewrite it. Apply the chosen preset's theme variables on top. The base block must be present character-for-character because the validation script checks for it.

2. **Viewport fit on every slide**: Every `.slide` element must have `height: 100vh; height: 100dvh; overflow: hidden`. When content overflows, split the slide into multiple slides -- never shrink text, add scrollbars, or set `min-height` that could allow growth past 100dvh. A slide with scrollable content is a web page, not a slide.

3. **Density limits**: Apply the density table from STYLE_PRESETS.md without exception. Maximum 6 bullets per content slide. If content needs a 7th bullet, split into two slides -- dense text is unreadable in presentation context.

4. **Responsive sizing**: All body text must use `clamp()` for font sizing. No fixed-height content boxes (`height: 300px` on inner elements). For images or code blocks that need height constraints, use `max-height: min(Xvh, Ypx)` with `overflow: hidden`.

5. **CSS negation rule**: Never write `-clamp(...)` -- browsers silently compute it to `0`, causing text to disappear. Always write `calc(-1 * clamp(...))` when a negative value is needed.

6. **JS controller class**: Implement `SlideCon