/frontend-slides

name: frontend-slides
promoted_to: frontend
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.

Style Presets

Assemble CSS: `python3 skills/frontend/frontend-slides/scripts/assemble-styles.py --preset <name>`. Use `--list` for all 12, `--mood <word>` to match.

Templates: `templates/base.css` (mandatory base), `templates/presets/*.css` (preset `:root` variables).

| Preset | Mood | Use Case | |--------|------|----------| | obsidian-gold | impressed | executive briefings, boards | | arctic-minimal | focused | engineering, dev conferences | | carbon-ember | energized | product launches, pitches | | sage-paper | inspired | thought leadership, narrative | | void-neon | futuristic | dev tools, AI, hackathons | | slate-coral | contemporary | SaaS demos, sales | | chalk-board | educational | workshops, training | | glacier-blue | trusted | financial, legal, healthcare | | rose-noir | artistic | fashion, design portfolios | | solar-sand | warm | non-profit, community | | steel-wire | industrial | data science, DevOps | | lavender-mist | calm | wellness, meditation |

Slide Layouts

Assemble layout CSS: `python3 skills/frontend/frontend-slides/scripts/assemble-layouts.py --layouts title,content,code`. `--all` for everything, `--include-html` for HTML templates.

Each layout in `templates/layouts/` has paired `.html` + `.css`: title, content, grid, code, quote, image, section-break.

Controller Diagnostics

Assemble controller: `python3 skills/frontend/frontend-slides/scripts/assemble-controllers.py --core`. Add `--features speaker-notes,countdown-timer`.

| Symptom | Check | Fix | |---------|-------|-----| | Skips slides on keypress | `grep -c 'navigating'` | Add `navigating` guard to `go()` | | Trackpad jumps to end | `rg 'clearTimeout'` | 150ms debounce on wheel | | Animations never fire | `grep 'display.*none'` | Use `opacity:0` not `display:none` | | Swipe fires on scroll | `grep 'screenY'` | `abs(dy) > abs(dx)` guard | | Space scrolls page | `grep -A1 'Space'` | `e.preventDefault()` before `next()` |

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

Use the Style Presets table (above) to map mood to preset names.

Two sub-paths:

**Sub-path A -- User names a preset directly**: Skip previews. Confirm the preset name exists in the Style Presets table. 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 Style Presets table -- 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 the Style Presets table 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

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 `templates/base.css` 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