Create Meeting Presentation (HTML)

Always state the chosen path in the outline step ("Saving to: …") so the user can correct it before you write the file.

Workflow

Step 1: Gather Context

Ask the user (if not already provided):

1. Meeting purpose — What's this meeting about? (e.g., project review, sales pitch, sprint retro, alignment call)
2. Audience — Who are you presenting to? (e.g., client CEO, internal team, investors)
3. Key points — What needs to be covered? List the main topics or talking points
4. Tone — Professional / casual / diplomatic / persuasive
5. Any data or files — Documents, metrics, timelines, or context files to pull from
6. Output location — Only ask if steps above did not yield a path (see Output path). Otherwise confirm the resolved directory in one short line.

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.

Step 2: Plan the Slide Structure

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.

Step 3: Generate the HTML

Write a single self-contained .html file using the component library below. Key rules:

Structure:

• Every slide is a <div class="slide"> (first slide gets class="slide title-slide active")
• Sequential data-slide="1", data-slide="2", etc.
• Logo bar text uses {Party A} x {Party B} or {Company} format
• Date and "Confidential" in the meta line on title slide

Content principles:

• Keep text concise — slides are for presenting, not reading
• Use tables for structured comparisons
• Use two-col layout for side-by-side concepts
• Use timeline for chronological events
• Use highlight-box for key callouts or important notes
• Use status badges for delivery/progress tracking
• Use big-number for impactful metrics

Navigation:

• Arrow keys (left/right) and spacebar
• Touch swipe support for mobile/tablet
• Slide counter in bottom-right

Step 4: Save and Open

1. mkdir -p the target directory if it does not exist (especially 04-outputs/ on account projects).
2. Save the file to the resolved location (see Output path) with a descriptive name:
   • Pattern: {context}-presentation-{YYYY-MM-DD}.html
   • Example: quarterly-review-presentation-2026-03-01.html
3. Open in Chrome: open -a "Google Chrome" "{filepath}" (macOS)
4. Confirm with user and ask if any slides need adjustment

Component Library

Use these CSS classes and patterns when building slides. All styles are embedded in the HTML — no external dependencies.

Theme

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

Slide Types

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} &middot; 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>

Content Components

Table, Two-Col, Highlight Box, Timeline, Status Badges, Big Number, Next Steps List, Divider, Badge as documented.

Fixed Elements

<div class="logo-bar">{Label}</div>
<div class="slide-number"><span id="current">1</span> / <span id="total"></span></div>
<div class="nav-hint">&#8592; &#8594; arrow keys to navigate</div>

JavaScript & CSS

Full navigation JS (arrow keys, spacebar, touch swipe) and dark-themed CSS as documented.

Guidelines

• Self-contained: no external dependencies
• 5-10 slides (12 max)
• Less text per slide
• Pull real data from any files provided
• Always show outline first, get approval before generating full HTML

Output

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.