| name | presentation |
| description | Create stunning Reveal.js slide decks with cinematic animations and editorial design. Use this skill when the user asks to "create a presentation", "build a slide deck", "make a pitch deck", "create slides", "build a keynote", "make a deck", or mentions presentations, slides, pitch decks, or Reveal.js. Produces single-file HTML presentations with inline CSS/SVG/JS. |
| version | 1.0.0 |
Presentation
Create a complete Reveal.js presentation as a single index.html file with inline CSS, SVG, and JavaScript. No build step, no bundler — just one file that opens in any browser.
Architecture
Always produce a single index.html containing:
- Reveal.js v5 loaded from CDN (
https://unpkg.com/reveal.js@5/dist/reveal.css and reveal.js)
- All CSS in a single
<style> block
- All SVG diagrams inline in the HTML
- All JavaScript in a single
<script> block at the end
- Resolution: 1920x1080 (
width: 1920, height: 1080 in Reveal config)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DECK TITLE</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=..." rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/reveal.js@5/dist/reveal.css">
<style></style>
</head>
<body>
<div class="reveal"><div class="slides">
<section>...</section>
</div></div>
<script src="https://unpkg.com/reveal.js@5/dist/reveal.js"></script>
<script></script>
</body>
</html>
Interactive Workflow
Before generating any code, ask the user these questions and suggest good defaults:
- What is the presentation about? (topic, audience, purpose)
- How many slides? Suggest a count based on content (10-15 for a pitch deck, 20-30 for a technical talk)
- What content do you have? (bullet points, text, images, data)
- Theme preference?
Present theme options:
Light Themes
- Warm Paper — Cream background (#efedea), dark ink, red accents, faint grid texture. Editorial/magazine feel. Best for: pitch decks, investor presentations.
- Clean White — Pure white, blue accents, generous whitespace. Corporate/modern. Best for: product demos, corporate decks.
- Soft Gray — Light gray (#f8f9fa), teal accents, subtle borders. Best for: technical talks, engineering reviews.
Dark Themes
- Ink — Near-black (#1a1a1a), white text, amber accents. Dramatic/executive. Best for: keynotes, conference talks.
- Midnight — Dark blue (#0f172a), cyan/purple accents, glowing highlights. Best for: tech/startup demos.
- Terminal — Black background, green monospace text, scanline effect. Best for: developer-facing content, live coding decks.
-
Font style? Suggest based on theme:
- Editorial: Space Grotesk + JetBrains Mono (default for Warm Paper)
- Corporate: Inter + IBM Plex Mono (default for Clean White)
- Technical: Instrument Sans + Source Code Pro (default for Soft Gray)
- Dramatic: Space Grotesk + JetBrains Mono (default for dark themes)
-
Animations? (cinematic zoom-ins, auto-reveals, animated charts — or minimal/none)
After gathering answers, generate the complete deck. Ship the first draft fast — the user designs by reacting to something visible.
Design System
Build a custom CSS theme using the chosen theme's custom properties. Never use a pre-built Reveal.js theme. See references/design-principles.md for complete theme definitions.
Typography: Use the font pair matching the chosen theme. Load via Google Fonts CDN.
Background: Add subtle texture matching the theme — faint grid for Warm Paper, clean for White, scanlines for Terminal. Never use a flat untextured background.
Statement text: Bold, uppercase, monospace headlines at 80-100px for maximum impact. Use CSS classes like .statement, .statement.sm, .statement.lg for sizing variants.
Reset Reveal defaults: Override Reveal.js default styles with !important on font-family, color, text-transform, text-shadow, and letter-spacing for .reveal, .reveal h1, .reveal h2, .reveal h3, .reveal p.
Slide Types
Create these CSS patterns for different slide purposes:
- Title slide — Large title with an accent-colored letter, monospace subtitle with date/tagline
- Section header — Left-aligned, uppercase, 88px, with a colored underline bar
- Statement slide — Single bold statement centered on screen, impact-first
- Content slide — Heading + visual (flow diagram, table, icon grid, SVG illustration)
- Evidence slide — Screenshots/images visible immediately (no click-to-reveal)
- Data slide — Native SVG charts with hover tooltips
- Closing slide — Minimal, restrained, forward-looking ("The Beginning...", "DEMO")
Animation Principles
Animations are narrative pacing tools, not decoration. Every animation must earn its place.
Entrance animations:
- Scale-up for immersion: start at
scale(0.35), end at scale(1), duration 2.0-2.5s
- Use
cubic-bezier(0.16, 1, 0.3, 1) (ease-out-expo) for cinematic entrances
- Add
opacity: 0 → 1 alongside scale for polish
Auto-reveal for dramatic moments:
- Replace click-to-reveal (
fragment) with CSS animations scoped to section.present
- 5-second delay is the sweet spot for letting audiences read a setup line before a punchline
- Use subtle
opacity fade only (no translateY) for single-word reveals
Decorative motion:
- Animated cursor movement for UI mockups: 9-second loop with
cubic-bezier(0.4,0,0.2,1)
- Focus rings and highlights following the cursor
- No blinking text cursors — they're distracting without narrative purpose
Reset on navigation:
- Listen to Reveal.js
slidechanged event
- Reset animation state (counters to 0, clip rects to 0 width) when leaving a slide
- Replay animations when returning to a slide
Reveal.on('slidechanged', event => {
});
Visual Content
Use inline SVG for all diagrams and visualizations — never external charting libraries.
Flow diagrams: Flexbox with .flow-box and .flow-arrow elements
Data tables: Styled <table> with monospace font, colored header cells
Icon grids: Flexbox with SVG icons and monospace labels
Code blocks: Dark background (#1a1a1a) with green/amber syntax highlighting
For embedded screenshots:
- Use actual screenshots, never HTML recreations — screenshots are proof of authenticity
- Apply consistent border-radius (16px) and subtle box-shadow matching other images
- Size by legibility: if text inside a screenshot is small, make the image larger
- Rename files semantically:
customer-demand.png not Screenshot 2026-03-13...
Narrative Structure
Slide ordering:
- Lead with the problem (emotional, relatable)
- Present the solution (clear, visual)
- Show evidence: emotion first (customer quotes, demand signals), then numbers (charts, metrics)
- Authority/validation last (investor quotes, press, team)
- Close minimally — the last slide is not the climax
Headlines:
- Confidence without arrogance: "The market is real" not "Smart money sees it too"
- Parallel structure for paired evidence: "They want it." / "They love it."
- Sharpen to the minimum: one clear statement beats two diluted ones
- Test every title for emotional tone — does it sound like bragging?
- Precise terminology: "users" if they haven't paid, "customers" if they have
Evidence placement:
- Every quantitative claim gets a chart or number on the same slide
- Every qualitative claim gets a customer voice on the same or next slide
- Frame competition as market validation, not threat
Iteration Workflow
The first pass is a draft for the user to react to. Expect 2-3 rounds of feedback.
- Confirm destructive operations by slide TITLE, not slide number
- When offering design alternatives, present combinable numbered options
- After 3 failed layout iterations, stop pixel-nudging and rethink the architecture
- When the user challenges quality, be honest about what's not working and rebuild from scratch
Additional Resources
For detailed design principles, consult:
references/design-principles.md — Visual composition, typography, themingreferences/animation-guide.md — CSS/JS animation patterns, easing curves, SVG animation
