Agent skill

slide-creator

Generate presentation slides as self-contained HTML files with brand-consistent styling

dormantSelf-containedInstructions only1,354 words

From ekatasingh1107/b2b-gtm-skills · 99 skills · 2 · pushed 2026-04-11

What it does when it runs

Generate presentation slides as self-contained HTML files with brand-consistent styling

Read from the skill and the 1 file bundled beside it. A skill’s own description is written to be selected by an agent, so it describes the job and not the dependencies.

Keys and connectors you must supply: None found.
Hosts it reaches: No third-party host appears in the skill or its bundled files.
Tool permissions it declares: No allowed-tools in the frontmatter. It only issues instructions, so there is nothing to bound.
Actions present in the files: None. Instructions only.

Ask about slide-creator

Opens your assistant with this page's verified links already in the prompt.

Is this safe to install?Claude ChatGPT

Adapt it to my stackClaude ChatGPT

What else do I need for it to workClaude ChatGPT

Rather ask a human? Talk to Cheetah

Install it

View source on GitHub ↗

git clone --depth 1 --filter=blob:none --sparse https://github.com/ekatasingh1107/b2b-gtm-skills.git /tmp/b2b-gtm-skills
git -C /tmp/b2b-gtm-skills sparse-checkout set "skills/capabilities/slide-creator"
mkdir -p ~/.claude/skills/slide-creator
cp -R "/tmp/b2b-gtm-skills/skills/capabilities/slide-creator/." ~/.claude/skills/slide-creator/

Picked up without a restart. A project skill of the same name is shadowed by your personal one. For one repository only, swap ~/.claude/skills for .claude/skills. Claude Code docs ↗

The folder is the same in every client that implements the format — 46 of them — so if yours is not above, only the destination changes.

The skill

Source on GitHub ↗

Reproduced in full from ekatasingh1107/b2b-gtm-skills/blob/eae8dd0bb98da1c8e84abd297066a87015dd860f/skills/capabilities/slide-creator/SKILL.md, which is licensed MIT (repository). 1,354 words, 11 headings.

Slide Creator

Generates complete presentation decks as self-contained HTML files. Each slide is a standalone HTML page with consistent styling, brand colors from config, and professional typography. Supports pitch decks, proposals, case study presentations, training decks, and conference talks. Outputs individual HTML files per slide plus an index file for navigation.

Prerequisites

agency.config.json in the project root
Topic, audience, and key message inputs from user
Optional: visual-brand output for extended brand styling
Optional: case study data from case-study-builder

Phase 0: Read Config

Read agency.config.json from the project root.
Extract brand values:
- agency.name, agency.tagline, agency.domain
- brand.colors.primary, brand.colors.secondary, brand.colors.accent
- brand.fonts.heading, brand.fonts.body
- brand.logo_url (if available)
Extract services[] for service-related decks.
Extract case_studies[] for available proof points.
Extract outreach.tone for voice consistency.

Phase 1: Gather Inputs

Collect from the user:

Topic: what the presentation covers
Audience: prospects, clients, internal team, investors, conference attendees
Key points: 3-7 core messages to communicate
Slide count: target number (default: 10-15)
Format: pitch deck, proposal, case study, training, thought leadership
Duration: 5 min, 15 min, or 30 min presentation

Phase 2: Structure the Slide Deck

Determine the presentation arc based on format:

Pitch Deck (prospect-facing):

1. Title slide (agency name, tagline, topic, date)
2. Agenda / what we'll cover
3. Problem / pain point (audience-specific)
4. Cost of inaction (data or scenario)
5. Solution overview (your approach)
6. How it works (3-step process)
7. Case study / proof
8. Results (key metrics, before/after)
9. Differentiators (why us vs alternatives)
10. Packages or scope overview
11. Next steps / CTA
12. Contact / thank you

Proposal Deck:

