Generate a self-contained HTML slide presentation for meetings. Load when user says "create presentation", "meeting presentation", "html presentation", "slide deck", "make slides", "presentation for meeting", "create slides for". Saves HTML next to session context when possible — account projects (03-projects/accounts), lead folders (04-workspace/leads), or customer workspace — not only 04-workspace root. User describes use case, context, and goals; AI produces a polished dark-themed HTML deck with arrow-key navigation.
Generate a self-contained, browser-based HTML slide presentation from a user's meeting brief.
Do not default to 04-workspace/ root if a better anchor exists. Pick the save directory in this order:
User explicitly gives a path — Use it (create the directory if needed after confirming with the user when non-obvious).
Last interaction / session anchor — If the user @-referenced files, has open editor paths, or recent messages include a repo path, treat that as the anchor:
Customer account project — If the meeting is tied to an account under 03-projects/accounts/{id}-{name}/ (from conversation, open files, or overview/deal docs):
03-projects/accounts/{id}-{name}/04-outputs/ (create if missing). This matches how account deliverables (decks, reports) are stored.04-outputs/03-working/ for this thread and asks to keep everything there, you may save alongside those working files instead — prefer 04-outputs/ for anything you'd send externally.Lead (pre-account) — If the company matches a folder under 04-workspace/leads/, save into 04-workspace/leads/{company-slug}/ (same pattern as prospecting and call-analysis). Fuzzy-match company name to existing folder names.
Customer workspace — If context points at 04-workspace/customer/{account}/, save there.
Fallback — 04-workspace/ (repo root of workspace) or ask once: "No account/lead path found — save under 04-workspace/ or tell me the folder?"
Always state the chosen path in the outline step ("Saving to: …") so the user can correct it before you write the file.
Ask the user (if not already provided):
Do NOT ask all at once. If the user already described their use case in detail, extract what you can and only ask for missing critical info.
Before writing any HTML, outline the slides:
Proposed slides:
1. Title slide — [Title], [Subtitle], [Date]
2. Agenda — [N items with time estimates]
3. [Topic slide] — [Content type: timeline / table / two-col / highlight box]
4. ...
N. [Final slide] — [Closing / discussion / next steps]
Total: ~X slides, ~Y min estimated
Present this outline to the user for approval before generating.
Write a single self-contained .html file using the component library below. Key rules:
Structure:
<div class="slide"> (first slide gets class="slide title-slide active")data-slide="1", data-slide="2", etc.{Party A} x {Party B} or {Company} formatContent principles:
Navigation:
mkdir -p the target directory if it does not exist (especially 04-outputs/ on account projects).{context}-presentation-{YYYY-MM-DD}.htmlquarterly-review-presentation-2026-03-01.htmlopen -a "Google Chrome" "{filepath}" (macOS)Use these CSS classes and patterns when building slides. All styles are embedded in the HTML — no external dependencies.
Background: #0a0a0a
Text primary: #fff
Text secondary: #ccc
Text muted: #888 / #666 / #555
Accent: #8b9cf7 (purple-blue)
Success: #4ade80 (green)
Warning: #facc15 (yellow)
Danger: #f87171 (red)
Info: #818cf8 (indigo)
Surface: #111
Surface elevated: #141414 / #141420
Borders: #1a1a1a / #222
Title Slide:
<div class="slide title-slide active" data-slide="1">
<h3 style="margin-bottom: 20px;">{Label / Parties}</h3>
<h1>{Main Title}</h1>
<p class="subtitle">{One-line description}</p>
<p class="meta">{Date} · Confidential</p>
</div>
Agenda Slide:
<div class="slide" data-slide="2">
<h2>Agenda</h2>
<div class="agenda-item">
<span class="agenda-num">01</span>
<div class="agenda-content">
<h4>{Topic}</h4>
<p>{Brief description}</p>
</div>
<span class="agenda-time">{N} min</span>
</div>
</div>
Content Slide:
<div class="slide" data-slide="N">
<h3>{Section Label}</h3>
<h2>{Slide Title}</h2>
</div>
Table, Two-Col, Highlight Box, Timeline, Status Badges, Big Number, Next Steps List, Divider, Badge as documented.
<div class="logo-bar">{Label}</div>
<div class="slide-number"><span id="current">1</span> / <span id="total"></span></div>
<div class="nav-hint">← → arrow keys to navigate</div>
Full navigation JS (arrow keys, spacebar, touch swipe) and dark-themed CSS as documented.
Save with pattern {context}-presentation-{YYYY-MM-DD}.html under the directory from Output path (account 04-outputs/, lead folder, customer folder, directory of anchor file, or 04-workspace/ fallback), then open in Chrome.