slide-creator

Google Slide Creator

Create professional, presentation-ready slides as standalone HTML files matching Google's internal presentation style. This skill is organized as a component library — pick a layout template, populate it with components, and wrap it in the presentation shell.

1. Output Format

The full presentation is a single HTML file containing all slides. Each slide is 1280×720px (16:9). The file includes built-in keyboard navigation (← → arrow keys), a slide counter, and smooth transitions. Open in any browser for presenting or screenshotting.

2. Mandatory Design System

Every slide MUST use these exact specifications.

Presentation Shell

Wrap all slides in a presentation container. Each .slide is hidden by default; only .slide.active is visible.

<div class="presentation">
  <div class="slide active"><!-- slide 1 --></div>
  <div class="slide"><!-- slide 2 --></div>
</div>
<div class="slide-counter">1 / 2</div>

body { background: #f8f9fa; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; }
.presentation { position: relative; }
.slide {
  width: 1280px; height: 720px; background: #ffffff; border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  padding: 48px 56px 40px; position: absolute; top: 0; left: 0;
  overflow: hidden; opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease; display: flex; flex-direction: column;
}
.slide.active { position: relative; opacity: 1; pointer-events: auto; }
.slide::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, #4285f4, #34a853, #fbbc04, #ea4335);
}

Navigation JavaScript

Always include at the bottom of <body>:

<script>
  const slides = document.querySelectorAll('.slide');
  const counter = document.querySelector('.slide-counter');
  let current = 0;
  function showSlide(n) {
    slides[current].classList.remove('active');
    current = (n + slides.length) % slides.length;
    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);
  });
</script>

Typography

Font: Google Sans (headings, labels) + Google Sans Text (body). Load via Google Fonts:

<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Text:wght@400;500&display=swap" rel="stylesheet">

Add Google Sans Mono when slides contain code blocks
Title (h1): 32–42px, font-weight 500, color #202124
Speaker line: 14px, color #5f6368, placed above h1
Subtitle: 15–17px, color #5f6368
Body text: 14–18px, color #3c4043
Section labels: 12–13px, uppercase, letter-spacing 0.5px, font-weight 500

Color Palette

Token	Value	Usage
text-primary	`#202124`	Headings, bold text
text-secondary	`#3c4043`	Body text
text-tertiary	`#5f6368`	Subtitles, labels, descriptions
text-muted	`#9aa0a6`	Captions, annotations
google-blue	`#1a73e8`	Links, highlighted labels, active states
google-green	`#34a853`	Success, positive, SOTA badges
google-yellow	`#fbbc04`	Caution, secondary highlights
google-red	`#ea4335`	Alerts, important badges
orange	`#e37400`	v2/future labels
border	`#e8eaed`	Card borders, dividers
border-light	`#dadce0`	Bullet dots, subtle borders
surface	`#f8f9fa`	Card backgrounds, diagram containers

Icons

Use inline SVG heroicons (outline style, stroke-based). Never use emojis. Standard icon size: 15–18px for chips, 18–22px for cards. Match stroke color to the section color context.

3. Layout Templates

Pick a layout template for each slide. These define the structural grid — components fill the zones.

Template A: Title + Left/Right Split

The most common layout. Left column has text, right column has a visual component.

┌─────────────────────────────────────────────────────┐
│ Speaker line                                        │
│ Title (h1)                                          │
│                                                     │
│  ┌─ left-col (flex:1) ─┐  ┌─ right-col (400-460) ─┐│
│  │  Bullets / text /    │  │  Diagram / code /     ││
│  │  comparison cards    │  │  chart / mockup       ││
│  └──────────────────────┘  └───────────────────────┘│
│ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │
└─────────────────────────────────────────────────────┘

.left-col { flex: 1 } — .right-col { flex: 0 0 400–460px }
Gap between columns: 44–60px

Template B: Title + Full-Width Body

Full-width visual below the header. Use for grids, timelines, architecture diagrams.

