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: Reveal . initialize ( { hash : true , center : true , transition : 'fade' , transitionSpeed : 'fast' , backgroundTransition : 'fade' , width : 1920 , height : 1080 , margin : 0.08 , minScale : 0.2 , maxScale : 2.0 } ) ; 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 <! DOCTYPE html

< html lang = " en "

< head

< meta charset = " UTF-8 "

< meta name = " viewport " content = " width=device-width, initial-scale=1.0 "

< title

[PRESENTATION TITLE] </ title

< link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.css "

< link rel = " stylesheet " href = " https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/theme/white.min.css "

< link rel = " preconnect " href = " https://fonts.googleapis.com "

< link rel = " preconnect " href = " https://fonts.gstatic.com " crossorigin

< link href = " https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap " rel = " stylesheet "

< style

/ Theme variables and styles go here / </ style

</ head

< body

< div class = " reveal "

< div class = " slides "

</ div

</ div

< script src = " https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.6.1/reveal.min.js "

</ script

< script

Reveal . initialize ( { hash : true , center : true , transition : 'fade' , transitionSpeed : 'fast' , backgroundTransition : 'fade' , width : 1920 , height : 1080 , margin : 0.08 , minScale : 0.2 , maxScale : 2.0 } ) ; </ script

</ body

</ html

1.3 Base CSS Reset Apply these styles to normalize RevealJS behavior: / === RESET & NORMALIZATION === / .reveal { font-family : var ( --font-body ) ; font-weight : 400 ; color : var ( --text-primary ) ; } .reveal .slides section { text-align : left ; padding : 60 px ; box-sizing : border-box ; } .reveal .slides section .centered { text-align : center ; } .reveal h1 , .reveal h2 , .reveal h3 , .reveal h4 { font-family : var ( --font-display ) ; font-weight : 700 ; color : var ( --text-primary ) ; text-transform : none ; letter-spacing : -0.02 em ; line-height : 1.1 ; margin : 0 0 0.5 em 0 ; } .reveal p { margin : 0 0 1 em 0 ; line-height : 1.5 ; } .reveal ul , .reveal ol { margin : 0 ; padding : 0 ; list-style-position : outside ; margin-left : 1.5 em ; } .reveal li { margin-bottom : 0.5 em ; line-height : 1.4 ; } 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: CSS Variables — Colors, typography sizes, spacing, fonts Typography Application — How CSS variables apply to elements Word Limits — Maximum words per slide type Slide Type Preferences — Which types to prefer, use sparingly, or avoid Content Rhythm — Impact vs information slide ratios 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 Read the entire theme file before generating slides Follow the theme's Content Strategy section for word limits and slide type choices Include all CSS from the theme's variables and typography sections 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. .bar { width : var ( --bar-width ) ; height : var ( --bar-height ) ; background : var ( --accent-1 ) ; margin-bottom : var ( --space-md ) ; } .bar-accent-2 { background : var ( --accent-2 ) ; } .bar-accent-3 { background : var ( --accent-3 ) ; } .bar-accent-4 { background : var ( --accent-4 ) ; } .centered .bar { margin-left : auto ; margin-right : auto ; } Usage: < div class = " bar "

</ div

< h2

Section Title </ h2

