Generate full HTML presentations using Slidev, Reveal.js, Spectacle, or raw HTML with brand integration. Use when user wants to create a presentation, slide deck, pitch deck, conference talk, workshop materials, keynote, sales deck, or client proposal slides. Even if user just says "slides" or "deck", use this skill.

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:

Length: How many slides? (Offer a range based on type: pitch deck 10-15, conference talk 30-40, sales deck 12-18.)
Audience: Who is in the room? Technical depth, seniority, familiarity with the topic.
Purpose: What should the audience do after the last slide? (Buy, approve, learn, share, hire.)
Data available: Do you have specific stats, case studies, screenshots, or code to include?
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.

content-presentation