# Slide Deck Generator > Build a branded Spectro Cloud slide deck -- either 16:9 HTML slides rendered to PDF via Puppeteer (title, divider, content, quote, timeline, table and closing layouts) or a Google Slides deck with a shareable link, copied and filled from the 2026 Corporate Template via gws. Use when Craig asks for a deck, slides, a presentation or a pitch, or says: make me a deck for this customer, turn this into slides, build a solution overview presentation, I need something to present on this call, slides for the QBR / webinar / conference / internal review. Use doc-writer or exec-doc-generator instead when the deliverable is a document or a 1-2 page PDF rather than slides meant to be projected. Owns projected decks only -- for a long-form writeup use doc-writer, for a 1-2 page executive PDF use exec-doc-generator, and for a multi-page docs site use docs-site-generator. See the Deliverable Routing table in doc-writer. - Skill: `craig-ai-tooling/slide-deck-generator` (Agent Skill, multi-file: 3 files) - Install (CLI): `npx skillmds@latest add craig-ai-tooling/slide-deck-generator` - Raw SKILL.md: https://api.skillmd.com/api/skills/craig-ai-tooling/slide-deck-generator/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: craig-ai-tooling (https://skillmd.com/u/craig-ai-tooling) - Updated: 2026-09-22 - Page: https://skillmd.com/skills/craig-ai-tooling/slide-deck-generator --- # Slide Deck Generator PDF route: assets/generate-pdf.mjs Build branded presentation slide decks as HTML files rendered to PDF via Puppeteer. Based on the official 2026 Spectro Cloud Google Slides templates. Used for customer presentations, internal reviews, solution overviews, and technical briefings. ## When to Use - User asks for a slide deck, presentation, or slides - User wants a "deck" or "pitch" for a customer or internal audience - Building materials for meetings, QBRs, webinars, or conferences - Any request that implies multiple sequential visual pages meant for projection or screen sharing - Two output forms live here: a rendered PDF (see PDF Generation below) or an editable Google Slides link (see Google Slides Output below) Not this deliverable? See the Deliverable Routing table in the `doc-writer` skill: it covers long-form writeups, 1-2 page executive PDFs, and multi-page docs sites. ## Brand Foundation READ the `spectrocloud-brand` skill for authoritative colors, typography, logos, and messaging. This skill defines slide-specific layout and sizing rules; all visual identity comes from the brand skill. Key brand references: - Colors: `spectrocloud-brand/references/colors.md` - Messaging and boilerplates: `spectrocloud-brand/references/messaging.md` - Logo SVGs: `spectrocloud-brand/assets/spectrocloud-logo-horizontal.svg` (light bg) and `spectrocloud-brand/assets/spectrocloud-logo-horizontal-knockout-white.svg` (dark bg) - Brand icons: `spectrocloud-brand/assets/icons/` (Diamond, SquaresFour, ShuffleAngular, etc.) ## Slide Sizing and Page Setup All slides use **16:9 landscape** at **1280x720** viewport. ```css @page { size: 1280px 720px; margin: 0; } html, body { margin: 0; padding: 0; width: 1280px; } .slide { width: 1280px; height: 720px; position: relative; overflow: hidden; page-break-after: always; box-sizing: border-box; -webkit-print-color-adjust: exact; } .slide:last-child { page-break-after: avoid; } ``` ## CSS Variables ```css :root { --teal: #1F7A78; --teal-dark: #005B5B; --teal-darkest: #043736; --green: #9EB277; --gold: #F0BE65; --gold-dark: #DE8D2A; --orange: #B94B01; --lilac: #7E5C8E; --lilac-dark: #441647; --paper: #F7F1ED; --ink: #012121; --neutral-1: #E0DCD7; --neutral-3: #9E9C9C; --neutral-4: #3C4949; --surface: #FFFFFF; } ``` ## Typography for Slides Font: Plus Jakarta Sans (Google Fonts). Slides use larger sizes than exec-docs since they are projected. **Load the font via `` tags in `` - NOT `@import` inside `