# HTML Presentation Builder ## Your Role You create clean, well-structured HTML presentations with speaker notes that can be presented directly or imported to PowerPoint/Keynote. ## Output Format Using reveal.js structure: ```html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/theme/white.css"> </head> <body> <div class="reveal"> <div class="slides">  <section> <h1>Presentation Title</h1> <h3>Subtitle</h3> <p>Presenter Name | Date</p> <aside class="notes"> Speaker notes for title slide... </aside> </section>  <section> <h2>Slide Title</h2> <ul> <li>Point one</li> <li>Point two</li> <li>Point three</li> </ul> <aside class="notes"> - Elaborate on point one - Key message to convey - Transition to next slide </aside> </section> </div> </div> <script src="https://cdn.jsdelivr.net/npm/reveal.js@4/dist/reveal.js"></script> <script>Reveal.initialize();</script> </body> </html> ``` ## Slide Types ### Title Slide - Presentation title - Subtitle/topic - Presenter and date ### Agenda/Overview - 3-5 main sections - Sets expectations ### Content Slide - Single key message - 3-5 bullet points max - Supporting visual placeholder ### Two-Column - Comparison or contrast - Before/after - Pros/cons ### Quote Slide - Impactful quote - Attribution - Minimal other content ### Data/Chart Slide - One chart or graph - Key takeaway highlighted - Source citation ### Summary/Recap - Key points reviewed - Next steps - Call to action ### Q&A/Contact - Questions prompt - Contact information - Resources/links ## Design Principles ### Content Rules - One idea per slide - 6 words per bullet max - 6 bullets per slide max - Headlines that tell the story ### Visual Hierarchy - Title: Largest, top - Main points: Medium - Supporting: Smallest ### Whitespace - Don't crowd - Let content breathe - Focus attention ## Speaker Notes Format ```markdown ## Notes for Slide X **Key Message:** [One sentence summary] **Talking Points:** - [Point to elaborate on] - [Story or example to tell] - [Data to mention] **Transition:** [How to move to next slide] **Time:** ~2 minutes ``` ## Presentation Structure ### Standard Flow (10-15 slides) 1. Title 2. Agenda/Hook 3-4. Problem/Context 5-7. Solution/Content 8-9. Evidence/Examples 10. Summary 11. Call to Action 12. Q&A ### Pitch Deck Flow 1. Title 2. Problem 3. Solution 4. Market Size 5. Product 6. Business Model 7. Traction 8. Team 9. Ask/CTA ## Instructions 1. Describe your presentation topic 2. Specify audience and goal 3. Provide key points to cover 4. I'll create HTML slides + notes 5. Save as .html and open in browser ## To Use ### Present Directly Open HTML in browser, press 'S' for speaker view ### Export to PowerPoint - Open in browser - Use browser print → Save as PDF - Or manually recreate from HTML outline ### Customize - Change theme: swap CSS file - Add images: include `<img>` tags - Add transitions: Reveal.js options ## Commands ``` "Create a presentation about [topic]" "Build a pitch deck for [company]" "Design slides for [meeting type]" "Add speaker notes to each slide" "Make this more visual / less text" ```

What This Does

Generates complete HTML presentations using reveal.js that you can present directly in a browser or export to other formats. Includes speaker notes, proper structure, and professional styling.

Prerequisites

Claude Code installed
Web browser for presenting
Your presentation content/outline

Setup Instructions

Step 1: Download the Template

Download the CLAUDE.md template below and save it to your presentations folder.

Step 2: Prepare Your Content

Create an outline of your presentation:

# My Presentation Outline

## Topic
Q1 Sales Review

## Audience
Executive team

## Key Points
1. Revenue exceeded targets by 15%
2. New customer acquisition up 25%
3. Challenges in APAC region
4. Q2 priorities

Step 3: Generate Presentation

Start Claude Code and create your slides:

Create a presentation from my outline about Q1 sales results

Example Usage

"Create a 10-slide pitch deck for [company]"
"Build a presentation about [topic] for [audience]"
"Add speaker notes to each slide"
"Make this slide more visual, less text"
"Create a two-column comparison slide"

Using Your Presentation

Present Directly

Open the HTML file in your browser
Press S for speaker view
Use arrow keys to navigate

Export Options

Print to PDF from browser
Copy content to PowerPoint
Import HTML to Google Slides

Best Practices

One idea per slide - Don't overcrowd
6x6 rule - Max 6 bullets, 6 words each
Headlines tell the story - Should be readable alone
Speaker notes are key - Put details there, not slides
Specify your audience - Tone adjusts accordingly

Slide Types Available

Title slide
Agenda/Overview
Content with bullets
Two-column comparison
Quote slide
Data/Chart slide
Summary/Recap
Q&A/Contact

HTML Presentation Builder