slide-deck-generator
starsforks
How to install slide-deck-generator?
alpacalabsllc/skills-for-architects/slide-deck-generator
$npx -y skills add AlpacaLabsLLC/skills-for-architects --skill slide-deck-generatorGenerate a polished HTML slide deck from a topic, outline, or data — a self-contained .html file with keyboard/touch navigation, responsive typography, and the ALPA (Alpaca Labs) design system. Use when the user asks to "generate a slide deck", make a presentation, or turn an out
SKILL.md
| 1 | # Presentation Generator |
| 2 | |
| 3 | 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. |
| 4 | |
| 5 | ## Reference Files |
| 6 | |
| 7 | This skill keeps its bulk material in reference files in this directory. Load them on demand: |
| 8 | |
| 9 | - **[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. |
| 10 | - **[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. |
| 11 | - **[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. |
| 12 | |
| 13 | ## On Start |
| 14 | |
| 15 | When invoked, list the available page types for the user before proceeding: |
| 16 | |
| 17 | | # | Type | Layout | Background | |
| 18 | |---|------|--------|------------| |
| 19 | | 1 | Title (Image + Title) | Full bleed image, text overlay bottom-left | Image | |
| 20 | | 2 | Title (Text Only) | Left-aligned h1 + subtitle + credit | White | |
| 21 | | 3 | Heading + Body | Eyebrow + h2 + paragraph | White | |
| 22 | | 4 | Heading + List | Eyebrow + h2 + bullet list | White / Grey | |
| 23 | | 5 | Heading + Stats | Eyebrow + h2 + vertical stat lines | White | |
| 24 | | 6 | Stat Row | Large centered numbers in columns | White / Grey | |
| 25 | | 7 | Stat Comparison | Before/after with arrows | White / Grey | |
| 26 | | 8 | Heading + Stat Row | Eyebrow + h2 + stat columns (centered) | White / Grey | |
| 27 | | 9 | Statement (white) | Bold centered text | White | |
| 28 | | 10 | Statement (dark) | Bold centered text | Dark | |
| 29 | | 11 | Data Table | Eyebrow + h2 + table | Grey | |
| 30 | | 12 | Insight List | Eyebrow + h2 + numbered items | White | |
| 31 | | 13 | Bar Chart | Eyebrow + h2 + horizontal bars | White | |
| 32 | | 14 | Timeline | Eyebrow + h2 + phased dots (centered) | White | |
| 33 | | 15 | Two Column | Eyebrow + h2 + side-by-side text | White / Grey | |
| 34 | | 16 | Comparison | Eyebrow + h2 + before/after boxes (centered) | White | |
| 35 | | 17 | Image — Full Bleed | Single image, edge to edge | Image | |
| 36 | | 18 | Image — Full Bleed + Title | Full image with gradient + overlaid text | Image | |
| 37 | | 19 | Image — Split 2 | Two images side by side | White border | |
| 38 | | 20 | Image — Split 3 | Three images in a row | White border | |
| 39 | | 21 | Image — Split 4 | 2×2 grid | White border | |
| 40 | | 22 | Image — Split 6 | 3×2 grid | White border | |
| 41 | |
| 42 | Any slide can include a **Callout** (footnote annotation) appended below the main content. |
| 43 | |
| 44 | A sample deck demonstrating every type is at `sample.html` in this skill's directory. |
| 45 | |
| 46 | ## Workflow |
| 47 | |
| 48 | 1. **Understand the input.** The user may provide: |
| 49 | - A topic or title (you research/generate content) |
| 50 | - An outline or bullet points (you expand into slides) |
| 51 | - A document or report (you distill into a deck) |
| 52 | - Data or analysis results (you visualize as stats/tables/charts) |
| 53 | - Local image files or a folder (use as image slides — see [image-handling.md](image-handling.md)) |
| 54 | |
| 55 | 2. **Plan the deck.** Before writing HTML, decide: |
| 56 | - How many slides (aim for 10-20, never fewer than 6) |
| 57 | - Which slide type and components each slide uses |
| 58 | - The narrative arc: setup -> insight -> evidence -> recommendation -> close |
| 59 | |
| 60 | 3. **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. |
| 61 | |
| 62 | 4. **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>`. |
| 63 | |
| 64 | 5. **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. |
| 65 | |
| 66 | ## Design System |
| 67 | |
| 68 | ### Layout Philosophy |
| 69 | - **Left-aligned by default.** Content is flush-left with generous left padding. Only statement slides center text. |
| 70 | - **Massive whitespace.** Content should breathe. Never fill the slide — leave at least 40% empty. |
| 71 | - **Eyebrow top-left.** Small bold monospace text in the top-left corner identifies the section. |
| 72 | - **Brand mark bottom-right.** A small "ALPA" wordmark sits fixed in the bottom-right corner of every slide, with two exceptions: the full-bleed image |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
