presentation-building

Presentation Builder

Create polished, single-file HTML slide presentations optimised for widescreen and fullscreen delivery.

When to Use

Use this skill when asked to:

• create a new presentation from scratch
• add, edit, reorder, or remove slides
• fix layout, overflow, or fullscreen rendering issues
• add or modify optional addons (e.g. the vertical timeline navigation)
• create card grids, comparison layouts, or diagrams
• embed images, tweets, or interactive elements
• refine typography, spacing, or visual consistency across slides

Architecture Overview

Each presentation is a single index.html file containing all markup, CSS, and JavaScript inline. No build step is required. Assets (images) live in an attachments/ directory alongside the HTML file.

presentation/
  index.html          # The entire presentation
  attachments/         # Images referenced by slides
    3.png
    ...

Self-contained addon reference files live under references/addons/. Each addon bundles the CSS, HTML, and JS required to extend the base skeleton.

Key Technical Decisions

• Single file — everything in one HTML file for portability
• No frameworks — vanilla HTML, CSS, and JS only
• Dark theme — dark background with light text, always
• Vertical scroll — slides are full-viewport <section> elements stacked vertically
• Addon-based extensions — optional features (e.g. timeline navigation) are self-contained addon files that merge into the base skeleton
• Responsive by default — clamp() throughout; slides work on most screens, optimised for widescreen (16:9 to ultrawide)
• Fullscreen support — press F to toggle; dense slides use fit-wide auto-scaling

Design System

Colour Palette

:root {
  --bg: #0a0a12;
  --surface: #12121e;
  --surface-alt: #181828;
  --border: #1e1e30;
  --text: #e8e8f0;
  --text-muted: #8888a0;
  --accent: #4ecdc4; /* Teal — primary accent */
  --accent-dim: rgba(78, 205, 196, 0.15);
  --red: #ff6b6b;
  --yellow: #ffd93d;
  --purple: #a78bfa;
  --blue: #60a5fa;
  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}