| name | slides |
| description | How to build presentation slide decks as HTML pages. Covers the slide format, canvas dimensions, and recommended libraries. |
| when_to_use | When the user asks for slides, a slide deck, a presentation, a pitch, or a deck. |
| version | 1 |
Building slide decks
A slide deck is a single HTML page with html_layout: "fixed-aspect" whose
<body> contains one <section class="slide"> per slide.
The canvas — 1920 × 1080 (16:9)
Every slide is a fixed 1920 × 1080 px canvas with overflow:hidden.
Stay inside a 64 px safe-area margin (working area 1792 × 952 px).
Nothing should scroll inside a slide; the viewer scales the canvas to fit
the viewport, and the exporter renders at native 1920×1080.
Required structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Deck title</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6/css/all.min.css" rel="stylesheet">
<style>
section.slide {
width: 1920px; height: 1080px;
overflow: hidden; position: relative;
box-sizing: border-box;
padding: 64px;
}
</style>
</head>
<body>
<section class="slide" data-type="cover">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="content">…</section>
<section class="slide" data-type="final">…</section>
</body>
</html>
Page types (data-type, optional but recommended)
cover — title slide.toc — table of contents.chapter — section divider.content — regular content slide.final — thanks / Q&A / contact slide.
These let presenter view and future templates target slides by role.
Typography
- Title text: ≥ 56 px.
- Body text: ≥ 28 px.
- Footnotes / captions: ≥ 20 px.
- Use the system font stack or one CDN font (Inter, Geist).
Avoid
@font-face — it adds latency in export.
Recommended libraries (all CDN-loadable)
| Need | Use |
|---|
| Charts | Chart.js for 1–2 charts per slide; ECharts for dashboards; D3 only when custom |
| Tables | Plain <table> + Tailwind classes. No DataTables. |
| Icons | Font Awesome 6 (CDN) or Lucide |
| Code | Shiki (preferred, vector-clean) or highlight.js |
| Math | KaTeX with auto-render (never MathJax inside iframe) |
| Diagrams | Mermaid via CDN, render once on load |
Render charts at load time (inline <script> in the slide) so screenshot
exporters capture them. Don't rely on interactivity in PPTX/PDF.
Anti-patterns
- More than ~40 words of body text per slide.
- Low contrast (white text on light backgrounds, etc.).
vh / vw units — use px. The canvas is fixed-pixel.- Images without
max-width: 100% (they'll overflow).
- Fixed-positioned elements depending on viewport (
position: fixed).
- Custom fonts loaded via
@font-face from arbitrary URLs.
- Multiple
<section class="slide"> nested inside each other.
Editing
Users can touch up text inline with the Edit button on the page.
Keep markup semantic — use <h1>, <h2>, <p>, <ul> rather than a
sea of <div>s — so the WYSIWYG editor's text selection and the
exporter's text-overlay extraction both work cleanly.
Export
The PDF export is vector text. The PPTX and Google Slides exports embed
each slide as a high-DPI image plus an invisible text overlay so users
can select, copy, and search the text in PowerPoint / Keynote / Slides.
Don't ship interactive controls — they won't survive the export.
