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.
Reference Files
This skill keeps its bulk material in reference files in this directory. Load them on demand:
- slide-types.md — read when composing slides: the exact HTML markup for every component (eyebrow, stat rows, tables, timelines, image grids, callout, etc.). Copy these structures verbatim.
- html-template.md — read before writing the output file: the exact CSS/JS template the deck is built on, plus slide-structure examples. Only the slide
<div>s inside <body> change.
- image-handling.md — read when the user provides local images (or ran
/resize-images): base64 embedding workflow, placeholder convention, file-size warnings.
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 sample.html in this skill's directory.
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.md)
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.md). This keeps the deck self-contained and portable.
Write the HTML file. Use the template in html-template.md as the foundation, with component markup from slide-types.md. 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.
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
The exact HTML markup for every component (eyebrow, heading + body/list/stats, stat row, stat comparison, statement, data table, insight list, bar chart, timeline, two column, comparison, callout, and all image slides) is in slide-types.md. Read it before composing slides and copy the structures verbatim.
Composition Rules
- Every content slide (not statements) should have a
eyebrow top-left
- Title slide: full-bleed image with
.image-title-slide — h1 + subtitle over gradient overlay. Falls back to white text-only title if no image is available.
- Content slides: white (default), left-aligned —
eyebrow + .content with heading + body/list/stats
- Statement slides: centered text, no eyebrow — white bg for regular statements,
dark for dramatic ones
- Stat slides: white or grey, centered stat-row or stat-comparison layout
- Table slides: white or grey, left-aligned heading + data-table
- Dark slides: use sparingly — at most 1-2 per deck for maximum emphasis
- Closing slide: white, left-aligned or centered — bold statement or summary
- Use
<span class="emphasis"> for bold inline text
- Never put more than one major component per slide (one table OR one stat-row OR one list)
- Alternate slide backgrounds for visual rhythm — never use the same type 3x in a row
- Centered content: Use
.slide.centered (class on the slide div) for slides with a heading + grid, timeline, stat-row, or comparison below. These read better centered. Left-align is for heading + body text, lists, tables, and insight lists.
- Leave generous whitespace — content should occupy at most 60% of the slide
Writing Style
- Headlines: short, declarative, opinionated. State the insight, not the topic.
- Good: "We have 18 huddle rooms. At peak, 29 groups need one."
- Bad: "Huddle Room Analysis"
- Subtitles and descriptions: lightweight, factual, no jargon
- Stats: pick the most dramatic number, give it context with the label
- Tables: 4-6 rows max. Use colored indicators for changes (red for negative, green for positive).
- Lists: lead with the bold action/finding, follow with the detail after an em dash
Accent Color
The default accent is --accent: #E8B517 (warm yellow — used only on the progress bar). The design is primarily monochrome — black, white, and greys. Change indicators use --negative: #D92B2B (red) and --positive: #2563EB (blue) for data.
If the presentation is for a different brand or context, change --accent. Common alternatives:
- Blue:
#2563EB
- Teal:
#0D7377
- Purple:
#6B21A8
- Orange:
#C2410C
Ask the user if they want a specific accent color. If the topic suggests a brand, try to match.
Slide Structure Rules
- First slide: Always
active — use .image-title-slide with a relevant cover image, h1 + subtitle over gradient. If no image is available, fall back to white text-only title (h1 + .subtitle + credit).
- Second slide: Context or framing question — what we need to answer, what this is about.
- Middle slides: Alternate between white and grey backgrounds. Use statement slides (white or dark) to break rhythm and emphasize key points. Build the argument.
- Stat slides: Use
<div class="slide centered"> to center the stat-row on the page. No eyebrow needed.
- Statement slides: Center the
.statement div. No eyebrow. Use dark bg sparingly (1-2 per deck).
- Penultimate slide: The ask / recommendations / next steps
- Last slide: White — closing statement or summary, left-aligned or centered.
Output
Write the complete HTML file using the Write tool, built on the exact CSS/JS in html-template.md. The first slide must have class active. Every slide must be a direct child <div class="slide ..."> inside body, before the <nav>. Add <div class="brand-mark">ALPA</div> to every slide.
1---2name: slide-deck-generator3description: Generate a polished HTML slide deck from a topic, outline, or data. Outputs a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system — Helvetica, editorial layout, clean white backgrounds.4---56# Presentation Generator78You 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.910## Reference Files1112This skill keeps its bulk material in reference files in this directory. Load them on demand:1314- **[slide-types.md](slide-types.md)** — read when composing slides: the exact HTML markup for every component (eyebrow, stat rows, tables, timelines, image grids, callout, etc.). Copy these structures verbatim.15- **[html-template.md](html-template.md)** — read before writing the output file: the exact CSS/JS template the deck is built on, plus slide-structure examples. Only the slide `<div>`s inside `<body>` change.16- **[image-handling.md](image-handling.md)** — read when the user provides local images (or ran `/resize-images`): base64 embedding workflow, placeholder convention, file-size warnings.1718## On Start1920When invoked, list the available page types for the user before proceeding:2122| # | Type | Layout | Background |23|---|------|--------|------------|24| 1 | Title (Image + Title) | Full bleed image, text overlay bottom-left | Image |25| 2 | Title (Text Only) | Left-aligned h1 + subtitle + credit | White |26| 3 | Heading + Body | Eyebrow + h2 + paragraph | White |27| 4 | Heading + List | Eyebrow + h2 + bullet list | White / Grey |28| 5 | Heading + Stats | Eyebrow + h2 + vertical stat lines | White |29| 6 | Stat Row | Large centered numbers in columns | White / Grey |30| 7 | Stat Comparison | Before/after with arrows | White / Grey |31| 8 | Heading + Stat Row | Eyebrow + h2 + stat columns (centered) | White / Grey |32| 9 | Statement (white) | Bold centered text | White |33| 10 | Statement (dark) | Bold centered text | Dark |34| 11 | Data Table | Eyebrow + h2 + table | Grey |35| 12 | Insight List | Eyebrow + h2 + numbered items | White |36| 13 | Bar Chart | Eyebrow + h2 + horizontal bars | White |37| 14 | Timeline | Eyebrow + h2 + phased dots (centered) | White |38| 15 | Two Column | Eyebrow + h2 + side-by-side text | White / Grey |39| 16 | Comparison | Eyebrow + h2 + before/after boxes (centered) | White |40| 17 | Image — Full Bleed | Single image, edge to edge | Image |41| 18 | Image — Full Bleed + Title | Full image with gradient + overlaid text | Image |42| 19 | Image — Split 2 | Two images side by side | White border |43| 20 | Image — Split 3 | Three images in a row | White border |44| 21 | Image — Split 4 | 2×2 grid | White border |45| 22 | Image — Split 6 | 3×2 grid | White border |4647Any slide can include a **Callout** (footnote annotation) appended below the main content.4849A sample deck demonstrating every type is at `sample.html` in this skill's directory.5051## Workflow52531. **Understand the input.** The user may provide:54 - A topic or title (you research/generate content)55 - An outline or bullet points (you expand into slides)56 - A document or report (you distill into a deck)57 - Data or analysis results (you visualize as stats/tables/charts)58 - Local image files or a folder (use as image slides — see [image-handling.md](image-handling.md))59602. **Plan the deck.** Before writing HTML, decide:61 - How many slides (aim for 10-20, never fewer than 6)62 - Which slide type and components each slide uses63 - The narrative arc: setup -> insight -> evidence -> recommendation -> close64653. **Embed local images.** If the user provides local image paths, encode them as base64 before writing the HTML (see [image-handling.md](image-handling.md)). This keeps the deck self-contained and portable.66674. **Write the HTML file.** Use the template in [html-template.md](html-template.md) as the foundation, with component markup from [slide-types.md](slide-types.md). Customize only the slide content inside `<body>`.68695. **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.7071## Design System7273### Layout Philosophy74- **Left-aligned by default.** Content is flush-left with generous left padding. Only statement slides center text.75- **Massive whitespace.** Content should breathe. Never fill the slide — leave at least 40% empty.76- **Eyebrow top-left.** Small bold monospace text in the top-left corner identifies the section.77- **Brand mark bottom-right.** A small "ALPA" wordmark sits fixed in the bottom-right corner.78- **No decorative boxes or cards.** Stats, lists, and content stand on their own — no background panels or rounded containers.7980### Slide Types (background classes on `.slide` div)81| Class | Background | Text | Use for |82|-------|-----------|------|---------|83| *(none)* | White (#ffffff) | Dark | Title, content, lists, tables — the default |84| `grey` | Light grey (#f5f5f3) | Dark | Tables, stat comparisons, alternating rhythm |85| `dark` | Dark (#1a1a1a) | White | Statement slides — bold centered declarations |8687### Components8889The exact HTML markup for every component (eyebrow, heading + body/list/stats, stat row, stat comparison, statement, data table, insight list, bar chart, timeline, two column, comparison, callout, and all image slides) is in [slide-types.md](slide-types.md). Read it before composing slides and copy the structures verbatim.9091### Composition Rules92- Every content slide (not statements) should have a `eyebrow` top-left93- **Title slide**: full-bleed image with `.image-title-slide` — h1 + subtitle over gradient overlay. Falls back to white text-only title if no image is available.94- **Content slides**: white (default), left-aligned — `eyebrow` + `.content` with heading + body/list/stats95- **Statement slides**: centered text, no eyebrow — white bg for regular statements, `dark` for dramatic ones96- **Stat slides**: white or grey, centered stat-row or stat-comparison layout97- **Table slides**: white or grey, left-aligned heading + data-table98- **Dark slides**: use sparingly — at most 1-2 per deck for maximum emphasis99- **Closing slide**: white, left-aligned or centered — bold statement or summary100- Use `<span class="emphasis">` for bold inline text101- Never put more than one major component per slide (one table OR one stat-row OR one list)102- Alternate slide backgrounds for visual rhythm — never use the same type 3x in a row103- **Centered content**: Use `.slide.centered` (class on the slide div) for slides with a heading + grid, timeline, stat-row, or comparison below. These read better centered. Left-align is for heading + body text, lists, tables, and insight lists.104- Leave generous whitespace — content should occupy at most 60% of the slide105106### Writing Style107- Headlines: short, declarative, opinionated. State the insight, not the topic.108 - Good: "We have 18 huddle rooms. At peak, 29 groups need one."109 - Bad: "Huddle Room Analysis"110- Subtitles and descriptions: lightweight, factual, no jargon111- Stats: pick the most dramatic number, give it context with the label112- Tables: 4-6 rows max. Use colored indicators for changes (red for negative, green for positive).113- Lists: lead with the bold action/finding, follow with the detail after an em dash114115## Accent Color116117The default accent is `--accent: #E8B517` (warm yellow — used only on the progress bar). The design is primarily monochrome — black, white, and greys. Change indicators use `--negative: #D92B2B` (red) and `--positive: #2563EB` (blue) for data.118119If the presentation is for a different brand or context, change `--accent`. Common alternatives:120- Blue: `#2563EB`121- Teal: `#0D7377`122- Purple: `#6B21A8`123- Orange: `#C2410C`124125Ask the user if they want a specific accent color. If the topic suggests a brand, try to match.126127## Slide Structure Rules1281291. **First slide**: Always `active` — use `.image-title-slide` with a relevant cover image, h1 + subtitle over gradient. If no image is available, fall back to white text-only title (h1 + `.subtitle` + credit).1302. **Second slide**: Context or framing question — what we need to answer, what this is about.1313. **Middle slides**: Alternate between white and grey backgrounds. Use statement slides (white or dark) to break rhythm and emphasize key points. Build the argument.1324. **Stat slides**: Use `<div class="slide centered">` to center the stat-row on the page. No eyebrow needed.1335. **Statement slides**: Center the `.statement` div. No eyebrow. Use dark bg sparingly (1-2 per deck).1346. **Penultimate slide**: The ask / recommendations / next steps1357. **Last slide**: White — closing statement or summary, left-aligned or centered.136137## Output138139Write the complete HTML file using the Write tool, built on the exact CSS/JS in [html-template.md](html-template.md). The first slide must have class `active`. Every slide must be a direct child `<div class="slide ...">` inside body, before the `<nav>`. Add `<div class="brand-mark">ALPA</div>` to every slide.
sahit-sai