1. Title slide
2. Agenda
3. Understanding your challenge (mirror their problem)
4. Our approach / methodology
5. Scope of work (phase by phase)
6. Timeline with milestones
7. Team / who you'll work with
8. Case study 1 (relevant proof)
9. Case study 2 (if available)
10. Investment / pricing
11. Next steps / CTA
12. Contact / Q&A

Case Study Deck:

1. Title slide
2. Agenda
3. Client background
4. The challenge (metrics before)
5. Our approach
6-8. Implementation details (3 slides)
9. Results (metrics, before/after comparison)
10. Client quote / testimonial
11. How we can replicate this for you
12. CTA / contact

Thought Leadership / Conference:

1. Title + speaker intro
2. Agenda
3. The big question / hook
4-8. Content sections (insight, data, frameworks)
9. Key takeaways (3 bullets max)
10. Summary slide
11. Q&A
12. Contact / follow-up CTA

Adjust slide count to match user's target. Merge or expand sections as needed.

Phase 3: Generate Content Per Slide

For each slide, define:

SLIDE [N]: [SLIDE TYPE]
===
Title: [Headline -- max 8 words, active voice]
Subtitle: [Supporting line if needed]

Content:
- [Bullet 1 -- max 12 words]
- [Bullet 2 -- max 12 words]
- [Bullet 3 -- max 12 words]
[Max 4 bullets per slide. Prefer 3.]

Visual element:
[Chart type, image description, icon set, diagram reference, or data callout]

Speaker notes:
[2-4 sentences of what to say. Include transition to next slide.]

Layout: [title-centered / text-left-image-right / full-bleed-stat / quote / two-column / timeline]

Content rules:

One idea per slide, no exceptions
Headlines tell the story -- someone should understand the deck reading only titles
Bullets are fragments, not sentences
Data slides: one key metric displayed large, supporting context below
Quote slides: large quote text, attribution, minimal decoration
No slide exceeds 40 words of visible text (speaker notes excluded)

Phase 4: Generate HTML Files

Generate one HTML file per slide. Each file is self-contained with inline CSS.

HTML structure per slide:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>[Deck Title] -- Slide [N]</title>
  <style>
    /* Reset and base */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: '[body_font]', system-ui, sans-serif;
      background: #FFFFFF;
      color: #1a1a1a;
      width: 1280px;
      height: 720px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Brand colors as CSS custom properties */
    :root {
      --color-primary: [primary_hex];
      --color-secondary: [secondary_hex];
      --color-accent: [accent_hex];
      --font-heading: '[heading_font]', system-ui, sans-serif;
      --font-body: '[body_font]', system-ui, sans-serif;
    }

    /* Slide container */
    .slide {
      width: 1280px;
      height: 720px;
      padding: 60px 80px;
      position: relative;
    }

    /* Typography scale */
    h1 { font-family: var(--font-heading); font-size: 48px; line-height: 1.1; color: var(--color-primary); }
    h2 { font-family: var(--font-heading); font-size: 36px; line-height: 1.2; }
    h3 { font-family: var(--font-heading); font-size: 28px; line-height: 1.3; }
    p, li { font-family: var(--font-body); font-size: 22px; line-height: 1.5; }

    /* Slide number */
    .slide-number {
      position: absolute;
      bottom: 30px;
      right: 40px;
      font-size: 14px;
      color: #999;
    }

    /* Agency logo/name */
    .brand-footer {
      position: absolute;
      bottom: 30px;
      left: 40px;
      font-size: 14px;
      color: #999;
    }

    /* Layout-specific styles follow per slide type */
  </style>
</head>
<body>
  <div class="slide">
    <!-- Slide content here -->
    <span class="brand-footer">[agency.name]</span>
    <span class="slide-number">[N] / [total]</span>
  </div>
</body>
</html>

Layout templates:

Layout	Structure
title-centered	Large heading centered vertically, subtitle below, brand prominent
text-left-image-right	60/40 split, content left, visual placeholder right
full-bleed-stat	One large number centered, label and context below
quote	Large italic quote text, attribution bottom-right
two-column	Equal columns for comparison or before/after
timeline	Horizontal steps with markers and labels
agenda	Numbered list with visual hierarchy

