Content Presentation

Content Presentation Skill

Purpose

Generate complete, brand-aligned presentation decks in multiple frameworks. This skill handles everything from narrative structure to slide-by-slide code output with speaker notes.

---

Framework Selection Guide

Choose the framework based on the use case. If the user has no preference, default based on context:

| Framework | Best For | Default When | |---|---|---| | Slidev | Developer talks, markdown-first workflows, Vue-based teams, heavy code content | The audience is technical, the content has code, or no preference stated | | Reveal.js | Classic presentations, maximum browser compatibility, HTML/CSS/JS control | The user needs broad compatibility or prefers HTML-native authoring | | Spectacle | React teams, custom interactive components, rich animations | The team uses React or needs interactive slide components | | Raw HTML | Single portable file, no build step, email-embeddable, offline delivery | The user needs one file they can send or open anywhere |

See frameworks/ for detailed guides on each:

• frameworks/slidev.md -- Markdown syntax, layouts, components, theming
• frameworks/reveal-js.md -- Setup, transitions, fragments, speaker notes, PDF export
• frameworks/spectacle.md -- React components, deck structure, themes, animations
• frameworks/raw-html.md -- Single-file structure, inline CSS, embedded fonts, responsive slides

---

Generation Flow

Follow this sequence exactly. Do not skip steps.

Step 1: Read Brand Context

Read these files if they exist:

• brand/BRAND.md -- identity, audience, differentiators
• brand/VISUAL.md -- colors, fonts, logo rules
• brand/VOICE.md -- tone, vocabulary, anti-patterns

If brand/ is missing, ask the user for basic color, font, and tone preferences before proceeding. Do not generate a deck with default blue-and-white styling.

Step 2: Clarifying Questions

Ask 3-5 targeted questions. Adapt based on what you already know:

1. Length: How many slides? (Offer a range based on type: pitch deck 10-15, conference talk 30-40, sales deck 12-18.)
2. Audience: Who is in the room? Technical depth, seniority, familiarity with the topic.
3. Purpose: What should the audience do after the last slide? (Buy, approve, learn, share, hire.)
4. Data available: Do you have specific stats, case studies, screenshots, or code to include?
5. Delivery context: Live talk, async read, recorded video, or print handout?

Do not ask all five if prior context answers some of them.

Step 3: Recommend Framework

Based on answers, recommend a framework with a one-sentence rationale. Let the user override.

Step 4: Generate Narrative Structure

Before writing any slide code, output a narrative outline:

Slide 1: [Title] -- Hook that establishes stakes
Slide 2: [The Problem] -- What the audience feels today
Slide 3: [Why It Matters] -- Cost of inaction
...
Slide N: [Close] -- Single clear CTA

Each entry: slide number, working title, one-line purpose. Include speaker note hints where the narrative arc shifts (tension, release, pivot).

Step 5: User Approves Structure

Wait for explicit approval or revision requests. Do not proceed to code until the user says the structure is right.

Step 6: Generate Slide-by-Slide Content

For each slide, output:

• The slide content (title, body, visuals, code blocks)
• Speaker notes (what to say, timing cues, transition phrases)
• Design notes where relevant (use the chart here, animate this list)

Apply brand CSS custom properties from VISUAL.md throughout. See brand-integration.md for mapping rules.

Step 7: Deliver Output

Output depends on framework:

• Slidev: slides.md + style.css + package.json with setup instructions
• Reveal.js: index.html + css/theme.css or single HTML file
• Spectacle: React project files with component structure
• Raw HTML: Single .html file with everything inlined

---

Narrative Arc

Every presentation follows this backbone. See presentation-narrative.md for deep guidance.

Hook -- Open with a statement, question, or stat that creates tension. Never open with "Hi, I'm..."

Problem -- Define the pain the audience already feels. Be specific. Use their language.

Solution -- Present your answer. Show, don't tell. Demo > description.

Evidence -- Back it up. Data, case studies, testimonials, live proof.

CTA -- One clear action. Not three. One.

The arc is not rigid. Conference talks may loop Problem-Solution-Evidence multiple times. Sales decks front-load the CTA as a preview. Workshop decks interleave teaching and exercises. Adapt the arc to the format.

---

