b-open-io

deck-creator

This skill should be used when the user asks to "create a deck", "make a presentation", "build slides", "pitch deck", "investor deck", "sales presentation", "design a deck", "interactive presentation", "presenter mode", "HTML slides", "video background deck", "deck playground", "visual deck editor", "deck builder UI", or needs to generate a complete slide deck with consistent visual style. Handles theme selection, copywriting, content planning, parallel slide generation, PDF stitching, and optional HTML presenter with video backgrounds.

b-open-io 4 Updated 3mo ago

Resources

2
GitHub

Install

npx skillscat add b-open-io/gemskills/deck-creator

Install via the SkillsCat registry.

SKILL.md

Deck Creator

Create professional presentation decks with consistent visual style, compelling copy, AI-generated slide images, and optional interactive HTML presenter with video backgrounds.

When to Use

  • Create a presentation or slide deck
  • Build a pitch deck, proposal, or sales presentation
  • Design slides for a product launch, company overview, or partnership
  • Generate a complete deck from a document, requirements, or brief
  • Restyle an existing deck with a different art style
  • Build an interactive HTML presenter for live presentations
  • Add ambient video backgrounds to a deck
  • Use the "deck playground", "visual deck editor", or "deck builder UI"

Interactive Playground

For a visual UI to design and generate decks interactively:

cd ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator && bun run scripts/playground_server.ts --dir <deck-dir>

The playground provides style browsing, per-slide editing, live preview, and one-click generation. Supports both Gemini PNG and text-layered HTML modes.

IMPORTANT: Invoke this skill via the Skill tool (Skill("deck-creator")). Do not manually execute phases without loading this skill first. Follow the workflow step by step; do not skip phases.

Process Overview

Five phases, executed in order:

  1. Discovery - Gather context, examples, and references
  2. Theme - Establish visual style, color palette, and optional art style
  3. Copy - Plan and write slide content using marketing principles
  4. Generation - Create all slides in parallel with consistent style + stitch PDF
  5. Present - Build interactive HTML presenter (optional, for live presentations)

Phase 1: Discovery

Gather comprehensive information before creating any slides. Ask in tiers:

Tier 1 (Always): Audience, Purpose, Content sources/materials, Slide count (recommend 10-16)

Tier 2 (Context): Presentation setting, Brand guidelines, Style references, Existing assets

Tier 3 (If live/conference/webinar): PDF only or HTML presenter too? Video backgrounds? Browse styles visually or auto-suggest?

If example decks or references are provided, analyze visual style, layout patterns, typography, and messaging patterns.

Phase 2: Theme Selection

Establish a consistent visual system before generating slides.

Option A: Theme Factory (recommended) - Install and invoke theme-factory skill for a cohesive palette.

Option B: Manual - Define Background, Primary, Secondary, Text, and Accent colors from brand guidelines.

Style Parameters

Aspect Ratio: 16:9 (--size 2K produces 1376x768)
Art Style: (optional) Any style ID from browsing-styles skill (e.g., pixl, cybr, deco)
Typography: Headlines Bold 48-64px, Body 18-24px, Stats Extra Bold 72-96px
Layout: Card-based with generous whitespace

Apply a consistent art style across all slides using --style <id>. Browse 169 styles with the browsing-styles skill. When a style is specified, add --style <id> to every generation command.

If the user wants an HTML presenter, add a Presenter Settings block to THEME.md:

## Presenter Settings
Format: html+pdf
Video Background: none | url(<url>) | veo-global | veo-per-slide
Transition: 500ms
Auto-Advance: false

Document the complete theme in THEME.md.

Phase 3: Copy & Content Planning

Apply copywriting principles: one message per slide, headlines tell the story, show don't tell, problem-solution-proof structure, concrete over abstract, end with action.

Create a DECK-PLAN.md with deck overview and per-slide plan (headline, content points, visual concept, key message). Continue gathering content until 10-16 slides are fully planned. Do not proceed to generation until the content plan is complete.

Consult references/copywriting.md for headline formulas, persuasion patterns, and audience-specific framing. Consult references/slide-types.md for detailed templates per slide type.

Phase 4: Slide Generation

Pre-Generation Checklist

  • Theme defined (colors, typography, style)
  • All slides planned (10-16 slides)
  • Each slide has: headline, content, visual concept
  • Output directory created

Generate Slides

Launch all slide generation agents simultaneously. Spawn one gemskills:content-specialist agent per slide via the Task tool. Include theme spec, slide prompt, output path, and the generate-image command:

cd ${CLAUDE_PLUGIN_ROOT}/skills/generate-image && bun run scripts/generate.ts "prompt" --aspect 16:9 --size 2K [--style <id>] --output <path>

Limit to 12 parallel generations. For 14+ slides, generate in two batches.

Post-Generation

Verify all slides exist, stitch into PDF, verify PDF, create DECK-INDEX.md, provide summary. Consult references/generation.md for detailed prompt templates, PDF stitching methods, and post-generation steps.

Do not read generated slide images back into context. Ask the user to visually inspect.

Phase 5: Present (Optional)

If the user requested an HTML presenter (or THEME.md specifies Format: html+pdf):

cd ${CLAUDE_PLUGIN_ROOT}/skills/deck-creator && bun run scripts/build_presenter.ts --dir <deck-dir> [--open]

For video backgrounds, either pass --video <url> with a user-provided URL, or generate an ambient loop via Veo 3.1 first. Consult references/presenter.md for full CLI options, video modes, keyboard shortcuts, and verification checklist.

Output Structure

project/deck/
├── THEME.md              # Visual style definition
├── DECK-PLAN.md          # Content planning document
├── DECK-INDEX.md         # Final deck inventory
├── deck.pdf              # Stitched presentation PDF
├── presenter.html        # Interactive HTML presenter (optional)
├── ambient.mp4           # AI-generated video background (optional)
├── PRESENTER-CONFIG.json # Per-slide video config (optional)
└── slides/
    ├── 01-title.png
    └── ...

Best Practices

  1. Uniform Style - Every slide uses the same theme parameters
  2. Consistent Terminology - Same words for concepts throughout
  3. Visual Hierarchy - Headlines largest, supporting text smaller
  4. Generous Whitespace - Avoid overcrowding slides
  5. Center-Weight Important Elements - Account for cropping
  6. High Contrast - Ensure readability on projectors
  7. No Orphan Slides - Every slide connects to the narrative

Reference Files

  • references/slide-types.md - Expanded templates for each slide type
  • references/copywriting.md - Marketing copy principles and headline formulas
  • references/generation.md - Prompt templates, parallel generation, PDF stitching
  • references/presenter.md - HTML presenter build, video modes, keyboard shortcuts
  • examples/ - Example deck plans and outputs