Unified HTML presentation generator — strategic slides with Chart.js and design tokens, polished HTML decks with print/PDF versions and speaker notes, investor pitch decks with problem/solution/market/ask structure. Single entry point for 'make a slide deck' / 'create a presentation' / 'pitch deck'.
Unified HTML presentation generator — strategic slides with Chart.js and design tokens, polished HTML decks with print/PDF versions and speaker notes, investor pitch decks with problem/solution/market/ask structure. Single entry point for 'make a slide deck' / 'create a presentation' / 'pitch deck'.
Unified HTML presentation generator — strategic slides with Chart.js and design tokens, polished HTML decks with print/PDF versions and speaker notes, investor pitch decks with problem/solution/market/ask structure. Single entry point for 'make a slide deck' / 'create a presentation' / 'pitch deck'.
Absorbs
slides
html-deck
pitch-deck
From ckm:slides
Create strategic HTML presentations with Chart.js, design tokens, responsive layouts, copywriting formulas, and contextual slide strategies.
Slides
Strategic HTML presentation design with data visualization.
$ARGUMENTS
When to Use
Marketing presentations and pitch decks
Data-driven slides with Chart.js
Strategic slide design with layout patterns
Copywriting-optimized presentation content
Subcommands
Subcommand
Description
Reference
create
Create strategic presentation slides
references/create.md
References (Knowledge Base)
Topic
File
Layout Patterns
references/layout-patterns.md
HTML Template
references/html-template.md
Copywriting Formulas
references/copywriting-formulas.md
Slide Strategies
references/slide-strategies.md
Routing
Parse subcommand from $ARGUMENTS (first word)
Load corresponding references/{subcommand}.md
Execute with remaining arguments
From html-deck
Create polished HTML presentations — interactive fullscreen deck + print/PDF version + presenter script. Design system: Inter font, CSS variables, component classes, JS keyboard/click/touch navigation. Slide types: title, agenda, bullet, code, table, chart, comparison, flow, architecture, radar, timeline, staircase. Integrates with visual-render for custom assets. Actions: create presentation, make deck, build slides, design slideshow, generate presentation.
HTML Deck Skill
Create production-quality HTML presentations: interactive fullscreen deck + print/PDF version + presenter script.
Outputs (always produce all 3)
File
Purpose
<name>-deck.html
Interactive fullscreen deck — JS navigation, progress bar
<name>-print.html
Print/PDF version — fixed 1280×720px slides, no JS
Outline slide sequence before writing HTML. Typical structure:
Title slide
Personal hook / "Why this matters"
Agenda
Problem statement / data
Core content (3-7 slides)
Architecture/diagram
Live demo / code
Results / case study
Key takeaways
Thank you / Q&A
Step 2: Create visual assets (optional)
Use visual-render for custom diagrams, charts, logos:
# Generate a diagram (run from the repo root)
python3 .claude/skills/visual-render/scripts/capture.py \
/tmp/visual-render/arch.html \
/tmp/visual-render/arch.png --bg white
Reference in slides as <img src="/tmp/visual-render/arch.png"> or embed as base64.
Step 3: Write the interactive deck
Use templates/deck-shell.html as the base. Each slide is:
<sectionclass="slide"id="s1"><!-- slide content here --></section>
The JS navigation, progress bar, and keyboard/touch handlers are in the shell.
[Slide N: Title] — Time: Xm Ys (cumulative: Xm Ys)
Opening line or hook.
Key talking points:
- Point 1
- Point 2
Transition: "And that brings us to..."
Slide Type Templates
See templates/slide-types.md for complete HTML patterns for every slide type.
Quick reference
Type
Pattern
Title
Full-bleed gradient + large text + subtitle
Agenda
.g3 grid of numbered cards
Bullet/Points
Numbered or bulleted list with .ca highlights
Code
.codeblock with syntax via JS or plain <pre>
Data Table
<table> with thead accent row
Two-Column
.g2 with .card in each cell
Flow/Steps
.flow with boxes and → separators
Architecture
Layered boxes with color-coded borders
Chart (SVG)
Inline SVG radar, bar, or donut
Staircase
Diagonal step layout for progression
Quote/Hook
Large italic quote with attribution
Comparison
Side-by-side .card with pros/cons
Timeline
Vertical or horizontal step sequence
Pricing
Feature-comparison grid with CTAs
Layout Constraints
Property
Deck
Print
Slide size
100vw × 100vh
1280px × 720px fixed
Font base
clamp(14px, 1.6vw, 18px)
16px fixed
Title size
clamp(36px, 5vw, 72px)
52px fixed
Padding
64px horizontal, 48px vertical
60px horizontal, 48px vertical
Max content width
1200px centered
fill to 1280px
Anti-Patterns
Too many slides: Keep to 15-25 for a 10-minute talk (rule: 30-45 sec per slide)
Wall of text: Max 5-6 bullet points per slide; use sub-slides instead
Missing data-export: If using visual-render for in-slide SVGs, always add data-export
Fixed px fonts: Use clamp() in deck so text scales on different screen sizes
No presenter notes: The script is as important as the deck; write it last when content is locked
No contrast: Dark text on dark bg — always check --text on --surface contrast ≥ 4.5:1
From pitch-deck
Investor pitch deck generator. One prompt → 10-12 slide HTML deck with problem/solution/market/traction/team/ask narrative. Chains slides + design-system + brand + research + mermaid. Outputs a standalone HTML file with keyboard navigation, animations, and speaker notes.
Pitch Deck Generator
One prompt → investor-ready 10-12 slide HTML presentation.
What Gets Generated
File
Content
pitch/deck.html
Full interactive pitch deck
pitch/speaker-notes.md
Speaker notes for each slide
pitch/leave-behind.html
1-pager PDF-printable summary
Phase 0 — Discovery
Parse $ARGUMENTS for:
company — name + 1-line description
stage — pre-seed / seed / Series A / Series B
ask — how much raising
vertical — industry
traction — any numbers (users, revenue, growth)
tone — bold/confident, understated/premium, technical/data-driven
Missing info → ask for: company description, stage, ask amount, top 1-2 traction metrics.
Phase 1 — Narrative Architecture
Invoke research — Look up market sizing data, competitive landscape, and relevant industry benchmarks to ground the deck content.
Invoke slides — Structure the 10-12 slide narrative arc using the Guy Kawasaki / YC pattern and the Duarte Sparkline emotion arc.
For org charts and flow diagrams, use inline SVG via mermaid skill.
Phase 5 — Deck Mechanics
Navigation:
// Keyboard: ← → arrows, Space to advance// Click anywhere to advance// Progress bar at bottom// Slide number: "7 / 12"// ESC = overview mode (grid of all slides)
Animations:
Slide transition: fade (300ms) — no flashy wipes
Content: stagger-in (elements appear 100ms apart)
Charts: draw-in animation on enter
All: prefers-reduced-motion respected
Phase 6 — Speaker Notes
Generate pitch/speaker-notes.md:
## Slide 2: Problem**Hook**: Open with the story of [persona] who...
**Key point**: The stat that lands hardest is...
**Anticipate**: VCs will ask "why hasn't X solved this?"
**Answer**: Because [incumbent insight]...
**Time**: 90 seconds