One Idea Per Slide

This is non-negotiable. If a slide has two ideas, split it into two slides. Slides are cheap. Audience confusion is expensive.

Test: can you describe the slide's purpose in one sentence without using "and"? If not, split it.

---

Speaker Notes as First-Class Content

Speaker notes are not an afterthought. For every slide, write notes that include:

• What to say (key talking points, not a script)
• Timing guidance ("spend 60 seconds here", "this is your 10-minute mark")
• Transition phrase to the next slide
• Audience interaction cues ("pause for questions", "ask for a show of hands")

---

Anti-Slop Rules for Slides

These patterns are banned. If you catch yourself generating them, stop and redesign.

| Banned Pattern | Why | Replace With | |---|---|---| | "Let's dive in!" as a title | Filler. Says nothing. | A specific hook: a stat, a question, a bold claim. | | "Agenda" slide | Audiences do not care about your outline. | Jump straight to the hook. If you must orient, use a single visual timeline. | | Bullet-pocalypse (5+ bullets) | Slides are not documents. Reading bullets kills engagement. | Split into multiple slides, use visuals, or restructure as a comparison. | | Stock photo defaults | Generic handshake photos destroy credibility. | Use diagrams, data, screenshots, or no image at all. | | "Questions?" as the last slide | Weak ending. The CTA should be last. | End with CTA. Add "Q&A" as a verbal transition, not a slide. | | "Thank you" slide | Wastes the final impression. | Repeat the CTA or leave your contact info integrated into the close. | | Wall of text | If they wanted to read, they would read a document. | Reduce to key phrase + speaker notes carry the detail. | | Orphan slides | A slide with no clear connection to the one before or after it. | Add transitions in speaker notes; restructure the narrative. |

---

Design Principles

• Typography hierarchy: Title (large, bold), subtitle (medium, regular weight), body (readable size). Never more than two font sizes on one slide.
• Dark vs light: Pick one mode per deck. Do not mix. Use brand VISUAL.md preference if specified.
• Consistent rhythm: Similar slide types should have similar layouts. A "stat card" slide should look the same every time it appears.
• Charts over screenshots: Never screenshot an Excel chart. Generate the chart in SVG or use the framework's charting tools.
• Whitespace is a feature: Empty space directs attention. Resist the urge to fill every pixel.
• Color with purpose: Use accent color for emphasis, not decoration. One accent per slide maximum.

---

Slide Patterns

See slide-patterns.md for reusable patterns:

• Title slide
• Section divider
• Stat card
• Comparison (2-column)
• Code walkthrough
• Image + caption
• Quote
• Chart/data
• Team grid
• Timeline
• CTA/close

Each pattern includes layout guidance, what content belongs, and what does not.

---

Brand Integration

See brand-integration.md for the full mapping from brand/VISUAL.md to presentation CSS.

Summary:

• Map brand primary color to --slide-accent
• Map brand fonts to --slide-heading-font and --slide-body-font
• Place logo on the title slide (centered or top-left) and in the footer of every subsequent slide (small, bottom-right)
• Use brand secondary colors for chart palettes and section dividers

---

Templates

Pre-built narrative structures for common deck types. See templates/:

| Template | Framework | Slides | Use Case | |---|---|---|---| | pitch-deck.slidev.template | Slidev | 10-15 | Investor pitch | | conference-talk.reveal.template | Reveal.js | 30-40 | Technical conference talk | | client-proposal.html.template | Raw HTML | 15-25 | Consulting proposal | | sales-deck.slidev.template | Slidev | 12-18 | B2B sales | | workshop.spectacle.template | Spectacle | Varies | Interactive workshop |

Templates are starting points, not constraints. Adapt slide count, order, and content to the specific need.

---

Error Handling

• If the user provides no content (just "make me a deck"), push back. Ask what the deck is about, who it is for, and what it should achieve.
• If the brand/ directory is missing, offer to proceed with user-specified colors/fonts or to run content-setup first.
• If the user asks for a format the framework does not support (e.g., PDF from Slidev), explain the export path and provide instructions.

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: vstorm-co
• Source: vstorm-co/content-skills
• License: MIT
• Homepage: https://vstorm.co/

Install and usage instructions live in the source repository linked above.