Styling rules:

Background alternates: white slides and primary-color slides (with white text)
Title slide uses primary color as background
Data/stat slides use accent color for the key number
Consistent padding: 60px top/bottom, 80px left/right
Slide dimensions: 1280x720 (16:9 standard)
All fonts loaded via system fonts or Google Fonts link in <head>

Phase 5: Generate Index File

Create an index.html navigation file:

<!-- index.html -->
<nav>
  <h1>[Deck Title]</h1>
  <p>[Subtitle] -- [Date]</p>
  <ol>
    <li><a href="slide-01.html">[Slide 1 title]</a></li>
    <li><a href="slide-02.html">[Slide 2 title]</a></li>
    <!-- ... -->
  </ol>
</nav>

Include keyboard navigation JavaScript for presenting:

Right arrow / Space: next slide
Left arrow: previous slide
Escape: return to index
F: toggle fullscreen

Phase 6: Narrative Flow Check

Review the full deck for:

Story arc:

Does slide 1 hook attention?
Does the problem-to-solution flow logically?
Is there a clear emotional peak (case study results, key insight)?
Does the final slide have a single, clear CTA?

Pacing:

No more than 2 text-heavy slides in a row
Alternate between data, visual, and text slides
15-min presentations: approximately 1 minute per slide
5-min pitches: approximately 30 seconds per slide

Redundancy check:

No repeated points across slides
Each slide earns its place

Flag issues and suggest reordering or consolidation before finalizing.

Phase 7: Output

Return structured JSON plus the HTML files:

{
  "presentation": {
    "title": "[Deck title]",
    "audience": "[Target audience]",
    "format": "[pitch/proposal/case-study/thought-leadership]",
    "duration_minutes": 15,
    "total_slides": 12,
    "brand": {
      "primary_color": "#XXXXXX",
      "secondary_color": "#XXXXXX",
      "accent_color": "#XXXXXX",
      "heading_font": "[font]",
      "body_font": "[font]"
    },
    "slides": [
      {
        "number": 1,
        "type": "title",
        "title": "Slide headline",
        "subtitle": "Supporting text",
        "content": [],
        "layout": "title-centered",
        "speaker_notes": "What to say during this slide",
        "duration_seconds": 30,
        "html_file": "slide-01.html"
      }
    ],
    "files_generated": [
      "index.html",
      "slide-01.html",
      "slide-02.html"
    ],
    "title_narrative": "Reading just the slide titles tells this story: ..."
  }
}

Write all HTML files to the specified output directory (default: ./slides/[deck-name]/).

Example Usage

Trigger phrases:

"Create a pitch deck for a prospect meeting"
"Build a proposal presentation for [client name]"
"Make a case study deck with HTML slides"
"I need a 10-slide presentation about CRO"
"Generate conference talk slides on D2C growth"
"Create slides for the investor update"

User: Create a pitch deck for a Shopify CRO proposal
Assistant: [reads config, structures 12-slide pitch with problem/solution/proof/CTA arc, generates branded HTML files per slide with navigation index]

User: I need a 5-minute case study deck for Kibi Sports
Assistant: [reads case study data from config, generates tight 8-slide HTML deck with before/after metrics, client quote, and CTA slide]

Files bundled with it

These load only when the skill asks for them, so they cost nothing until it runs.

skill.meta.json

Other skills for the same job

Different authors, same problem. Matched on the words in the skill name, across every library in the catalogue except this one.

graphic-slide-deck by Varnan-Tech · 626
content-creator by thatrebeccarae · 130
slide-outline by manojbajaj95 · 95
battlecard-creator by composio-community · 2
content-asset-creator by edupegoretti · 0

Need help setting it up?

This page tells you what slide-creator does and what it needs. Cheetah builds the agent setup it runs inside: data, CRM, sequencing and the guardrails.

Book a call →

The directory stays free. There is nothing gated behind this.