3.2 Content Container For slides that need width constraint: .content-wrap { max-width : var ( --content-max-width ) ; width : 100 % ; } .centered .content-wrap { margin : 0 auto ; } 3.3 Card Component .card { background : var ( --bg-secondary ) ; border-radius : var ( --card-radius ) ; padding : var ( --card-padding ) ; border-left : 4 px solid var ( --accent-1 ) ; } .card-accent-2 { border-left-color : var ( --accent-2 ) ; } .card-accent-3 { border-left-color : var ( --accent-3 ) ; } .card-accent-4 { border-left-color : var ( --accent-4 ) ; } .card h3 { font-size : var ( --size-h4 ) ; margin-bottom : var ( --space-xs ) ; } .card p { font-size : var ( --size-body ) ; color : var ( --text-secondary ) ; margin : 0 ; } 3.4 Grid Layouts .grid-2 { display : grid ; grid-template-columns : repeat ( 2 , 1 fr ) ; gap : var ( --space-lg ) ; } .grid-3 { display : grid ; grid-template-columns : repeat ( 3 , 1 fr ) ; gap : var ( --space-md ) ; } .grid-4 { display : grid ; grid-template-columns : repeat ( 4 , 1 fr ) ; gap : var ( --space-md ) ; } / For uneven splits / .grid-2-1 { display : grid ; grid-template-columns : 2 fr 1 fr ; gap : var ( --space-lg ) ; } .grid-1-2 { display : grid ; grid-template-columns : 1 fr 2 fr ; gap : var ( --space-lg ) ; } 3.5 Slide Footer A persistent footer element for branding or context. Placed outside the slides container. .slide-footer { position : fixed ; bottom : 30 px ; left : var ( --slide-padding ) ; font-size : var ( --size-label ) ; font-weight : 500 ; letter-spacing : 0.05 em ; text-transform : uppercase ; color : var ( --text-muted ) ; z-index : 1000 ; } / Adapt for dark backgrounds / section [ data-background-color ] .slide-footer , .dark-slide .slide-footer { color : rgba ( 255 , 255 , 255 , 0.4 ) ; } HTML placement (before the reveal div): < body

< div class = " slide-footer "

Company Name | Presentation Title </ div

< div class = " reveal "

... </ div

</ body

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. < section class = " centered "

< p class = " label "

Category or Context </ p

< h1

Presentation Title </ h1

< div class = " bar "

</ div

< p class = " lead "

Subtitle or tagline goes here </ p

</ section

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. < section class = " centered " data-background-color = " var(--bg-dark) "

< h1 class = " text-on-dark "

Section Title </ h1

< div class = " bar bar-accent-2 "

</ div

< p class = " lead text-on-dark "

Optional brief context </ p

</ section

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: < section class = " centered " data-background-color = "

D45D00

"

< h1 class = " text-on-dark "

The Problem </ h1

< p class = " text-on-dark " style = " opacity : 0.8 ; "

Why the current paradigm is broken. </ p

</ section

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. < section class = " centered "

< h1 style = " font-size : var ( --size-stat-hero ) ; "

Simplify. </ h1

</ section

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. < section class = " centered "

< p class = " label "

Context Label </ p

< p class = " stat-hero text-accent-1 "

87% </ p

< p class = " stat-label "

of users completed onboarding </ p

</ section

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. < section class = " centered "

< p class = " label "

Expected Outcome </ p

< div class = " bar "

</ div

< p class = " stat text-accent-2 "

50% </ p

< p class = " stat-label "

reduction in development time </ p

</ section

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. < section

< h2

Key Metrics </ h2

< div class = " bar "

</ div

< div class = " grid-3 " style = " margin-top : var ( --space-lg ) ; "

< div class = " centered "

< p class = " stat text-accent-1 "

50% </ p

< p class = " stat-label "

faster development </ p

</ div

< div class = " centered "

< p class = " stat text-accent-2 "

75% </ p

< p class = " stat-label "

prototype success </ p

</ div

< div class = " centered "

< p class = " stat text-accent-3 "

30% </ p

< p class = " stat-label "

reduced overhead </ p

</ div

</ div

</ section

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. < section class = " centered "

< blockquote style = " font-size : var ( --size-h2 ) ; font-style : italic ; max-width : 900 px ; margin : 0 auto ; "

"The best interface is no interface." </ blockquote

< p class = " text-muted " style = " margin-top : var ( --space-md ) ; "

— Golden Krishna </ p

</ section

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. < section class = " centered "

< p class = " impact "

AI agents are the < span class = " highlight-2 "

primary developers </ span

. </ p

</ section

With hero treatment: < section class = " centered "

< p class = " impact-hero "

Languages built for < span class = " highlight-3 "

humans </ span

create failure modes for < span class = " highlight-1 "

AI </ span

. </ p

</ section

