/slide-deck-generator

What it does

Type /as:slide-deck-generator in Claude Code with a topic, outline, or data. The skill generates a complete .html slide deck you can open in any browser — no PowerPoint, no build step, no dependencies.

The design system is editorial and monochrome: Helvetica, left-aligned typography, generous whitespace, and a clean black/white/grey palette. Every deck includes keyboard navigation, touch swipe, a progress bar, and auto-injected page numbers.

Install

Claude Desktop:

1. Open Customize → Browse plugins
2. Click + → Add marketplace from GitHub
3. Enter AlpacaLabsLLC/skills-for-architects
4. Install Architecture Studio

Claude Code (terminal):

claude plugin marketplace add AlpacaLabsLLC/skills-for-architects
claude plugin install as@skills-for-architects

Or symlink just this skill:

git clone https://github.com/AlpacaLabsLLC/skills-for-architects.git
ln -s $(pwd)/skills-for-architects/skills/slide-deck-generator ~/.claude/skills/slide-deck-generator

Usage

/as:slide-deck-generator Q1 results — revenue up 40%, 3 new clients, 2 hires

Or start with a document:

/as:slide-deck-generator [paste report, outline, or data]

The skill plans the narrative arc, selects slide types, and writes the HTML. Output goes to the path you specify, or defaults to ./presentation.html.

22 Slide Types

The design system includes five categories of slides:

Title — Full-bleed image cover with gradient overlay, or text-only fallback

Content — Heading + body, heading + list, heading + stats, insight lists, two-column layouts

Data — Stat rows (large numbers), stat comparisons (before/after with arrows), data tables, bar charts, timelines, side-by-side comparisons

Statement — Bold centered text on white or dark backgrounds for emphasis

Image — Full bleed, full bleed with title overlay, and grid layouts (2, 3, 4, or 6 images)

Every slide can include a callout annotation for sources or footnotes.

Design System

Element	Value
Font	Helvetica Neue
Backgrounds	White (default), light grey, dark
Accent	#E8B517 warm yellow (progress bar)
Layout	Left-aligned, 60% max content width
Brand mark	Studio name (supplied, or read from STUDIO.md), bottom-right on every slide except full-bleed image and image-grid slides

The accent color can be changed per-deck for brand-specific presentations.

Customization

• Accent color — Change --accent in the CSS for brand-specific decks
• Writing style — Headlines are short and opinionated (“We have 18 huddle rooms. At peak, 29 groups need one.” not “Huddle Room Analysis”)
• Slide types — All component markup is in slide-types.md, easy to add new component patterns
• Brand variant — Fork the skill and swap fonts, colors, and the brand mark for your own design system

What’s included

• SKILL.md — Skill prompt with the design system and composition rules
• html-template.md, slide-types.md, image-handling.md — The CSS/JS template, component markup, and local-image embedding workflow
• sample.html — Reference deck demonstrating every slide type
• README.md — Installation and usage guide