Presenter Html

• Tab 1: Notes (always labeled "Notes")
• Tab 2: Talking Points (always labeled "Talking Points")
• Tab 3: Configurable (label read from notes.json tab3_field, default "References")

Keyboard Navigation

Notes Panel Behavior

• Panel slides in from the right edge (300px wide, dark background)
• Tab selection persists via localStorage — reopening the panel restores the last active tab
• Notes content is loaded from notes.json at build time and embedded in the HTML as a JavaScript object
• If notes.json is missing, the notes panel is omitted entirely (no empty panel)
• Talking points render as a bulleted list with "If asked:" items highlighted
• Tab 3 content renders based on type: lists for references/sources, paragraphs for objectives/decision points

Slide Rendering

Slides are embedded as full HTML, not images. This preserves:

• All text (selectable, accessible)
• CSS animations if present (not stripped like in PPTX conversion)
• SVG charts and diagrams at full resolution
• Responsive layout within the viewport

Each slide is wrapped in a container that enforces 16:9 aspect ratio (1280x720 logical pixels) and scales to fit the browser window via CSS transform.

┌─────────────────────────────────────────────────────────┐
│                                                         │
│   ┌─────────────────────────────────┐  ┌────────────┐  │
│   │                                 │  │ Notes      │  │
│   │         Slide Content           │  │ Tab 1 | 2 │  │
│   │         (16:9 scaled)           │  │            │  │
│   │                                 │  │ Walk the   │  │
│   │                                 │  │ audience   │  │
│   │                                 │  │ through... │  │
│   └─────────────────────────────────┘  └────────────┘  │
│                                                         │
│   ◄  Slide 3 of 12  ►          [N]otes [F]ullscreen    │
└─────────────────────────────────────────────────────────┘

Build Process

Input Files

Slide Ordering

The script determines slide order by:

1. Reading slides.json manifest if it exists (explicit order)
2. Falling back to alphabetical filename sort (numeric prefixes sort correctly)
3. Honoring --subset flag to include only specific slide numbers

CSS Isolation

Each slide's CSS is scoped to prevent cross-slide style bleed:

• All slide styles are prefixed with a slide-specific selector (.slide-N)
• Global resets are applied once at the document level
• The notes panel has its own isolated style scope

Script

scripts/build_presenter_html.py — pure Python stdlib. No Chrome, no Pillow, no third-party packages.

Usage

# Build presenter view from slides directory
python ${CLAUDE_SKILL_DIR}/scripts/build_presenter_html.py \
  --slides-dir ./slides \
  --output presenter.html

# Include speaker notes
python ${CLAUDE_SKILL_DIR}/scripts/build_presenter_html.py \
  --slides-dir ./slides \
  --notes-json notes.json \
  --output presenter.html

# Subset of slides (e.g., for a shortened version)
python ${CLAUDE_SKILL_DIR}/scripts/build_presenter_html.py \
  --slides-dir ./slides \
  --notes-json notes.json \
  --subset 1,2,3,7,8,12 \
  --output presenter-short.html

Integration with Other Skills

Reads From

Produces For

Limitations

• File size scales with slide count — a 20-slide deck with embedded images may produce a 5-10 MB HTML file. This is intentional (self-contained).
• CSS animations play on slide entry but do not reset on revisit without a page reload.
• The notes panel overlaps the slide area when open. On narrow screens, the slide content compresses. Designed for laptop/desktop, not mobile.

How Claude Should Use This Skill

1. Check for notes first — if notes.json does not exist, suggest running the notes skill before building the presenter view.
2. Verify slide order — if the user has reordered or removed slides, confirm the intended order before building.
3. Open the output — after building, suggest the user open the file in their browser and test keyboard navigation.
4. No server needed — the file works with file:// protocol. Do not suggest running a local server.