HTML Slides
Create polished, interactive HTML presentation slides from a single prompt. Output is a self-contained HTML file with embedded CSS and JS — no dependencies needed.
Trigger
When the user asks to create a presentation, slides, deck, or similar. Examples: "make a presentation about X", "create slides for the meeting", "build a deck on Y".
Output
A single .html file saved to the user's specified location (default: a temp or output directory). The file is self-contained and can be opened directly in any browser.
Design Principles
- Professional and clean — avoid "AI-flavored" design. Use generous whitespace, strong hierarchy, and restrained color.
- Dark theme by default — dark backgrounds (#0f172a to #1e293b range), light text.
- One idea per slide — short headlines, supporting bullets or visuals. Never wall-of-text.
- Keyboard navigation — arrow keys, spacebar, or click to advance. Show slide counter.
- Responsive — works on projector (16:9), laptop screen, or tablet.
- Print-friendly — include
@media print styles for handout mode.
Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{Presentation Title}</title>
<style>
/* All styles inline — no external deps */
</style>
</head>
<body>
<div class="deck">
<div class="slide" id="slide-1">...</div>
<div class="slide" id="slide-2">...</div>
<!-- ... -->
</div>
<div class="slide-counter">1 / N</div>
<script>
/* Keyboard/click navigation, slide counter, transitions */
</script>
</body>
</html>
Slide Types
Support these slide layouts:
| Type |
Use |
| Title |
Opening slide — large title, subtitle, date/author |
| Section |
Section divider — large centered text |
| Content |
Headline + bullet points (3-5 max) |
| Two-Column |
Side-by-side content, comparison, before/after |
| Image |
Full-bleed image with caption (user provides URL or base64) |
| Quote |
Large quote with attribution |
| Data |
Key metrics, KPI cards, simple charts (CSS-only bar charts) |
| Timeline |
Horizontal or vertical timeline of events |
| Summary |
Key takeaways, action items, next steps |
Navigation JS
let current = 0;
const slides = document.querySelectorAll('.slide');
const counter = document.querySelector('.slide-counter');
function showSlide(n) {
slides.forEach(s => s.classList.remove('active'));
current = Math.max(0, Math.min(n, slides.length - 1));
slides[current].classList.add('active');
counter.textContent = `${current + 1} / ${slides.length}`;
}
document.addEventListener('keydown', e => {
if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);
if (e.key === 'ArrowLeft') showSlide(current - 1);
if (e.key === 'Home') showSlide(0);
if (e.key === 'End') showSlide(slides.length - 1);
});
document.addEventListener('click', e => {
if (e.clientX > window.innerWidth / 2) showSlide(current + 1);
else showSlide(current - 1);
});
showSlide(0);
CSS Foundation
- Slides:
width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
- Transitions:
opacity or transform with 0.3s ease
- Font stack:
-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif
- Accent color: Derive from topic (blue for tech, green for finance, orange for operations)
- Code blocks:
font-family: 'Fira Code', monospace; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 1.5rem;
Workflow
- Ask user for topic/content if not provided
- Outline the slide structure (titles only) and confirm with user
- Generate the full HTML file
- Save to disk and report the file path
- Offer to open in browser via Chrome DevTools MCP if available
1---2name: html-slides3description: HTML Slides — Create polished, interactive HTML presentation slides from a single prompt. Output is a self-contained HTML file. Triggers: 'create a presentation', 'make slides', 'build a deck'.4---56# HTML Slides78Create polished, interactive HTML presentation slides from a single prompt. Output is a self-contained HTML file with embedded CSS and JS — no dependencies needed.910## Trigger1112When the user asks to create a presentation, slides, deck, or similar. Examples: "make a presentation about X", "create slides for the meeting", "build a deck on Y".1314## Output1516A single `.html` file saved to the user's specified location (default: a temp or output directory). The file is self-contained and can be opened directly in any browser.1718## Design Principles1920- **Professional and clean** — avoid "AI-flavored" design. Use generous whitespace, strong hierarchy, and restrained color.21- **Dark theme by default** — dark backgrounds (#0f172a to #1e293b range), light text.22- **One idea per slide** — short headlines, supporting bullets or visuals. Never wall-of-text.23- **Keyboard navigation** — arrow keys, spacebar, or click to advance. Show slide counter.24- **Responsive** — works on projector (16:9), laptop screen, or tablet.25- **Print-friendly** — include `@media print` styles for handout mode.2627## Structure2829```html30<!DOCTYPE html>31<html lang="en">32<head>33 <meta charset="UTF-8">34 <meta name="viewport" content="width=device-width, initial-scale=1.0">35 <title>{Presentation Title}</title>36 <style>37 /* All styles inline — no external deps */38 </style>39</head>40<body>41 <div class="deck">42 <div class="slide" id="slide-1">...</div>43 <div class="slide" id="slide-2">...</div>44 <!-- ... -->45 </div>46 <div class="slide-counter">1 / N</div>47 <script>48 /* Keyboard/click navigation, slide counter, transitions */49 </script>50</body>51</html>52```5354## Slide Types5556Support these slide layouts:5758| Type | Use |59|------|-----|60| **Title** | Opening slide — large title, subtitle, date/author |61| **Section** | Section divider — large centered text |62| **Content** | Headline + bullet points (3-5 max) |63| **Two-Column** | Side-by-side content, comparison, before/after |64| **Image** | Full-bleed image with caption (user provides URL or base64) |65| **Quote** | Large quote with attribution |66| **Data** | Key metrics, KPI cards, simple charts (CSS-only bar charts) |67| **Timeline** | Horizontal or vertical timeline of events |68| **Summary** | Key takeaways, action items, next steps |6970## Navigation JS7172```javascript73let current = 0;74const slides = document.querySelectorAll('.slide');75const counter = document.querySelector('.slide-counter');7677function showSlide(n) {78 slides.forEach(s => s.classList.remove('active'));79 current = Math.max(0, Math.min(n, slides.length - 1));80 slides[current].classList.add('active');81 counter.textContent = `${current + 1} / ${slides.length}`;82}8384document.addEventListener('keydown', e => {85 if (e.key === 'ArrowRight' || e.key === ' ') showSlide(current + 1);86 if (e.key === 'ArrowLeft') showSlide(current - 1);87 if (e.key === 'Home') showSlide(0);88 if (e.key === 'End') showSlide(slides.length - 1);89});9091document.addEventListener('click', e => {92 if (e.clientX > window.innerWidth / 2) showSlide(current + 1);93 else showSlide(current - 1);94});9596showSlide(0);97```9899## CSS Foundation100101- Slides: `width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;`102- Transitions: `opacity` or `transform` with 0.3s ease103- Font stack: `-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`104- Accent color: Derive from topic (blue for tech, green for finance, orange for operations)105- Code blocks: `font-family: 'Fira Code', monospace; background: rgba(0,0,0,0.3); border-radius: 8px; padding: 1.5rem;`106107## Workflow1081091. Ask user for topic/content if not provided1102. Outline the slide structure (titles only) and confirm with user1113. Generate the full HTML file1124. Save to disk and report the file path1135. Offer to open in browser via Chrome DevTools MCP if available
aemerson-commits