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:

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.

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/:

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.