┌─────────────────────────────────────────────────────┐
│ Speaker / Title                                     │
│                                                     │
│  ┌───────────── full-width body ──────────────────┐ │
│  │  Grid / Timeline / Tool cards / Architecture   │ │
│  └────────────────────────────────────────────────┘ │
│ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │
└─────────────────────────────────────────────────────┘

Template C: Hero Title (No Header)

No header bar. Title + subtitle + list on the left, right visual. Use for opening/closing slides.

┌─────────────────────────────────────────────────────┐
│                                                     │
│  ┌─ left-col ──────────┐  ┌─ right-col ───────────┐│
│  │  Big Title (42px)   │  │  Code examples /      ││
│  │  Subtitle           │  │  hero visual          ││
│  │  Feature list       │  │                       ││
│  └─────────────────────┘  └───────────────────────┘│
│ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │
└─────────────────────────────────────────────────────┘

Template D: Side-by-Side Panels

Two equal-width panels for comparisons, before/after, or dual content.

┌─────────────────────────────────────────────────────┐
│ Speaker / Title                                     │
│                                                     │
│  ┌─ panel-left ────┐ ⟶  ┌─ panel-right ──────────┐│
│  │  OLD / Before   │    │  NEW / After            ││
│  │  (tinted bg)    │    │  (tinted bg)            ││
│  └─────────────────┘    └─────────────────────────┘│
│ ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬ │
└─────────────────────────────────────────────────────┘

4. Component Library

Pick components to fill the layout zones. Mix and match freely.

4.1 Diagram Components

Vertical Flow (Pipeline)

Numbered steps stacked vertically with CSS arrows connecting them. Best for: sequential processes, API lifecycles.

<div class="flow">
  <div class="flow-step stage-1">
    <div class="step-icon">1</div>
    <div class="step-text">
      <div class="step-title">Step Name</div>
      <div class="step-desc">Brief description</div>
    </div>
  </div>
  <div class="flow-arrow"></div>
  <div class="flow-step stage-2">...</div>
</div>

Wrap in .diagram-container (surface bg, border, rounded)
Step icons: 36px circle, Google colors per stage (.stage-1 blue, .stage-2 yellow, .stage-3 green, .stage-4 red)
Arrows: ::before for line (2px), ::after for triangle
Optional: .loop-badge positioned absolute for agentic loops
See: example-bullets-flow-diagram.html

Horizontal Pipeline

Circular icon nodes connected by horizontal arrows. Best for: request lifecycles, data flows.

<div class="pipeline">
  <div class="pipeline-step step-blue">
    <div class="step-circle"><svg>...</svg></div>
    <div class="step-label">Input</div>
    <div class="step-sublabel">Description</div>
  </div>
  <div class="pipeline-arrow"></div>
  <div class="pipeline-step step-green">...</div>
</div>

Circle: 64px, 3px colored border, white bg, SVG icon inside
Arrow: ::before for line (36px wide), ::after for triangle pointing right
Hover: scale(1.08) + subtle box-shadow
See: example-horizontal-pipeline.html

Hub & Spoke (Radial)

Central hub with nodes radiating outward. Best for: ecosystem views, tool relationships.

<div class="hub-spoke">
  <svg class="spoke-lines"><!-- dashed lines from center to each node --></svg>
  <div class="hub">Central Label</div>
  <div class="spoke-node spoke-1"><!-- positioned absolute  --></div>
  <div class="spoke-node spoke-2">...</div>
</div>

Hub: 120px circle, gradient bg, centered absolutely
Spokes: SVG <line> elements with stroke-dasharray="4 4"
Nodes: 130×68px cards, positioned with top/left/right/bottom, 6 positions around center
See: example-hub-spoke.html

Layered Architecture (Stacked Tiers)

Horizontal tiers stacked vertically with blocks inside each. Best for: system architecture, stack overviews.

<div class="architecture">
  <div class="arch-layer layer-app">
    <div class="layer-label">APP</div>
    <div class="layer-content">
      <div class="arch-block">
        <div class="block-icon icon-blue"><svg>...</svg></div>
        <div class="block-text">
          <div class="block-name">SDK Name</div>
          <div class="block-desc">Description</div>
        </div>
      </div>
    </div>
  </div>
  <div class="layer-connector"></div>
  <div class="arch-layer layer-api">...</div>
