Presentations

1920x1080 HTML slide decks. Inter font, D3.js, and Chart.js pre-loaded.

SCRIPT=~/.opencode/skills/presentations/presentation.ts

Commands

bash

# Create a slide (content = HTML body only, no html/head/body tags)
bun run "$SCRIPT" create_slide '{"presentation_name":"my-deck","slide_number":1,"slide_title":"Intro","content":"<div style=\"...\">...</div>","presentation_title":"My Deck"}'

# List slides
bun run "$SCRIPT" list_slides '{"presentation_name":"my-deck"}'

# Delete a slide
bun run "$SCRIPT" delete_slide '{"presentation_name":"my-deck","slide_number":2}'

# List all presentations
bun run "$SCRIPT" list_presentations

# Delete a presentation
bun run "$SCRIPT" delete_presentation '{"presentation_name":"my-deck"}'

# Validate dimensions (Playwright)
bun run "$SCRIPT" validate_slide '{"presentation_name":"my-deck","slide_number":1}'

# Export to PDF
bun run "$SCRIPT" export_pdf '{"presentation_name":"my-deck"}'

# Export to PPTX
bun run "$SCRIPT" export_pptx '{"presentation_name":"my-deck"}'

# Generate viewer HTML (no server)
bun run "$SCRIPT" preview '{"presentation_name":"my-deck"}'

# Start on-demand viewer server (port 3210 by default)
bun run "$SCRIPT" serve '{"port":3210}'

Viewer Server

The viewer is not a persistent background service. Start it on-demand with the serve action when you need to preview slides:

bash

bun run "$SCRIPT" serve '{"port":3210}'

This starts a Bun server on port 3210 that serves all presentations under the presentations/ directory. When you need it to keep running, launch the same command in pty_spawn.

URL scheme:

http://localhost:3210/ — index listing all presentations
http://localhost:3210/presentations/<name>/ — viewer for that deck
http://localhost:3210/presentations/<name>/slide_01.html — raw slide file
http://localhost:3210/presentations/<name>/download/pdf — export and download PDF
http://localhost:3210/presentations/<name>/download/pptx — export and download PPTX

The viewer includes PDF and PPTX download buttons by default. They call the served /download/pdf and /download/pptx routes, export the current deck on demand, and return a browser download. For script-only generation, keep using export_pdf and export_pptx.

After starting the server, show the URL to the user via show:

show(action="show", type="url", url="http://localhost:3210/presentations/<name>/", title="Slide Preview")

Slide HTML Rules

content is the <body> content only — wrapper injected automatically
Canvas: 1920×1080px, box-sizing: border-box, max 40px padding
Inter pre-loaded. D3.js v7 + Chart.js 3.9.1 loaded async
Wrap Chart.js init in window.addEventListener('load', () => { ... })
Images → presentations/images/ → reference as ../images/filename

Layout Patterns

Title slide:

html

<div style="width:1920px;height:1080px;background:linear-gradient(135deg,#1e1b4b,#312e81);
     color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
     box-sizing:border-box;padding:100px;text-align:center;">
  <div style="font-size:24px;color:#a5b4fc;letter-spacing:4px;text-transform:uppercase;margin-bottom:32px;">SUBTITLE</div>
  <h1 style="font-size:80px;font-weight:800;margin:0;line-height:1.1;">Title</h1>
</div>

Two column:

html

<div style="width:1920px;height:1080px;background:#0f172a;color:#f8fafc;
     display:grid;grid-template-columns:1fr 1fr;gap:80px;
     box-sizing:border-box;padding:80px;align-items:center;">
  <div><!-- left --></div><div><!-- right --></div>
</div>

Typography: Title 64–80px/700+, Subtitle 36–48px, Body 28–36px, min 18px

Workflow

create_slide × N → validate_slide → serve → show viewer URL → user can download PDF/PPTX from viewer