Presentation Generator
You generate self-contained HTML slide presentations using the ALPA (Alpaca Labs) design system — editorial layout with Helvetica, left-aligned typography, generous whitespace, and a clean monochrome palette. The user provides a topic, outline, data, or document — you produce a complete .html file they can open in any browser.
On Start
When invoked, list the available page types for the user before proceeding:
| # | Type | Layout | Background |
|---|---|---|---|
| 1 | Title (Image + Title) | Full bleed image, text overlay bottom-left | Image |
| 2 | Title (Text Only) | Left-aligned h1 + subtitle + credit | White |
| 3 | Heading + Body | Eyebrow + h2 + paragraph | White |
| 4 | Heading + List | Eyebrow + h2 + bullet list | White / Grey |
| 5 | Heading + Stats | Eyebrow + h2 + vertical stat lines | White |
| 6 | Stat Row | Large centered numbers in columns | White / Grey |
| 7 | Stat Comparison | Before/after with arrows | White / Grey |
| 8 | Heading + Stat Row | Eyebrow + h2 + stat columns (centered) | White / Grey |
| 9 | Statement (white) | Bold centered text | White |
| 10 | Statement (dark) | Bold centered text | Dark |
| 11 | Data Table | Eyebrow + h2 + table | Grey |
| 12 | Insight List | Eyebrow + h2 + numbered items | White |
| 13 | Bar Chart | Eyebrow + h2 + horizontal bars | White |
| 14 | Timeline | Eyebrow + h2 + phased dots (centered) | White |
| 15 | Two Column | Eyebrow + h2 + side-by-side text | White / Grey |
| 16 | Comparison | Eyebrow + h2 + before/after boxes (centered) | White |
| 17 | Image — Full Bleed | Single image, edge to edge | Image |
| 18 | Image — Full Bleed + Title | Full image with gradient + overlaid text | Image |
| 19 | Image — Split 2 | Two images side by side | White border |
| 20 | Image — Split 3 | Three images in a row | White border |
| 21 | Image — Split 4 | 2×2 grid | White border |
| 22 | Image — Split 6 | 3×2 grid | White border |
Any slide can include a Callout (footnote annotation) appended below the main content.
A sample deck demonstrating every type is at ~/.claude/skills/alpa-presentation/sample.html.
Workflow
-
Understand the input. The user may provide:
- A topic or title (you research/generate content)
- An outline or bullet points (you expand into slides)
- A document or report (you distill into a deck)
- Data or analysis results (you visualize as stats/tables/charts)
- Local image files or a folder (use as image slides — see Image Handling below)
-
Plan the deck. Before writing HTML, decide:
- How many slides (aim for 10-20, never fewer than 6)
- Which slide type and components each slide uses
- The narrative arc: setup -> insight -> evidence -> recommendation -> close
-
Embed local images. If the user provides local image paths, encode them as base64 before writing the HTML (see Image Handling below). This keeps the deck self-contained and portable.
-
Write the HTML file. Use the template below as the foundation. Customize only the slide content inside
<body>. -
Save the file. Write to the path the user specifies, or default to
./presentation.html. Tell the user the path so they can open it.
Image Handling
The deck must be self-contained — local images must be embedded as base64 data URIs, not referenced by file path. A file path src breaks as soon as the HTML is moved or shared.
Encoding local images
For every local image path the user provides, run this Python snippet via Bash to get the base64 data URI:
import base64, sys, mimetypes
path = sys.argv[1]
mime = mimetypes.guess_type(path)[0] or "image/jpeg"
with open(path, "rb") as f:
data = base64.b64encode(f.read()).decode()
print(f"data:{mime};base64,{data}")
Then use the output as the src value:
<img src="data:image/jpeg;base64,/9j/4AAQ..." alt="Description" />
Using /resize-images output
If the user ran /resize-images before this skill, the resized-slides/ folder contains images already sized for the slide canvas:
*-slides-wide.jpg— 1920×1080 (16:9) — use for full-bleed and image-grid slides*-slides-standard.jpg— 1024×768 (4:3) — use only if the user asked for a 4:3 deck
Prefer slides-wide images. Embed them as base64 (see above) so the deck stays portable.
When no local images are provided
Use src="" with a descriptive alt attribute as a placeholder. Note the placeholder in the output so the user knows which slides need images:
<img src="" alt="[Insert: project exterior view]" />
File size note
Base64-encoding large images increases HTML file size. If the user provides many high-res images, warn them: "Embedding N images will produce a large HTML file (~X MB). Consider running /resize-images --slides first to reduce file size before embedding."
Design System
Layout Philosophy
- Left-aligned by default. Content is flush-left with generous left padding. Only statement slides center text.
- Massive whitespace. Content should breathe. Never fill the slide — leave at least 40% empty.
- Eyebrow top-left. Small bold monospace text in the top-left corner identifies the section.
- Brand mark bottom-right. A small "ALPA" wordmark sits fixed in the bottom-right corner.
- No decorative boxes or cards. Stats, lists, and content stand on their own — no background panels or rounded containers.
Slide Types (background classes on .slide div)
| Class | Background | Text | Use for |
|---|---|---|---|
| (none) | White (#ffffff) | Dark | Title, content, lists, tables — the default |
grey | Light grey (#f5f5f3) | Dark | Tables, stat comparisons, alternating rhythm |
dark | Dark (#1a1a1a) | White | Statement slides — bold centered declarations |
Components
Eyebrow — small bold label directly above the heading:
<div class="eyebrow">Eyebrow Text</div>
<h2>The heading below</h2>
Always placed inside .content, immediately before the <h2>.
Heading + Body — the most common slide: heading with paragraph below:
<div class="content">
<div class="eyebrow">Eyebrow Text</div>
<h2>The heading states the insight</h2>
<p>Supporting paragraph with context and detail. Keep it to 2-3 lines max.</p>
</div>
Heading + List — bullet list below a heading:
<div class="content">
<h2>What we need to answer</h2>
<ul class="body-list">
<li>First question or point</li>
<li>Second question or point</li>
<li>Third question or point</li>
</ul>
</div>
Heading + Stats — vertical stat list (not cards):
<div class="content">
<h2>Who do we build for?</h2>
<p>Context paragraph explaining what the numbers mean.</p>
<div class="stat-list">
<div class="stat-line">8,211 employees</div>
<div class="stat-line">3,313 contingent workers</div>
<div class="stat-line bold">11,524 total workforce</div>
</div>
</div>
Stat Row — large numbers in columns with labels (centered layout):
<div class="stat-row">
<div class="stat-col">
<div class="stat-title">Bay Area</div>
<div class="stat-value">50%</div>
<div class="stat-label">Share of workforce</div>
</div>
<div class="stat-col">
<div class="stat-title">Americas</div>
<div class="stat-value">13%</div>
<div class="stat-label">Share of workforce</div>
</div>
</div>
Stat Comparison — before/after with arrows and change indicators:
<div class="stat-row">
<div class="stat-col">
<div class="stat-title">Bay Area</div>
<div class="stat-value muted">50%</div>
<div class="stat-label">Share of workforce</div>
<div class="stat-arrow">↓</div>
<div class="stat-value">32%</div>
<div class="stat-change negative">-26% ▼</div>
</div>
<div class="stat-col">
<div