PPTX Slides — Programmatic PowerPoint Generation

Generate professional, editable PowerPoint presentations using PptxGenJS (Node.js). Produces OOXML-compliant

.pptx

Bundled Helpers

Every PPTX generation script imports the bundled TypeScript helper modules via bun:

import pptxgen from 'pptxgenjs';
import * as h from '${CLAUDE_PLUGIN_ROOT}/skills/pptx-slides/scripts/main.ts';
const pptx = new pptxgen();
pptx.layout = 'LAYOUT_16x9'; // 10" × 5.625"

Run generation scripts with bun (no build step needed):

npx -y bun ${CLAUDE_PLUGIN_ROOT}/skills/pptx-slides/scripts/main.ts theme list

Dependencies (

skia-canvas

fontkit

linebreak

prismjs

Module Summary

autoFontSize()

calcTextBoxHeightSimple()

scale()

createTheme()

PRESETS

sectionBackground()

warnIfSlideHasOverlaps()

alignSlideElements()

distributeSlideElements()

addFeatureGrid()

addCardRow()

addTimeline()

addMetricsRow()

addComparisonTable()

addStaircase()

addSectionBadge()

addProgressBar()

addSlideNumber()

validateDeck()

codeToRuns()

getImageDimensions()

imageSizingCrop()

imageSizingContain()

svgToDataUri()

safeOuterShadow()

normalizeColor()

inchesToEmu()

Theme Selection

Pick a curated preset or create a custom theme:

// Use a preset
const theme = h.createTheme(h.PRESETS.darkMonospace);

// Or customize
const theme = h.createTheme({
  accent: 'ff6b35',
  font: { heading: 'Poppins', body: 'Inter' },
});

Available presets: darkMonospace, swissModern, boldSignal, darkBotanical, cleanCorporate, neonCyber, warmMinimal, vintageEditorial, terminalGreen, gradientWave, midnightBlue, paperInk.

For mixed-background decks, define a section map:

const sectionMap = { '0': 'brand', '1-3': 'light', '4-8': 'default' };
const colors = { brand: theme.accent, light: theme.bg.secondary, default: theme.bg.primary };
slide.background = { color: h.sectionBackground(slideIndex, sectionMap, colors) };

Adaptive Font Sizing

Use

scale()

clamp()

const titleSize = h.scale(theme.size.title.min, theme.size.title.max, { bullets: 0, textLength: title.length });
const bodySize = h.scale(theme.size.body.min, theme.size.body.max, { bullets: 5, textLength: 800 });

For precise text box fitting, use

autoFontSize()

const opts = h.autoFontSize('Long paragraph text...', 'Arial', { w: 8, h: 3, minFontSize: 14, maxFontSize: 28 });
slide.addText(text, { x: 1, y: 1.5, ...opts });

Generation Workflow

1. Plan layout — Map content outline to slide types from

   references/slide-patterns.md

2. Select theme — Pick preset or define custom theme tokens
3. Generate slides — Build with helpers:

   addFeatureGrid()

   ,

   addCardRow()

   , etc.
4. Validate — Run

   h.validateDeck(pptx)

   before saving
5. Fix issues — Adjust based on validation report, re-validate
6. Deliver — Provide

   .pptx

   file with speaker notes on every content slide

Core Design Rules

Typography

• Minimum body text: 18pt (24-28pt preferred). Use

  scale()

  for adaptive sizing.
• Title text: 36-44pt
• Caption/footnote: 14-16pt minimum (absolute floor: 14pt)
• Font families: Use

  h.resolveFont(theme, 'heading')

  for proper fallback chains

Layout

• Slide dimensions: 10" × 5.625" (widescreen 16:9)
• Safe margins: 0.5" from all edges (

  theme.spacing.margin

  )
• White space: Target 40-50% empty space per slide
• Alignment: Use

  h.alignSlideElements()

  and

  h.distributeSlideElements()

  for precision

Color & Accessibility

• Contrast ratio: WCAG AA minimum (4.5:1 body, 3:1 large text)
• Color-blind safe: Wong or IBM palettes for data visualization
• Theme tokens: Always use

  theme.text.primary

  ,

  theme.accent

  — never hardcode colors

Validation Workflow

Run

h.validateDeck(pptx)

• Element overlaps on every slide
• Elements within slide boundaries
• Font sizes above 14pt minimum
• Bullet count per slide (max 6)
• Speaker notes presence

Anti-Patterns

• Text smaller than 14pt anywhere
• More than 6 bullets per slide
• Elements extending beyond slide boundaries
• Hardcoded colors instead of theme tokens
• Hardcoded font sizes instead of

  scale()

  or

  autoFontSize()

• Skipping

  validateDeck()

  before saving
• Missing speaker notes on content slides
• Using PptxGenJS

  fit

  or

  autoFit

  instead of

  h.autoFontSize()

Editability Guidance

Design for editability — recipients must be able to modify the deck:

• Native text boxes — Click and edit directly. Never flatten text into images.
• Group related elements — Card layouts move as a unit.
• Native shapes — Use rounded rectangles, circles, lines instead of embedded SVG where possible.
• Speaker notes — Add talking points via

  slide.addNotes('...')

  on every content slide.
• Master layouts — For template decks, define slide layouts for consistent new slides.

Architecture Diagrams with Shapes

Build architecture diagrams using PptxGenJS native shapes rather than images:

• Rectangles for services/components:

  slide.addShape('rect', { ... })

• Lines and arrows for connections:

  slide.addShape('line', { ... })

• Color coding: Use

  theme.accent

  for active components,

  theme.text.secondary

  for inactive
• Progressive revelation: Build the same diagram across 2-3 slides, adding complexity

Reference Files

• references/pptxgenjs-helpers.md

  — Full API reference for bundled helper modules

• references/slide-patterns.md

  — Detailed slide type patterns with dimensions and positioning

Script Files

• scripts/main.ts

  — TypeScript CLI entry point and library re-exports (run via

  npx -y bun

  )

• scripts/types.ts

  — Shared TypeScript interfaces for all helper modules

• scripts/theme.ts

  — 12 curated theme presets with

  createTheme()

  and

  resolveFont()

• scripts/text.ts

  — Font-aware text measurement via skia-canvas,

  autoFontSize()

  ,

  scale()

• scripts/layout.ts

  — Overlap detection, element alignment, bounds checking

• scripts/layout_builders.ts

  —

  addFeatureGrid()

  ,

  addCardRow()

  ,

  addTimeline()

  , etc.

• scripts/decorative.ts

  —

  addStaircase()

  ,

  addSectionBadge()

  ,

  addProgressBar()

• scripts/validation.ts

  —

  validateDeck()

  pre-save quality validation

• scripts/code.ts

  — Prism.js syntax highlighting to PptxGenJS text runs

• scripts/image.ts

  — Binary dimension detection and aspect-ratio sizing

• scripts/svg.ts

  — SVG sanitization and base64 data URI encoding

• scripts/util.ts

  — Shadow effects, color normalization, unit conversion