</div>

Layer: colored bg + border (blue/green/yellow/red), rotated side label via writing-mode: vertical-rl
Blocks: white cards inside each layer, flex items
Connector: down-pointing triangle centered between layers
See: example-layered-architecture.html

Swimlane Sequence

Multi-column sequence diagram with activity blocks crossing lanes. Best for: API call flows, interaction patterns, protocol sequences.

<div class="swimlane-container">
  <div class="lane-headers">
    <div class="lane-header client">Client</div>
    <div class="lane-header server">Server</div>
    <div class="lane-header tools">Tools</div>
  </div>
  <div class="seq-rows">
    <div class="seq-row">
      <div class="seq-step step-blue"><div class="step-num">1</div></div>
      <div class="seq-lanes">
        <div class="seq-lane">
          <div class="activity activity-blue">Action description</div>
        </div>
        <div class="seq-lane"></div>
      </div>
    </div>
  </div>
</div>

Headers: colored bottom border per lane
Grid: left label column (140px) + lanes (flex)
Activities: colored blocks with monospace code, positioned in the relevant lane
Arrows: absolute-positioned triangles between lanes (.arrow-right, .arrow-left)
See: example-swimlane-sequence.html

Horizontal Timeline

Event dots along a horizontal track with content below each stop. Best for: evolution, roadmap, release history.

<div class="timeline">
  <div class="timeline-item">
    <div class="timeline-dot dot-blue"><svg>...</svg></div>
    <div class="timeline-content">
      <div class="timeline-date">2024</div>
      <div class="timeline-title">Milestone</div>
      <div class="timeline-desc">Description</div>
      <span class="badge badge-ga">GA</span>
    </div>
  </div>
</div>

Track: ::before pseudo on .timeline (3px line, full width, top: 24px)
Dots: 48px circle with SVG icon, colored shadow, positioned above content
Content: centered text block below each dot
See: example-horizontal-timeline.html

4.2 Card Components

Numbered Card Grid (2×2 or 3-col)

Cards with big colored number badges. Best for: step-by-step guides, feature highlights.

<div class="card-grid"> <!-- grid-template-columns: 1fr 1fr -->
  <div class="num-card card-1">
    <div class="card-top">
      <div class="card-num">1</div>
      <div class="card-title">Step Name</div>
    </div>
    <div class="card-desc">Description</div>
    <div class="card-detail"><span class="mono">code_example()</span></div>
  </div>
</div>

Number badge: 40px rounded-square, Google color per card
Detail row: auto-pushed to bottom via margin-top: auto, border-top separator
See: example-numbered-card-grid.html

Before/After Comparison Panels

Side-by-side panels with contrasting tints. Best for: old vs new, problem vs solution.

<div class="compare-container">
  <div class="compare-panel panel-before">
    <div class="panel-header">
      <div class="panel-icon">✕ icon</div>
      <div class="panel-title">Old Way</div>
      <div class="panel-badge">OLD</div>
    </div>
    <ul class="panel-list"><li>Pain point with ✕ icon</li></ul>
    <div class="code-block">old code</div>
  </div>
  <div class="compare-arrow">→</div>
  <div class="compare-panel panel-after">
    <div class="panel-header">
      <div class="panel-icon">✓ icon</div>
      <div class="panel-title">New Way</div>
      <div class="panel-badge">NEW</div>
    </div>
    <ul class="panel-list"><li>Benefit with ✓ icon</li></ul>
    <div class="code-block">new code</div>
  </div>
</div>