With context label: < section class = " centered "

< p class = " label "

The Inversion </ p

< div class = " bar "

</ div

< p class = " impact "

Human interaction becomes the < span class = " highlight-2 "

refinement layer </ span

. </ p

</ section

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. < section

< h2

User engagement increased 43% after redesign </ h2

< div class = " bar "

</ div

< div class = " grid-1-2 "

< div

< p class = " lead "

Key insight or context that supports the assertion goes here. Keep it brief. </ p

</ div

< div

< img src = " chart.svg " alt = " Engagement chart showing increase "

</ div

</ div

</ section

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. < section

< h2

Platform Capabilities </ h2

< div class = " bar "

</ div

< div class = " grid-2 " style = " margin-top : var ( --space-lg ) ; "

< div class = " card "

< h3

Intelligent Agents </ h3

< p

AI-powered assistants that reason across organizational knowledge </ p

</ div

< div class = " card card-accent-2 "

< h3

Context Networks </ h3

< p

Unified access to information across all systems </ p

</ div

< div class = " card card-accent-3 "

< h3

Custom Applications </ h3

< p

Accelerated development with built-in AI </ p

</ div

< div class = " card card-accent-4 "

< h3

Automated Workflows </ h3

< p

Event-driven processes without manual triggers </ p

</ div

</ div

</ section

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. < section

< h2

Implementation Roadmap </ h2

< div class = " bar "

</ div

< div class = " grid-4 " style = " margin-top : var ( --space-lg ) ; "

< div

< p class = " stat text-accent-1 " style = " font-size : var ( --size-h2 ) ; "

01 </ p

< h4

Foundation </ h4

< p class = " text-muted "

Months 1–3 </ p

< p class = " text-secondary "

Core infrastructure and tooling </ p

</ div

< div

< p class = " stat text-accent-2 " style = " font-size : var ( --size-h2 ) ; "

02 </ p

< h4

Integration </ h4

< p class = " text-muted "

Months 4–6 </ p

< p class = " text-secondary "

Platform connections </ p

</ div

< div

< p class = " stat text-accent-3 " style = " font-size : var ( --size-h2 ) ; "

03 </ p

< h4

Intelligence </ h4

< p class = " text-muted "

Months 7–9 </ p

< p class = " text-secondary "

Advanced capabilities </ p

</ div

< div

< p class = " stat text-accent-4 " style = " font-size : var ( --size-h2 ) ; "

04 </ p

< h4

Maturity </ h4

< p class = " text-muted "

Months 10–12 </ p

< p class = " text-secondary "

Optimization </ p

</ div

</ div

</ section

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. < section

< h2

Before & After </ h2

< div class = " bar "

</ div

< div class = " grid-2 " style = " margin-top : var ( --space-lg ) ; "

< div class = " card " style = " border-left-color : var ( --text-muted ) ; "

< p class = " label text-muted "

Before </ p

< h3

Manual Process </ h3

< p

Hours of repetitive work, prone to errors, inconsistent results </ p

</ div

< div class = " card "

< p class = " label "

After </ p

< h3

Automated Workflow </ h3

< p

Minutes to complete, accurate, consistent every time </ p

</ div

</ div

</ section

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. < section

< h2

Core Principles </ h2

< div class = " bar "

</ div

< div class = " grid-3 " style = " margin-top : var ( --space-lg ) ; "

< div class = " centered "

< div class = " icon-wrap "

< svg width = " 64 " height = " 64 " viewBox = " 0 0 24 24 " fill = " var(--accent-1) "

< path d = " ... " /> </ svg

</ div

< h4

Security </ h4

< p class = " text-secondary "

Enterprise-grade protection </ p

</ div

< div class = " centered "

< div class = " icon-wrap "

< svg width = " 64 " height = " 64 " viewBox = " 0 0 24 24 " fill = " var(--accent-2) "

< path d = " ... " /> </ svg

</ div

< h4

Scalability </ h4

< p class = " text-secondary "

Grows with your needs </ p

</ div

< div class = " centered "

