Generate RevealJS HTML presentations with reliable layout, professional typography, and effective visual communication. Use when creating slide decks, pitch presentations, technical talks, or any reveal.js output.

RevealJS Presenter Skill When to Use This Skill Use this skill when: Creating a RevealJS presentation from content/outline Converting document content into slide format Building a pitch deck, technical talk, or educational presentation User requests "slides," "presentation," "deck," or mentions RevealJS This skill produces a single self contained HTML file with embedded CSS and CDN references. Part 1: RevealJS Foundation 1.1 Required Configuration Always initialize RevealJS with these settings: Why these values: center: true — Let RevealJS handle vertical centering. Do not fight this with flexbox on sections. width: 1920, height: 1080 — Standard HD ratio. Content scales automatically. margin: 0.08 — Provides breathing room at viewport edges. transition: 'fade' — Professional, non distracting. Avoid 'zoom', 'convex', etc. 1.2 Base HTML Structure 1.3 Base CSS Reset Apply these styles to normalize RevealJS behavior: Part 2: Theme Selection Themes are complete specifications. Before generating any slides, read the appropriate theme file from the themes/ directory. Themes control both visual styling AND content strategy. 2.1 What Themes Control Each theme file specifies: 1. CSS Variables — Colors, typography sizes, spacing, fonts 2. Typography Application — How CSS variables apply to elements 3. Word Limits — Maximum words per slide type 4. Slide Type Preferences — Which types to prefer, use sparingly, or avoid 5. Content Rhythm — Impact vs information slide ratios 6. Structure Rules — Max bullets, card counts, splitting guidance 2.2 Default Theme Use themes/bold.md unless the user specifies otherwise. 2.3 How to Apply a Theme 1. Read the entire theme file before generating slides 2. Follow the theme's Content Strategy section for word limits and slide type choices 3. Include all CSS from the theme's variables and typography sections 4. Combine with the base CSS reset from Part 1.3 2.4 Available Themes Theme File Content Approach Bold themes/bold.md Minimal words, dramatic impact, simple structures, 40%+ impact slides Corporate themes/corporate.md Information dense, detailed content, complex structures allowed Future themes may include minimal.md (clean, understated design). Part 3: Core Components 3.1 The Bar (Accent Element) A horizontal bar used as a visual anchor and section indicator. Usage: 3.2 Content Container For slides that need width constraint: 3.3 Card Component 3.4 Grid Layouts 3.5 Slide Footer A persistent footer element for branding or context. Placed outside the slides container. HTML placement (before the reveal div): When to use: Corporate presentations, conference talks, any context where persistent branding helps. Mistakes: Too much information, large font size, distracting from content. Part 4: Slide Types Each slide type includes: HTML structure, when to use, and common mistakes. 4.1 Title Slide The opening slide. Sets tone and context. When to use: Opening slide only. Mistakes: Too much text, including agenda, adding logos/footer clutter. 4.2 Section Break Transitions between major sections. Creates visual pause and establishes section identity through color. Color rotation for visual rhythm: Vary section break backgrounds to create distinct visual identities for each major topic. Suggested rotation: Section Background Bar Accent 1 (Problem/Context) var( bg dark) bar accent 3 2 (Solution) var( accent 1) bar accent 2 3 (Details) var( accent 2) default 4 (Future/CTA) var( bg dark) bar accent 2 Example with accent background: When to use: Between major sections (3 5 per presentation typically). Mistakes: Using for every topic change, adding content beyond the section name, using the same color for all section breaks. 4.3 Single Word / Phrase Maximum impact. One idea, massive type. When to use: Emphasizing a key concept, creating a moment, transitional pause. Mistakes: Overuse (more than 2 3 per presentation), using for concepts that need explanation. 4.4 Hero Stat The dramatic data moment. ONE number dominates. When to use: Your most important data point. Usually only 1 2 per presentation. Mistakes: Using hero treatment for every stat, burying in other content. 4.5 Standard Stat Prominent data, but not the hero moment. When to use: Supporting data points, secondary metrics. Mistakes: Making all stats the same size, no context labels. 4.6 Stat Cluster 2 3 related statistics shown together for comparison. When to use: Comparing related metrics, showing before/after, dashboard style summary. Mistakes: More than 3 stats, mixing unrelated data. 4.7 Quote Attributed quotation with visual emphasis. When to use: Expert authority, memorable phrases, user testimonials. Mistakes: Long quotes (aim for under 20 words), missing attribution. 4.8 Single Assertion (Impact Statement) A dramatic statement that deserves its own slide. Uses impact typography with optional inline highlights. With hero treatment: With context label: When to use: Thesis statements, paradigm shifts, key assertions that define your argument. The moments where you want the audience to pause and absorb a single idea. Mistakes: Overuse (2 4 per presentation max), adding supporting text, using for minor points, forgetting highlights for emphasis. 4.9 Assertion + Evidence The workhorse slide. Clear claim supported by visual proof. When to use: Most content slides. Default choice when presenting information. Mistakes: Burying assertion in body text, no visual evidence, bullet lists instead of visuals. 4.10 Card Grid (2 4 items) Multiple items with equal visual weight. When to use: Features, benefits, options, categories—items with equal importance. Mistakes: More than 4 items (split into multiple slides), walls of text in cards. 4.11 Timeline / Phases Sequential progression over time. When to use: Project phases, historical progression, step by step processes. Mistakes: More than 5 phases (simplify or split), too much detail per phase. 4.12 Comparison (A vs B) Direct contrast between two options or states. When to use: Problem/solution, old/new, us/them comparisons. Mistakes: Unfair comparisons, too much text, more than 2 items. 4.13 Icon Grid Concept cluster with visual anchors. Icons provide scannable landmarks. When to use: Principles, values, feature categories—abstract concepts that benefit from visual anchors. Mistakes: Generic icons that don't aid understanding, too many items. 4.14 Code Block For technical presentations. Syntax highlighting required. CSS for code blocks: When to use: Technical talks, API demos, implementation examples. Mistakes: Too much code (max ~15 lines), no syntax highlighting, showing boilerplate. 4.15 Image with Caption Full or large image with minimal text. When to use: Product screenshots, photos, diagrams that need to dominate. Mistakes: Small images with lots of surrounding text, poor image quality. 4.16 Breath Slide Minimal content. Creates pause, lets audience process. When to use: After dense sections, before major transitions, emphasizing key messages. Mistakes: Adding more content, using too frequently. 4.17 Closing / CTA Final slide. Clear next step. When to use: Final slide. Mistakes: No clear CTA, too much contact info, "Questions?" as the only content. Part 5: Inline Visualizations For presentation specific diagrams that don't require external tools. 5.1 Process Flow (Horizontal) 5.2 Simple Bar Chart (SVG) 5.3 Concept Relationship (Hub and Spoke) 5.4 When to Use External Tools Use inline SVG/HTML for: Simple process flows (3 5 steps) Basic bar/line comparisons Concept diagrams (hub spoke, venn like) Icon based illustrations Use external tools (Chart.js, D3, Mermaid) for: Data with more than 5 7 points Interactive visualizations Complex relationships Precise data representation Part 6: Universal Content Principles These principles apply regardless of theme. For specific word limits, slide type preferences, and rhythm rules, consult the theme file (Part 2). 6.1 One Concept Per Slide Every slide should answer: "What is the ONE thing I want them to take from this?" If you can't answer in one sentence, split the slide. 6.2 Assertion Evidence Structure Replace bullet points with: 1. Assertion: Complete sentence stating the point (as headline) 2. Evidence: Visual that supports the assertion Instead of: Use three separate slides: "Development time drops 50% with automated tooling" + chart "Defect rates decreased after implementation" + data "Total cost of ownership reduced by $2M annually" + comparison 6.3 Slide Count Guidance 1 slide per minute of speaking time is a rough maximum 20 minute talk = 15 25 slides typical More slides with less content each is better than fewer dense slides Section breaks and breath slides count toward total 6.4 Progressive Disclosure For complex information, reveal sequentially using RevealJS fragments: 6.5 Word Limits and Rhythm Consult the theme file for specific word limits per slide type and content rhythm rules. These vary significantly between themes: Bold theme: Strict limits (~12 words for assertions), 40%+ impact slides Corporate theme: Generous limits (~50 words for assertion+evidence), information dense Part 7: Anti Patterns 7.1 Presentation Anti Patterns The Data Dump Every slide full of data without interpretation. Fix: One insight per slide. State conclusion first. The Script Reader Slides contain the speaker's full script as bullet points. Fix: Slides show what you can't say; you say what you can't show. The Template Trap Generic template applied without considering how design serves message. Fix: Start from communication need, not template options. The Animation Circus Transitions and effects on everything. Fix: Animation only for progressive disclosure or emphasis. Default to none. Bullet Point Disease Every slide is a bullet list. Fix: Use assertion evidence structure. If you need a list, question whether it needs to be a slide. 7.2 RevealJS Specific Anti Patterns Fighting the Framework Adding flexbox centering when center: true is set, or vice versa. Fix: Choose one approach. This skill uses center: true with section level text alignment. Viewport Unit Escalation Using vw units for font sizes without upper bounds, leading to absurdly large text. Fix: Always use clamp() with rem based maximums: clamp(4rem, 10vw, 8rem) . Fixed Pixel Dimensions Hardcoding pixel values for fonts and spacing that don't scale. Fix: Use CSS variables with clamp() for responsive sizing. Ignoring Slide Dimensions Forgetting that RevealJS scales content to fit configured dimensions. Fix: Design for 1920×1080. Test at multiple window sizes. Background Color Inline Styles Using style="background: color" on sections instead of data background color . Fix: Use data background color="var( bg dark)" for RevealJS to handle properly. Typography Utility Specificity Creating utility classes like .stat , .label , .lead without sufficient specificity. Problem: .reveal p has higher specificity (class + element) than .stat alone (just class), so typography utilities on <p elements get overridden. Fix: Always prefix typography utilities with .reveal : use .reveal .stat , .reveal .label , .reveal .lead , etc. This ensures they override the base .reveal p styles. Color Utility Specificity Creating color ut

revealjs-presenter