Before: yellow tint (#fef7e0 bg), ✕ icons in orange
After: green tint (#e6f4ea bg), ✓ icons in green
Arrow circle between panels (40px, white bg with border)
See: example-before-after-comparison.html

Comparison Cards (Inline)

Lighter-weight side-by-side cards within a column. Good for pros/cons within a Template A layout.

<div class="h-layout">
  <div class="compare-card card-blue"><h3>Option A</h3><ul>...</ul></div>
  <div class="compare-card card-green"><h3>Option B</h3><ul>...</ul></div>
</div>

Tool Cards (3-col grid)

<div class="tool-grid"> <!-- grid-template-columns: repeat(3, 1fr) -->
  <div class="tool-card">
    <div class="tool-icon"><svg>...</svg><span class="tool-name">Name</span></div>
    <div class="tool-desc">Description</div>
    <div class="tool-code">{"type": "name"}</div>
  </div>
</div>

Info Chips (Bottom Bar)

Compact metric/status chips. Use as a footer row below diagrams.

<div class="info-chips">
  <div class="info-chip">
    <svg>icon</svg>
    <div class="chip-text"><strong>Label</strong> Description</div>
  </div>
</div>

4.3 Data Components

Code Blocks (Syntax-Highlighted)

Dark theme code blocks with manual <span> syntax highlighting.

.code-block {
  background: #2d2d2d; border-radius: 12px; padding: 20px 22px;
  font-family: 'Google Sans Mono', monospace; font-size: 13px; line-height: 1.65;
  white-space: pre; overflow-x: auto;
}

Syntax colors: .kw { color: #c792ea } (keywords), .fn { color: #82aaff } (functions), .st { color: #c3e88d } (strings), .op { color: #89ddff } (operators), .param { color: #f78c6c } (params/bools), .var { color: #eeffff } (variables), .cm { color: #9aa0a6 } (comments).

Flush Left: Code content inside <div class="code-block"> must be flush left in the HTML file (no outer indentation).
Compact Closing: Place the closing </div> on the same line as the final content to prevent trailing blank space.
Visibility Check: Ensure content fits within containers and does not wrap unreadably. Code blocks should scroll horizontally if needed.

Tables

<table class="data-table">
  <thead><tr><th>Column</th><th>Column</th></tr></thead>
  <tbody><tr><td>Value</td><td class="mono">code_value</td></tr></tbody>
</table>

Event tables (.event-table) use smaller text (11–12px) for dense data like streaming events.

Stat Cards (Benchmark Results)

Large number + name + badge. Score sizes: 28–32px bold. Color-code each benchmark differently.

Cost/Bar Charts

Horizontal bars on grey tracks with gradient fills. Include savings callout cards for key takeaways.

4.4 Text Components

Bullet List

<ul class="bullet-list">
  <li><strong>Key point</strong> — supporting detail</li>
</ul>

Dot: 8px circle via ::before, colored (blue default)
Gap: 14–16px between items

Chip Grid

<div class="feature-group">
  <div class="section-label blue"><span class="dot"></span>Category</div>
  <div class="chip-grid">
    <div class="chip chip-blue"><svg>icon</svg> Feature name <span class="badge badge-ga">GA</span></div>
  </div>
</div>

Chips: inline-flex, rounded, icon + text + optional badge
Color variants: .chip-blue, .chip-green, .chip-orange, .chip-red

Callout Box

<div class="callout callout-blue">
  <svg>icon</svg> <strong>Label:</strong> Message text with <code>inline code</code>.
</div>

Tinted background + border matching the color scheme
Variants: .callout-blue, .callout-green, .callout-orange

4.5 Badge System

.badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; }
.badge-ga     { background: #e6f4ea; color: #137333; }  /* GA, SOTA */
.badge-new    { background: #e8f0fe; color: #1a73e8; }  /* NEW, Preview */
.badge-v2     { background: #fce8e6; color: #c5221f; }  /* v2, EAP */
.badge-orange { background: #fef7e0; color: #e37400; }  /* Coming, Future */

5. Workflow

Read the user's notes/talking points
Plan the slide breakdown — identify how many slides are needed
For each slide: pick a Layout Template (A–D), then select Components to fill its zones
Prioritize visuals over text — slides should communicate visually. Every slide should have at least one visual component
Keep bullet points concise (one line each when possible, max 5 per slide)
Vary the layouts — don't use the same template for every slide. Mix Template A with B, C, D across the deck
Vary the visuals — use different diagram types across slides (pipeline on one, hub-spoke on another, cards on a third)
Build a single HTML file with all slides inside <div class="presentation">, all CSS in one <style> block, and the navigation <script> at the bottom
Save as <descriptive-name>-presentation.html in the user's working directory
Verify Layout Visibility: Always check the rendered UI (using browser or screenshots) to ensure content is not cut off, overlapping, or wrapping unreadably. Code blocks must use horizontal scrolling for long lines.

6. Reference Examples

Read these complete, working HTML slides to understand the exact implementation. Each is a self-contained 1280×720 slide:

Layout + Text Components

example-bullets-code-blocks.html — Template C hero title + feature list left, two syntax-highlighted Python code blocks right
example-bullets-chat-mockup.html — Template A with bullets (NEW: badges) left, Gemini chat UI mockup right
example-quote-testimonial.html — Template C variant without header, large quote mark visual + attribution
example-speaker-bio.html — Centered layout for profile intro, avatar, social icons, dot grid background
example-numbered-list-browser.html — Template A with numbered list left, browser window mockup right

Diagram Components

example-bullets-flow-diagram.html — Template A with vertical pipeline flow diagram + resilience info chips
example-horizontal-pipeline.html — Template B with horizontal left-to-right pipeline + detail chips below
example-hub-spoke.html — Template A with radial hub-and-spoke diagram (SVG spoke lines)
example-layered-architecture.html — Template B with 4-tier stacked architecture layers
example-swimlane-sequence.html — Template B with 3-lane swimlane sequence diagram
example-horizontal-timeline.html — Template B with horizontal timeline + summary chips
example-pipeline-stages.html — Template B with horizontal stage cards + arrow connectors
example-input-output-funnel.html — Template B with funnel diagram (SVG bezier curves)
example-stacked-category-rows.html — Template B with category bars + stacked items
example-agent-orchestrator.html — Template B with agent orchestrator flow diagram (SVG fork/join lines)
example-user-flow-agent.html — Horizontal user flow diagram for agent lifecycle (dynamic paths)

Card + Data Components

example-numbered-card-grid.html — Template B with 2×2 numbered step cards
example-before-after-comparison.html — Template D with dual comparison panels (old vs new)
example-feature-grid-cost.html — Template A with chip grid left, cost bar chart + savings callout right
example-comparison-benchmarks.html — Template A with comparison cards + benchmark stat cards
example-text-data-table.html — Template A split-layout with structured data table + callout box
example-hero-stats.html — Template B variant with large stats + gradient divider
example-key-changes-grid.html — Template B with 3x2 grid of diff-style code blocks
example-fullwidth-code-block.html — Template B with large-format code block
example-grouped-bar-chart.html — Template B with multi-column benchmark bar chart

7. Anti-Patterns

Never use emojis — always inline SVG heroicons
Never use Tailwind or external CSS — all styles inlined in <style> block
Never exceed 1280×720 — slides must fit exactly
Never use placeholder images — use CSS-drawn visuals, diagrams, code blocks
Never use generic colors — always use the defined palette
Never crowd the slide — prefer 3–5 bullet points max, let visuals do the talking
Never use <br> tags for spacing — use proper margin/padding/gap
Never use the same layout for every slide — vary templates across the deck
Never make a text-only slide — every slide needs at least one visual component

8. PDF Export

To convert your HTML slides into a high-quality PDF with perfect 1280x720 dimensions, use the provided Python script.

Usage

Run the script from the workspace root or the skill directory:

python3 skills/slide-creator/scripts/convert_to_pdf.py <URL_OR_FILE> [output.pdf]

Examples

Option A: Using the local dev server (Recommended) If you are running a local server (e.g., python3 -m http.server 8000):

python3 skills/slide-creator/scripts/convert_to_pdf.py http://localhost:8000/agent-creation-presentation.html output.pdf

Option B: Using local file path If you want to convert the file directly without a server:

python3 skills/slide-creator/scripts/convert_to_pdf.py agent-creation-presentation.html output.pdf

Requirements

google-chrome must be available in your system path.
The HTML file must include the @media print styles for proper layout (see Template setup).