< div class = " icon-wrap "

< svg width = " 64 " height = " 64 " viewBox = " 0 0 24 24 " fill = " var(--accent-3) "

< path d = " ... " /> </ svg

</ div

< h4

Simplicity </ h4

< p class = " text-secondary "

Easy to use and maintain </ p

</ div

</ div

</ section

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. < section

< h2

API Integration </ h2

< div class = " bar "

</ div

< pre

< code class = " language-javascript "

// Initialize the client const client = new MagicConstructor({ apiKey: process.env.SECRET_KEY, workspace: 'production' }); // Query with context const result = await client.query({ prompt: "Summarize Q3 sales", context: ['sales-data', 'quarterly-reports'] }); </ code

</ pre

< p class = " text-muted " style = " margin-top : var ( --space-sm ) ; "

Full documentation at docs.coolproject.io </ p

</ section

CSS for code blocks: .reveal pre { font-family : var ( --font-mono ) ; font-size : var ( --size-small ) ; background : var ( --bg-dark ) ; color : var ( --text-on-dark ) ; padding : var ( --space-md ) ; border-radius : var ( --card-radius ) ; text-align : left ; width : 100 % ; box-sizing : border-box ; } .reveal pre code { font-family : inherit ; line-height : 1.6 ; } 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. < section class = " centered "

< img src = " product-screenshot.png " alt = " Product interface " style = " max-height : 70 vh ; border-radius : var ( --card-radius ) ; box-shadow : 0 20 px 60 px rgba ( 0 , 0 , 0 , 0.15 ) ; "

< p class = " text-muted " style = " margin-top : var ( --space-md ) ; "

New dashboard interface </ p

</ section

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. < section class = " centered " data-background-color = " var(--bg-secondary) "

< p class = " label "

Key Takeaway </ p

< div class = " bar "

</ div

< h2

Complexity is the enemy of execution. </ h2

</ section

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. < section class = " centered " data-background-color = " var(--bg-dark) "

< h1 class = " text-on-dark "

Ready to Begin? </ h1

< div class = " bar bar-accent-2 "

</ div

< p class = " lead text-on-dark "

Contact us at hello@example.com </ p

< p class = " text-muted " style = " margin-top : var ( --space-xl ) ; "

example.com/demo </ p

</ section

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) < div class = " process-flow "

< div class = " process-step "

< div class = " process-node " style = " background : var ( --accent-1 ) ; "

</ div

< p class = " process-label "

Input </ p

</ div

< div class = " process-arrow "

→ </ div

< div class = " process-step "

< div class = " process-node " style = " background : var ( --accent-2 ) ; "

</ div

< p class = " process-label "

Process </ p

</ div

< div class = " process-arrow "

→ </ div

< div class = " process-step "

< div class = " process-node " style = " background : var ( --accent-3 ) ; "

</ div

< p class = " process-label "

Output </ p

</ div

</ div

.process-flow { display : flex ; align-items : center ; justify-content : center ; gap : var ( --space-md ) ; } .process-step { text-align : center ; } .process-node { width : 80 px ; height : 80 px ; border-radius : 50 % ; margin : 0 auto var ( --space-xs ) ; } .process-arrow { font-size : 2 rem ; color : var ( --text-muted ) ; } .process-label { font-size : var ( --size-body ) ; font-weight : 500 ; } 5.2 Simple Bar Chart (SVG) < svg viewBox = " 0 0 400 200 " style = " max-width : 600 px ; "

< rect x = " 50 " y = " 120 " width = " 60 " height = " 60 " fill = " var(--accent-1) " /> < rect x = " 130 " y = " 80 " width = " 60 " height = " 100 " fill = " var(--accent-2) " /> < rect x = " 210 " y = " 40 " width = " 60 " height = " 140 " fill = " var(--accent-3) " /> < rect x = " 290 " y = " 20 " width = " 60 " height = " 160 " fill = " var(--accent-4) " />

< text x = " 80 " y = " 195 " text-anchor = " middle " font-size = " 14 " fill = " var(--text-secondary) "

Q1 </ text

< text x = " 160 " y = " 195 " text-anchor = " middle " font-size = " 14 " fill = " var(--text-secondary) "

Q2 </ text

< text x = " 240 " y = " 195 " text-anchor = " middle " font-size = " 14 " fill = " var(--text-secondary) "

Q3 </ text

< text x = " 320 " y = " 195 " text-anchor = " middle " font-size = " 14 " fill = " var(--text-secondary) "

Q4 </ text

</ svg

5.3 Concept Relationship (Hub and Spoke) < svg viewBox = " 0 0 400 300 " style = " max-width : 500 px ; "

< line x1 = " 200 " y1 = " 150 " x2 = " 100 " y2 = " 60 " stroke = " var(--text-muted) " stroke-width = " 2 " /> < line x1 = " 200 " y1 = " 150 " x2 = " 300 " y2 = " 60 " stroke = " var(--text-muted) " stroke-width = " 2 " /> < line x1 = " 200 " y1 = " 150 " x2 = " 100 " y2 = " 240 " stroke = " var(--text-muted) " stroke-width = " 2 " /> < line x1 = " 200 " y1 = " 150 " x2 = " 300 " y2 = " 240 " stroke = " var(--text-muted) " stroke-width = " 2 " />

< circle cx = " 200 " cy = " 150 " r = " 50 " fill = " var(--accent-1) " /> < text x = " 200 " y = " 155 " text-anchor = " middle " fill = " white " font-weight = " 600 "

Core </ text

< circle cx = " 100 " cy = " 60 " r = " 35 " fill = " var(--accent-2) " /> < text x = " 100 " y = " 65 " text-anchor = " middle " fill = " white " font-size = " 12 "

Feature A </ text

< circle cx = " 300 " cy = " 60 " r = " 35 " fill = " var(--accent-3) " /> < text x = " 300 " y = " 65 " text-anchor = " middle " fill = " white " font-size = " 12 "

Feature B </ text

< circle cx = " 100 " cy = " 240 " r = " 35 " fill = " var(--accent-4) " /> < text x = " 100 " y = " 245 " text-anchor = " middle " fill = " white " font-size = " 12 "

Feature C </ text

< circle cx = " 300 " cy = " 240 " r = " 35 " fill = " var(--accent-1) " /> < text x = " 300 " y = " 245 " text-anchor = " middle " fill = " white " font-size = " 12 "

Feature D </ text

</ svg

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: Assertion: Complete sentence stating the point (as headline) Evidence: Visual that supports the assertion Instead of: Benefits: • Faster development • Better quality • Lower costs 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: < section

< h2

Three Key Factors </ h2

< div class = " bar "

</ div

< div class = " grid-3 "

< div class = " fragment "

< h4

Factor One </ h4

< p

Explanation here </ p

</ div

< div class = " fragment "

< h4

Factor Two </ h4

< p

Explanation here </ p

</ div

< div class = " fragment "

< h4

Factor Three </ h4

< p

Explanation here </ p

</ div

</ div

</ section

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

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 utilities like .text-on-dark without sufficient specificity. Problem: .reveal .lead (two classes) has higher specificity than .text-on-dark (one class), so class="lead text-on-dark" shows the lead's color instead of white. Fix: Always prefix color utilities with .reveal : use .reveal .text-on-dark , .reveal .text-muted , .reveal .highlight-1 , etc. Missing Margin Reset on Stats Stats and stat-hero elements inherit margin-bottom from .reveal p , creating unwanted gaps. Fix: Add margin-bottom: 0 to .reveal .stat and .reveal .stat-hero rules. Section Background Override Adding background to .reveal .slides section blocks data-background-color from showing. Problem: RevealJS applies data-background-color behind the section element. If the section has an opaque background, the color is hidden behind a white/colored box. Fix: Never set background on .reveal .slides section . Set overall page background on .reveal only. Use data-background-color on individual sections for colored backgrounds. Part 8: Speaker Notes 8.1 RevealJS Notes Syntax Speaker notes are added inside an