reveal-slide-builder

Imported from olivMertens/copilot-skills (skills/reveal-slide-builder/SKILL.md). Install upstream with npx skills add olivMertens/copilot-skills --skill reveal-slide-builder. Copyright stays with the author.

Reveal.js Slide Builder — Mastermind Edition

Create world-class, audience-focused presentations with reveal.js through expert guidance on animations, transitions, fragments, auto-animate, layouts, accessibility, offline delivery, and PDF export.

When to Use This Skill

Use this skill whenever you need to:

• Design a new presentation deck — "create a presentation", "build slides", "new reveal.js deck", "plan a talk"
• Architect slide flow & interactivity — "how should I structure this", "what's the narrative arc", "flow for comparison", "progressive reveal"
• Master animations & transitions — "animate my slides", "add movement to", "what animations work for this", "transition between concepts"
• Leverage reveal.js plugins — "add interactivity", "enable annotations", "embed live demos", "highlight code", "search across slides"
• Build accessible, audience-focused presentations — "tailor to executives", "tech audience", "offline deck", "make it visual"
• Export for different formats — "prepare for PDF", "optimize for print", "create presenter notes", "multi-page export"
• Plan reveal.js special features — "auto-animate elements", "custom fragments", "iframe backgrounds", "video backgrounds", "background transitions"
• Master advanced patterns — "nested fragments", "staggered reveals", "code walkthroughs", "diagram animations", "speaker markup"

Workflow Overview — Five Phases

The skill follows a structured 5-phase workflow optimized for audience impact:

1. Audience & Intent Discovery — Who? Why? What's your outcome?
2. Content Mapping & Narrative Arc — Structure, flow, interaction needs
3. Animation & Plugin Strategy — Match features to message
4. Layout, Pacing, & Accessibility — Visual hierarchy, readability, inclusive design
5. Implementation & Export — HTML structure, reveal.js config, PDF & speaker notes

PHASE 1: Audience & Intent Discovery

Critical Questions (Ask These First)

1. Primary Audience (Select one or more; tailor recommendations)

• Executives / C-level → Focus on outcome, ROI, risk, decision-making speed
• Technical specialists → Focus on architecture, internals, tradeoffs, live proof
• End-users / customers → Focus on value, simplicity, benefits, confidence
• Mixed → Multi-layered content, optional advanced slides, branch logic by role
• Self-directed viewer → Assume no speaker; design for clarity without narration

2. Presentation Intent (What do you want them to do or believe after?)

• Inform/Educate — Knowledge transfer, understanding a concept or system
• Persuade/Sell — Conviction, urgency, commitment, call-to-action
• Report/Review — Facts, metrics, accountability, tracking performance
• Demonstrate/Explore — Live interaction, discovery, workshop, problem-solving
• Inspire/Motivate — Emotion, vision, narrative arc, journey
• Hybrid — Multiple intents at different points; signpost transitions clearly

3. Delivery Context

• Live presentation with speaker (room interaction, pausing, speaker notes, speaker view)
• Self-guided viewer (kiosk, online, download, watch alone) → no external dependencies
• Hybrid (share online + present live at different times) → works offline AND via link
• Async recording (video of you presenting; slides viewed after) → optimize for solo viewing

4. Duration & Pacing

• Timeboxed (e.g., 20-minute pitch, 5-minute teaser) → plan fragments and slide count
• Self-paced (viewer controls speed) → more content per slide, progressive reveal
• Live with Q&A (speaker controls flow) → leave pauses, design for interruptions
• Workshop / Interactive (multiple stops for activities) → embed polls, time-sensitive prompts

5. Key Outcomes (Rank top 3)

• Understand concept X (knowledge)
• Decide on option Y (choice)
• Take action Z (behavior)
• Remember insight A (retention)
• Feel confidence / emotion B (trust / motivation)

Action: After answering these, state your audience & intent in 1–2 sentences so I can tailor everything that follows.

PHASE 2: Content Mapping & Narrative Arc

Narrative Structures — Choose the One That Fits

1. Problem → Solution → Proof → Call-to-Action

Best for: Persuasion, product pitches, change management

• Slide 1–2: Establish the problem (pain, constraint, opportunity cost)
• Slide 3–4: Introduce your solution (how it solves the problem)
• Slide 5–7: Show proof (case study, metric, demo, customer testimonial)
• Slide 8: Call-to-action (next step, commitment, decision point)

2. Current State → Desired State → Path → Commitment

Best for: Roadmaps, transformation, strategy

• Slide 1–2: Where we are now (baseline, as-is, constraint)
• Slide 3–4: Where we want to be (vision, desired outcome)
• Slide 5–7: How we get there (steps, timeline, dependencies, risks)
• Slide 8–9: What we commit to (next milestone, resources, accountability)

3. Why → How → What → When

Best for: Technical deep dives, system design

• Slide 1–2: Why this matters (motivation, context, urgency)
• Slide 3–5: How it works (architecture, mechanism, tradeoffs)
• Slide 6–7: What it looks like (code, demo, configuration, interface)
• Slide 8: When you can use it (prerequisites, constraints, availability)

4. Hook → Data → Insight → Decision → Action

Best for: Reports, analytics, data-driven decisions

• Slide 1: Hook (striking number, unexpected fact, question)
• Slide 2–4: Data (charts, metrics, trends, comparisons)
• Slide 5: Insight (interpretation, what the data means, why it matters)
• Slide 6–7: Decision options (go/no-go, which path, tradeoffs)
• Slide 8: Action (next review, monitoring, accountability)

5. Observe → Predict → Control → Act

Best for: Demos, live workflows, hands-on learning

• Slide 1–2: Observe (show the current state, walk through a workflow)
• Slide 3–4: Predict (annotate, show what happens when, draw hypotheses)
• Slide 5–6: Control (demonstrate variables, show options, test edge cases)
• Slide 7–8: Act (conclude, make a decision, set next steps)

Content Mapping Checklist

Questions to Ask Yourself

1. Main Message — One sentence that captures your core idea

   • ✓ If you could say only ONE thing, what is it?

2. Content Density (average per slide)

   • Minimal: Headline + 1 visual (title, opening, transitions)
   • Light: 3–5 bullet points + visual (high level, executive)
   • Moderate: Comparison table, diagram, 6–8 items (detailed explanation)
   • Dense: Code, SQL, API spec, data table (technical audience, optional deep dive)

3. Interaction Needs

   • Read-only — No interaction needed; audience watches passively
   • Click-to-reveal — Progressive disclosure; speaker clicks to reveal next point
   • Annotate/draw — Speaker marks up live during presentation (live debate, whiteboarding)
   • Poll/Q&A — Audience input during presentation (engagement, feedback)
   • Embedded live content — Dashboard, code playground, live feed (requires network if not offline)

4. Media Mix

   • Text-dominant — Words, quotations, data (reports, policy, academic)
   • Visual-dominant — Photos, diagrams, illustrations (design, architecture, brand)
   • Hybrid — Balanced text + visuals (most effective for mixed audiences)
   • Rich media — Video, animated SVG, embedded widgets (creative, hands-on)

5. Offline Requirement

   • Fully offline → All assets bundled locally; no CDN, no network fetch; works from file://
   • Online OK — Can use CDN, network embeds (iframes, live dashboards), videos from YouTube
   • Hybrid — Offline by default (file://), but supports ?online mode for live embeds

PHASE 3: Animation & Plugin Strategy

Animation Philosophy: Match the Message, Not the Mode

Principle: Every animation should serve a purpose — guide attention, clarify relationships, emphasize pacing. Avoid motion that distracts or confuses.

Core Animations & When to Use Them

Fade — The Safe Default

<p class="fragment">Fade in</p>
<p class="fragment fade-out">Fade out</p>

• Use for: Introducing text, subtly revealing points, emphasizing sequence
• Best audience: All (executives, technical, end-users)
• Pacing: 0.5–0.8s (fast enough to feel active, slow enough to follow)
• Pro tip: Combine fade-out on previous point with fade-in on next for "turn the page" feel

Grow / Shrink — Changing Importance

<li class="fragment grow">Important point</li>
<li class="fragment shrink">De-emphasized option</li>

• Use for: Showing hierarchy, moving focus, eliminating alternatives, building a funnel
• Best audience: Technical (architects, product), Business (decision makers)
• Pacing: 0.6–0.8s (moderate, not too sudden)
• Pro tip: Pair with color change (fragment highlight-red) to reinforce choice

Highlight (Color Change) — Drawing Attention

<p class="fragment highlight-red">Critical issue</p>
<p class="fragment highlight-green">Success metric</p>
<p class="fragment highlight-blue">New feature</p>

• Use for: Identifying problems (red), successes (green), new info (blue), reversible callouts
• Best audience: Business, Technical, End-users
• Pacing: Immediate (no delay) or paired with fade-in
• Pro tip: Use semantic colors (red=danger, green=success, blue=info) so color is self-explanatory

Slide Directions — Spatial Flow

<p class="fragment fade-up">Bottom-to-top entry (positive, building momentum)</p>
<p class="fragment fade-down">Top-to-bottom entry (heavy, serious)</p>
<p class="fragment fade-left">Right-to-left (coming from future, retrospective)</p>
<p class="fragment fade-right">Left-to-right (natural reading, returning)</p>

• Use for: Directing eye flow, signaling progression (up = growth, down = decline)
• Best audience: Visual learners, design-conscious audiences
• Pacing: 0.6–0.9s (momentum matters)
• Pro tip: Use consistently (all growth slides fade-up, all concerns fade-down) to build muscle memory

Strike & Semi-Fade — Invalidation & Uncertainty

<p class="fragment strike">This approach no longer works</p>
<p class="fragment semi-fade-out">Previous assumption (now 50% visible, less important)</p>
<p class="fragment fade-in-then-semi-out">Point made, then de-emphasized for next point</p>

• Use for: Invalidating assumptions, showing what NOT to do, shifting focus, old vs. new
• Best audience: Technical, Business (design thinking, retrospectives)
• Pacing: 0.5s (quick, definitive)
• Pro tip: Pair strike with new recommendation on same slide for "then we tried this" narrative

Stagger / Fragment Index — Controlled Pacing

<ul>
  <li class="fragment" data-fragment-index="1">First (appears on step 1)</li>
  <li class="fragment" data-fragment-index="2">Second (appears on step 2)</li>
  <li class="fragment" data-fragment-index="3">Third (appears on step 3)</li>
</ul>

<!-- Or: same index for simultaneous reveal -->
<p class="fragment" data-fragment-index="1">Title</p>
<img class="fragment" data-fragment-index="1" src="image.png" />

• Use for: Building lists one-by-one, controlling audience pace, combining elements on same step
• Best audience: All (gives speaker control over pacing)
• Pacing: 1–2 steps per 30 seconds (readable, not rushed)
• Pro tip: For executives, show 1 point per 30 seconds. For technical, 1 point per 15 seconds.

Current-Visible / Highlight-Current — Focus + Context

<p class="fragment highlight-current-red">Step 1 (highlighted, then fades to normal color)</p>
<p class="fragment highlight-current-red">Step 2 (highlighted, then fades back)</p>
<p class="fragment highlight-current-red">Step 3 (highlighted, then fades back)</p>

• Use for: Walking through options, step-by-step guides, "now look here" moments
• Best audience: End-users, workshops, tutorials
• Pacing: 0.5s highlight, 1s pause before next step
• Pro tip: Pairs well with speaker notes ("Notice how X changes…")

Advanced: Nested Fragments — Sequential Effects

Wrap fragments inside fragments to apply multiple animations to the same element.

<!-- Effect 1: Fade in. Effect 2: Turn red. Effect 3: Fade out. -->
<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Complex animation sequence
    </span>
  </span>
</span>

• Use for: Emphasizing then de-emphasizing, building tension, multi-step transformations
• Best audience: Creative, design, storytelling-focused
• Pro tip: Limit to 2–3 nesting levels; beyond that, it's hard to follow on screen

Advanced: Auto-Animate — Magic Element Transitions

Auto-Animate automatically animates matching elements between adjacent slides. Elements match by:

1. Text content (if identical)
2. Image/video src (if identical)
3. data-id attribute (explicit matching, takes priority)

Example 1: Simple Text Movement

<section data-auto-animate>
  <h1>Concept</h1>
</section>

<section data-auto-animate>
  <h1 style="margin-top: 200px; color: red;">Concept</h1>
</section>

Result: The <h1> smoothly moves down and changes to red.

Example 2: Adding Elements (Implicit Animation)

<section data-auto-animate>
  <ul>
    <li>Point A</li>
  </ul>
</section>

<section data-auto-animate>
  <ul>
    <li>Point A</li>
    <li>Point B</li>
    <li>Point C</li>
  </ul>
</section>

Result: Point A stays in place; Points B and C fade in below.

Example 3: Explicit Data-ID Matching (for non-text elements)

<section data-auto-animate>
  <div data-id="box" style="width: 100px; height: 100px; background: salmon;"></div>
</section>

<section data-auto-animate>
  <div data-id="box" style="width: 300px; height: 100px; background: steelblue;"></div>
</section>

Result: The box smoothly expands horizontally and changes color.

Example 4: Code Walkthrough (with data-line-numbers)

<section data-auto-animate>
  <pre data-id="code"><code data-trim data-line-numbers>
    function add(a, b) {
      return a + b;
    }
  </code></pre>
</section>

<section data-auto-animate>
  <pre data-id="code"><code data-trim data-line-numbers>
    function add(a, b) {
      const sum = a + b;
      console.log(`Sum: ${sum}`);
      return sum;
    }
  </code></pre>
</section>

Result: Code smoothly expands to show the new lines.

Auto-Animate Configuration

Reveal.initialize({
  autoAnimateEasing: 'ease-out',        // CSS easing function
  autoAnimateDuration: 0.8,             // Seconds per animation
  autoAnimateUnmatched: false,          // true = fade in unmatched; false = appear instantly
});

When to Use Auto-Animate

• Code walkthroughs — Add variables, error handling, refactoring step-by-step
• Architecture evolution — Show system growing from simple to complex
• Diagram morphing — Transform one diagram into another (e.g., flat list → tree structure)
• Data transformation — Show input → processing → output
• NOT recommended for: Fast pacing (auto-animate can feel slow); simple list reveals (fragments are simpler)

Pro tip: Combine auto-animate with speaker notes for "As we add error handling..." narration.

Transition Styles — Between Slides

Default Transition: Slide

Slides come in from right by default. Smooth, familiar, low cognitive load.

Alternative Transitions

<section data-transition="fade">Subtle, formal</section>
<section data-transition="zoom">Dramatic, expanding</section>
<section data-transition="convex">3D angle in</section>
<section data-transition="concave">3D angle out (receding)</section>

Asymmetric Transitions — Different in/out

<section data-transition="slide-in fade-out">Enter from left, exit with fade</section>

Transition Speed

<section data-transition-speed="fast">Snappy (300ms)</section>
<section data-transition-speed="slow">Deliberate (1000ms)</section>
<!-- default: 600ms -->

Background Transitions — Separate from slide transition

<section data-background="#ffffff" data-background-transition="slide">
  Slide content transitions in, background transitions separately
</section>

When to Use What

• Slide (default): Most presentations; directional, familiar, fast
• Fade: Formal, serious, executive (soft, understated)
• Zoom: Dramatic moments, emphasis, crescendos
• Convex/Concave: Design-forward, creative audiences (don't overuse)
• None: Rapid-fire content, quiz-like pacing (no delay between slides)

Pro tip: Vary transitions subtly (3–4 different types across a 40-minute deck) to keep energy up without being distracting.

Plugin Recommendations — Power & Purpose

Appearance (Built-in, always enabled)

Toggles for light/dark theme, serif/sans-serif, and visual adjustments.

Reveal.initialize({
  plugins: [RevealAppearance],
});

• Use for: Supporting accessibility (dark mode for low-light rooms), brand switching
• Audience impact: All (gives viewers choice)
• Offline: ✓ Yes (fully self-contained)

Highlight (Syntax coloring for code)

Reveal.initialize({
  plugins: [RevealHighlight],
});

<!-- With line number ranges (step through code) -->
<pre><code data-trim data-line-numbers="1-3|5-7|9">
  function example() {
    // Lines 1-3 highlighted first
    const x = 1;
    
    // Then lines 5-7
    const y = x + 2;
    return y;
    
    // Then line 9
    console.log(y);
  }
</code></pre>

• Use for: Code walkthroughs, error analysis, diff comparisons
• Best audience: Technical, developers
• Pro tip: Syntax highlighting makes code 40% more scannable for audiences

Chalkboard (Live speaker markup — offline)

Press C to draw, B for blackboard, X/Y to change colors, DEL to clear, D to download.

Reveal.initialize({
  plugins: [RevealChalkboard],
});

• Use for: Live debates, whiteboarding, annotating live during presentation
• Best audience: Technical workshops, problem-solving sessions, design critiques
• Offline: ✓ Yes (full offline, no server)
• Pro tip: Turn off on-screen buttons for offline decks; keyboard-only works fine

Animate (SVG & CSS animation)

Animate SVG elements and custom CSS within slides.

Reveal.initialize({
  plugins: [RevealAnimate],
});

• Use for: Animated diagrams, system flow visualization, custom motion effects
• Best audience: Design, technical architecture, creative
• Offline: ✓ Yes (if SVG is embedded)
• Warning: Heavyweight if you only use 1–2 animations; prefer pure CSS for simple effects

Search (Ctrl+F across all slides)

Reveal.initialize({
  plugins: [RevealSearch],
});

• Use for: Long decks (40+ slides), reference materials, searchable archives
• Audience impact: Helpful for self-paced or shared decks
• Offline: ✓ Yes (lightweight)

Zoom (Alt+click to magnify)

Reveal.initialize({
  plugins: [RevealZoom],
});

• Use for: Dense diagrams, small text, detailed code, data tables
• Audience impact: Accessibility feature; helps those in back of room
• Offline: ✓ Yes

TouchControls (On-screen control bar for smartboards/mobile)

Only load when NOT exporting to PDF

Reveal.initialize({
  plugins: [
    ...(params.has('export') ? [] : [RevealTouchControls()]),
  ],
});

• Use for: Smartboard presentations, touch-based delivery
• Offline: ✓ Yes (but exclude from PDF export)

Speaker Notes (Press S for speaker view)

Built-in to reveal.js; Notes plugin displays in popup window.

<section>
  <h1>Slide Title</h1>
  <aside class="notes">
    Speaker: Emphasize the urgency here. Pause for questions.
    Show the live demo at this point.
  </aside>
</section>

• Use for: Presenter guidance, timing cues, live demo reminders
• Audience impact: Invisible to audience; speaker-only
• Offline: ✓ Yes (popup window, no external fetch)
• Pro tip: Speaker view shows next slide, timer, notes; press S in reveal.js

Avoid (Not Offline-Compatible)

• Reveal Remote (server-based remote control) ✗
• PubNub (real-time sync across devices) ✗
• Notell (audience participation service) ✗
• These require external servers → incompatible with offline (file://) delivery

Plugin Selection Checklist

PHASE 4: Layout, Pacing, & Accessibility

Reveal.js Layout Helpers

r-fit-text — Responsive Heading Scaling

Automatically sizes text to fit the slide width without overflow.

<h1 class="r-fit-text">BIG IMPACTFUL HEADLINE</h1>

• Use for: Title slides, key takeaways, quotes, callouts
• Pro tip: Works for multiple lines; pairs well with auto-sizing for dynamic headlines
• Avoid: Body text (small fonts become unreadable)

r-stretch — Fill Remaining Vertical Space

Resizes an element to fill available space after title and footer.

<section>
  <h2>Title</h2>
  <img class="r-stretch" src="diagram.png" alt="Architecture" />
  <small>Image byline</small>
</section>

• Use for: Full-bleed images, large diagrams, video content
• Limitation: Only one per slide section; must be a direct child of <section>

r-stack — Center & Layer Elements

Stack multiple elements on top of each other; use with fragments to reveal one at a time.

<div class="r-stack">
  <img class="fragment fade-out" src="1.png" />
  <img class="fragment current-visible" src="2.png" />
  <img class="fragment" src="3.png" />
</div>

Result: Images fade in/out on top of each other (morphing effect).

r-frame — Border/Highlight Container

Adds a stylized border or frame around an element.

<img class="r-frame" src="logo.png" />

• Use for: Emphasizing logos, highlighting important visuals, framing focus

Slide Layout Patterns by Content Type

Pattern 1: Title Slide

<section>
  <h1 class="r-fit-text">Your Core Message</h1>
  <p class="subtitle" style="font-size: 1.5em; margin-top: 2rem;">
    Subtitle or tagline
  </p>
  <small style="margin-top: 4rem; color: #999;">
    Speaker Name | Date | Venue
  </small>
</section>

• Animation: Fade in title, then subtitle (2-step reveal, 0.5s apart)
• Design: Vertical center, ample whitespace, 60–72px for title
• Duration: Pause 5–10 seconds; let it breathe

Pattern 2: Content + Image (60/40 Split)

<section>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center;">
    <div>
      <h2>Title</h2>
      <ul>
        <li class="fragment fade-in-then-semi-out">Point 1</li>
        <li class="fragment fade-in-then-semi-out">Point 2</li>
        <li class="fragment fade-in-then-semi-out">Point 3</li>
      </ul>
    </div>
    <div>
      <img src="image.png" alt="Description" style="width: 100%; height: auto;" />
    </div>
  </div>
</section>

• Animation: Staggered list (one point per step), image fades in first
• Design: Left-to-right reading; 2rem gap; consistent height
• Pacing: 1 point per 15–30 seconds depending on audience

Pattern 3: Comparison / Two-Column

<section>
  <h2 style="margin-bottom: 2rem;">Option A vs. Option B</h2>
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;">
    <div style="padding: 2rem; background: #f0f0f0; border-radius: 8px;">
      <h3>Option A</h3>
      <ul>
        <li class="fragment" data-fragment-index="1">✓ Fast implementation</li>
        <li class="fragment" data-fragment-index="1">✗ Limited scalability</li>
      </ul>
    </div>
    <div style="padding: 2rem; background: #e0e0e0; border-radius: 8px;">
      <h3>Option B</h3>
      <ul>
        <li class="fragment" data-fragment-index="1">✓ Highly scalable</li>
        <li class="fragment" data-fragment-index="1">✗ Longer setup</li>
      </ul>
    </div>
  </div>
  <p class="fragment" data-fragment-index="2" style="margin-top: 2rem; font-size: 1.2em;">
    <strong>Recommendation: Option B (long-term ROI)</strong>
  </p>
</section>

• Animation: Both columns' points appear together (same index), recommendation appears last
• Design: Equal width, distinct backgrounds, clear pro/con labels
• Pacing: Pause 30 seconds for digestion, then reveal recommendation

Pattern 4: Code Walkthrough with Auto-Animate

<!-- Step 1: Initial code -->
<section data-auto-animate>
  <h2>Error Handling</h2>
  <pre data-id="code"><code data-trim data-line-numbers>
    const data = await fetch(url);
    const result = data.json();
    return result;
  </code></pre>
  <p class="fragment" data-fragment-index="1">Problem: No error handling</p>
</section>

<!-- Step 2: Add try-catch -->
<section data-auto-animate>
  <h2>Error Handling</h2>
  <pre data-id="code"><code data-trim data-line-numbers>
    try {
      const data = await fetch(url);
      const result = data.json();
      return result;
    } catch (error) {
      console.error('Fetch failed:', error);
      return null;
    }
  </code></pre>
  <p class="fragment" data-fragment-index="1">Solution: Wrap in try-catch</p>
</section>

• Animation: Auto-animate expands code smoothly; fragment shows explanation
• Design: Monospace font (16–18px minimum), syntax highlighted, line numbers
• Pacing: 20–30 seconds per code step; pause for understanding

Pattern 5: Quote / Callout

<section style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
  <blockquote style="font-size: 2rem; text-align: center; color: white; line-height: 1.4;">
    <p>"Impressive is easy. Trusted is hard."</p>
    <small style="font-style: italic; margin-top: 1rem;">— Your Name</small>
  </blockquote>
</section>

• Animation: Fade in; pause 5–10 seconds for emphasis
• Design: High contrast, large serif font (2–3rem), gradient or solid background
• Use for: Opening/closing, thematic breaks, memorable takeaways

Pattern 6: Data Dashboard / Metrics

<section>
  <h2>Q3 Performance</h2>
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem;">
    <div class="fragment" style="text-align: center; padding: 2rem; background: #e3f2fd; border-radius: 8px;">
      <div style="font-size: 3rem; font-weight: bold; color: #1976d2;">42%</div>
      <small style="color: #555;">Growth YoY</small>
    </div>
    <div class="fragment" style="text-align: center; padding: 2rem; background: #f3e5f5; border-radius: 8px;">
      <div style="font-size: 3rem; font-weight: bold; color: #7b1fa2;">$2.3M</div>
      <small style="color: #555;">Revenue</small>
    </div>
    <div class="fragment" style="text-align: center; padding: 2rem; background: #e8f5e9; border-radius: 8px;">
      <div style="font-size: 3rem; font-weight: bold; color: #388e3c;">89%</div>
      <small style="color: #555;">Customer Satisfaction</small>
    </div>
  </div>
</section>

• Animation: Staggered card reveal (each metric appears separately)
• Design: Colored backgrounds, large numbers, minimal text, clear units
• Pacing: 1 metric per 10–15 seconds; let numbers sink in

Pacing Strategy by Audience

Accessibility & Inclusive Design

Color Contrast

• Foreground text: at least 4.5:1 contrast against background (WCAG AA standard)
• Use a tool like WebAIM Contrast Checker
• Avoid red-only or green-only coding; always pair with text labels ("✓ Pass" vs. "✗ Fail")

Font Size

• Minimum 18–24px for body text (audience in back of room)
• 60–72px for titles
• Monospace 14–18px for code (not smaller; small code becomes unreadable)

Dyslexia-Friendly Fonts

• Good: Helvetica, Arial, Segoe UI, Verdana (sans-serif, clear letterforms)
• Avoid: Cursive, decorative, thin/light weights
• Pair serif + sans: Serif for headings (formality), sans-serif for body (readability)

Animation Considerations

• Avoid rapid flashing (3+ flashes per second) → seizure risk
• Provide prefers-reduced-motion support:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

• Document any photo-sensitive content (flashing, strobing effects)

Audio & Captions

• Embed speaker notes in reveal.js (press S for speaker view)
• If recording a video, include SRT subtitles (especially for non-English speakers)
• Transcript available for async viewing

Keyboard Navigation

• Space/Arrow keys to navigate (built-in)
• Alt+click to zoom (built-in)
• Ensure all interactive elements are focusable (Tab key)
• Avoid relying on mouse-only interactions

PHASE 5: Implementation & Export

Reveal.js Configuration

Minimal Setup

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Presentation</title>
  <link rel="stylesheet" href="reveal.js/dist/reveal.css">
  <link rel="stylesheet" href="reveal.js/dist/theme/black.css">
</head>
<body>
  <div class="reveal">
    <div class="slides">
      <section>
        <h1>Your Presentation</h1>
      </section>
      <section>
        <h2>Slide 2</h2>
        <p>Content here</p>
      </section>
    </div>
  </div>
  <script src="reveal.js/dist/reveal.js"></script>
  <script src="reveal.js/dist/plugin/notes/notes.js"></script>
  <script src="reveal.js/dist/plugin/highlight/highlight.js"></script>
  <script>
    Reveal.initialize({
      hash: true,
      transition: 'slide',
      plugins: [RevealNotes, RevealHighlight]
    });
  </script>
</body>
</html>

Common Configuration Options

Reveal.initialize({
  // Transitions
  transition: 'slide',                  // fade, slide, convex, concave, zoom
  transitionSpeed: 'default',           // default, fast, slow
  backgroundTransition: 'fade',         // For slide backgrounds

  // Auto-Animate (Added in 4.0.0)
  autoAnimateEasing: 'ease-out',
  autoAnimateDuration: 0.8,
  autoAnimateUnmatched: false,          // false = instant appear for unmatched; true = fade in

  // Presentation Size
  width: 960,
  height: 700,
  margin: 0.1,
  minScale: 0.2,
  maxScale: 2.0,

  // Accessibility & Interaction
  keyboard: true,                       // Arrow keys to navigate
  hash: true,                           // URL hash for deep links (#slide=3,2)
  touch: true,                          // Swipe to navigate on touch devices

  // PDF Export
  showNotes: false,                     // or 'separate-page' to print notes on separate page
  pdfMaxPagesPerSlide: 1,               // Max pages per slide when printing
  pdfSeparateFragments: false,          // false = all fragments on one slide; true = separate pages

  // Plugins
  plugins: [
    RevealNotes,
    RevealHighlight,
    RevealChalkboard,
    RevealSearch,
    RevealZoom
  ]
});

PDF Export Best Practices

Step 1: Prepare Your Deck

1. Ensure all content fits on slides (test locally)
2. For fragments, decide: print all states or one state?
   • pdfSeparateFragments: false (default) = each fragment step on a separate page (more pages, clearer progression)
   • pdfSeparateFragments: true = all fragments visible on one page (fewer pages, but crowded)

Step 2: Export to PDF

1. Open your presentation with ?print-pdf in URL
   • Example: file:///C:/path/to/presentation.html?print-pdf
2. Open browser print dialog (Ctrl+P / Cmd+P)
3. Set destination: Save as PDF
4. Set layout: Landscape (revealjs defaults to horizontal)
5. Set margins: None (or minimal)
6. Enable: Background graphics (colors, gradients, images)
7. Enable: Headers and footers if desired (optional)
8. Click Save

Step 3: Verify PDF

• Check that all animations are visible (fragments as separate pages)
• Check colors and backgrounds rendered correctly
• Check speaker notes (if enabled; they appear as overlay text)
• Check page count matches expectations

Troubleshooting PDF Export

Markdown Support (External Files)

If you prefer to write slides in Markdown instead of HTML:

<section data-markdown>
  <textarea data-template>
    ## Slide Title
    
    - Point 1
    - Point 2
    
    ---
    
    ## Next Slide
    
    Different content here
  </textarea>
</section>

External Markdown File

<section data-markdown="slides.md" data-separator="^\n---\n$"></section>

Markdown Attributes (via HTML comments)

<section data-markdown>
  <textarea data-template>
    <!-- .slide: data-background="#ff0000" -->
    ## Red Background Slide
    
    - Item <!-- .element: class="fragment highlight-red" -->
    - Another item <!-- .element: data-fragment-index="2" -->
  </textarea>
</section>

Embedding Media

Background Video

<section data-background-video="video.mp4" data-background-video-loop data-background-video-muted>
  <h1>Video Background</h1>
</section>

Background Image

<section data-background-image="image.jpg" data-background-size="cover" data-background-position="center">
  <h1>Image Background</h1>
</section>

Background Iframe (Interactive)

<section data-background-iframe="https://example.com" data-background-interactive>
  <h1>Embedded Website</h1>
</section>

Note: data-background-interactive allows mouse/keyboard to interact with the iframe but disables slide interaction.

Video Inline

<section>
  <video width="640" height="480" controls>
    <source src="video.mp4" type="video/mp4">
  </video>
</section>

Offline Delivery Checklist

✓ All assets (images, videos, fonts, plugin JS/CSS) are local files ✓ No CDN links (no https://cdn.jsdelivr.net/…) ✓ No remote iframes (use data-background-iframe only for ?online mode) ✓ Test opening via file:// in browser (no server needed) ✓ Verify with Ctrl+Shift+I → Network tab (zero remote requests) ✓ Plugin remotes (Highlight, Chalkboard, Notes) work offline by default ✓ Plugins like TouchControls excluded from PDF export mode

Speaker View & Notes

Using Speaker View

1. Open presentation
2. Press S (capital S)
3. Speaker view opens in new popup window showing:
   • Current slide
   • Next slide
   • Speaker notes
   • Timer / clock

Adding Speaker Notes

<section>
  <h1>Slide Title</h1>
  
  <aside class="notes">
    Speaker guidance here. Emphasize this point.
    Pause for questions. Live demo at this step.
  </aside>
</section>

Including Notes in PDF

Reveal.initialize({
  showNotes: true,          // Overlay notes on slides
  // OR
  showNotes: 'separate-page' // Print notes on separate pages after each slide
});

Advanced: Custom CSS & Styling

Override Slide Dimensions

.reveal .slides {
  width: 100%;
  height: 100%;
}

.reveal .slides > section {
  min-height: 100%;
}

Custom Fragment Animation

.fragment.custom-pulse {
  opacity: 1;
}

.fragment.custom-pulse.visible {
  animation: pulse 1s ease-in-out;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

Dark Mode Override

.reveal {
  background: #1e1e1e;
  color: #f0f0f0;
}

.reveal h1, .reveal h2, .reveal h3 {
  color: #fff;
}

.reveal pre {
  background: #2d2d2d;
  border: 1px solid #555;
}

Quick Reference: Reveal.js Feature Matrix

Workflow Checklist — From Idea to Delivery

Phase 1: Discovery ✓

• Identify primary audience
• Define intent (inform, persuade, report, demonstrate, inspire)
• Establish delivery context (live, self-paced, hybrid)
• Set duration and pacing expectations
• List top 3 key outcomes

Phase 2: Content Mapping ✓

• Choose narrative arc (Problem→Solution, Current→Desired, Why→How, Hook→Data, Observe→Control)
• Write main message (1 sentence)
• Estimate slides needed and content density per slide
• Identify interaction needs (read-only, click-to-reveal, annotate, poll)
• Decide media mix (text, visual, hybrid, rich media)

Phase 3: Animation & Plugins ✓

• Select 3–5 animation types (fade, grow, highlight, slide direction, stagger)
• Plan auto-animate sequences (if applicable)
• Choose transition style (slide, fade, zoom, etc.)
• Select plugins (Highlight, Chalkboard, Search, etc.)
• Verify all plugins are offline-compatible (if needed)

Phase 4: Layout & Pacing ✓

• Design 2–3 slide layout templates (title, content+image, comparison, code, quote, metrics)
• Set pacing guidelines per audience (0.5–1.5 slides/min)
• Audit color contrast (4.5:1 minimum)
• Verify font sizes (18px+ body, 60px+ titles)
• Check accessibility (no rapid flashing, keyboard navigable, captions if video)

Phase 5: Implementation & Export ✓

• Create HTML structure with plugins
• Test locally (open via file://, no external requests)
• Add speaker notes for each slide
• Test PDF export with proper settings
• Verify offline delivery (no CDN, no remote iframes)
• Do final accessibility pass (contrast, font, keyboard nav, color blindness)

Common Pitfalls & How to Avoid Them

Pitfall 1: Animation Overload

Symptom: Every slide has 5+ animations; audience gets dizzy; message is lost. Fix: Limit to 1–2 animations per slide. Each animation should serve the message.

Pitfall 2: Dense Text Slides

Symptom: Audience reads instead of listens; cognitive overload. Fix: Minimal text (3–5 bullet points max). Use visuals to carry meaning.

Pitfall 3: Inconsistent Pacing

Symptom: First 10 slides in 5 minutes; last 10 slides in 30 minutes. Fix: Plan slides-per-minute upfront; rehearse to match.

Pitfall 4: No Offline Fallback

Symptom: WiFi drops mid-presentation; deck becomes unviewable. Fix: Bundle all assets locally; test opening via file://; avoid remote iframes.

Pitfall 5: Unreadable Code

Symptom: 8pt monospace code; audience can't read it from the back. Fix: Minimum 14–18px for code; use syntax highlighting; highlight key lines only.

Pitfall 6: No Speaker Notes

Symptom: Presenter fumbles, loses timing, forgets key talking points. Fix: Add notes to every complex slide; include timing, demos, Q&A cues.

Pitfall 7: Accessible to Some, Not All

Symptom: Red/green colors only (red-blind can't distinguish); text too small; rapid flashing. Fix: Audit contrast, font size, color pairs (pair red+green with ✓/✗ or labels).

Expert Tips — Level Up Your Presentations

Tip 1: Use Data-IDs for Precise Auto-Animate

Don't rely on text content matching. Explicit data-id is more predictable:

<div data-id="metric" style="font-size: 2rem;">42%</div>
<!-- Next slide -->
<div data-id="metric" style="font-size: 3rem; color: red;">42%</div>

Tip 2: Stagger Lists with Fragment Index

Control the order and timing:

<li class="fragment" data-fragment-index="1">First</li>
<li class="fragment" data-fragment-index="2">Second</li>

Or simultaneous reveal (same index):

<h2 class="fragment" data-fragment-index="1">Title</h2>
<img class="fragment" data-fragment-index="1" src="image.png" />

Tip 3: Combine Fragments for Multi-Step Effects

<span class="fragment fade-in">
  <span class="fragment highlight-red">
    <span class="fragment fade-out">
      Step-by-step transformation
    </span>
  </span>
</span>

Tip 4: Use Speaker Notes as a Script

Write exactly what you'll say. Helps with:

• Consistent messaging across multiple presentations
• Training new speakers
• Sharing presentation material without over-explaining on slides

Tip 5: Test PDF Export Early

Export to PDF early in your design process:

1. Opens with ?print-pdf in URL
2. Print to PDF with correct settings (landscape, no margins, background graphics)
3. Verify fragment handling and page count
   • If fragments create too many pages, adjust pdfSeparateFragments

Tip 6: Use R-Fit-Text for Impact

Let titles scale responsively instead of hard-coding font sizes:

<h1 class="r-fit-text">BIG HEADLINE THAT SCALES</h1>

Works for multi-line text too.

Tip 7: Pair Auto-Animate with Fragments

Auto-Animate handles element morphing; Fragments handle step-by-step reveals. Combine them for sophisticated slide transitions:

<section data-auto-animate>
  <code data-id="code">const x = 1;</code>
  <p class="fragment">Step 1</p>
</section>

<section data-auto-animate>
  <code data-id="code">const x = 1; const y = 2;</code>
  <p class="fragment">Step 1</p>
  <p class="fragment">Step 2</p>
</section>

Tip 8: Preload Iframes for Smooth Transitions

If using iframes, preload them so they're ready:

<section data-preload data-background-iframe="https://example.com">
  <h1>Embedded Site</h1>
</section>

Tip 9: Use Gradient Backgrounds for Visual Interest

<section data-background-gradient="linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
  <h1 style="color: white;">Striking section break</h1>
</section>

Tip 10: Leverage Speaker View for Multi-Monitor Setup

Press S to open speaker view in popup (separate monitor):

• Shows current + next slide
• Displays speaker notes
• Includes timer
• Ideal for two-monitor setup (presenter view on laptop, slides on projector)

Reference Templates

Minimal Reveal.js Template with Speaker View

Use this as a starting point for any deck:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Presentation Title</title>
    <link rel="stylesheet" href="reveal.js/dist/reveal.css">
    <link rel="stylesheet" href="reveal.js/dist/theme/black.css">
    <style>
        .reveal h1, .reveal h2, .reveal h3 { text-transform: none; }
        .speaker-notes { font-size: 1.2em; }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- Slide 1: Title -->
            <section>
                <h1>Presentation Title</h1>
                <p>Subtitle or tagline</p>
                <aside class="notes">
                    This is your speaker note for slide 1.
                    It appears only in speaker view (press S).
                    Use it to remember talking points, transitions, or timing.
                </aside>
            </section>

            <!-- Slide 2: Content with fragments -->
            <section>
                <h2>Main Concept</h2>
                <ul>
                    <li class="fragment">First point</li>
                    <li class="fragment">Second point</li>
                    <li class="fragment">Third point</li>
                </ul>
                <aside class="notes">
                    Elaborate on each point. Fragments advance one per click.
                </aside>
            </section>

            <!-- Slide 3: Two-column layout -->
            <section>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                    <div>
                        <h3>Left Column</h3>
                        <p>Content here</p>
                    </div>
                    <div>
                        <h3>Right Column</h3>
                        <p>Content here</p>
                    </div>
                </div>
            </section>
        </div>
    </div>

    <script src="reveal.js/dist/reveal.js"></script>
    <script src="reveal.js/plugin/notes/notes.js"></script>
    <script>
        Reveal.initialize({
            hash: true,
            slideNumber: true,
            transition: 'slide',
            plugins: [ RevealNotes ]
        });
    </script>
</body>
</html>

To use speaker view:

• Open in browser
• Press S to open speaker view in a new window
• Drag the new window to your presenter monitor
• First monitor shows current + next slide + notes
• Projector shows only the current slide

Microsoft Fluent Design Template

Professional style with Fluent Design principles (clean, accessible, modern):

<head>
    <style>
        * { box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', 'Helvetica Neue', sans-serif;
            background: #f5f5f5;
        }
        
        .reveal {
            font-family: 'Segoe UI', sans-serif;
        }
        
        .reveal h1, .reveal h2, .reveal h3 {
            font-weight: 300;
            letter-spacing: -0.02em;
        }
        
        .reveal section {
            padding: 60px !important;
        }
        
        /* Microsoft brand colors (no personal info) */
        .section-blue { background: linear-gradient(135deg, #0078d4 0%, #1084d7 100%); }
        .section-teal { background: linear-gradient(135deg, #00a4a4 0%, #00b9b9 100%); }
        .section-accent { background: linear-gradient(135deg, #e74c3c 0%, #e67e22 100%); }
        
        .reveal section h1 { font-size: 3.5em; margin: 0; }
        .reveal section h2 { font-size: 2.2em; }
        .reveal section p { font-size: 1.2em; line-height: 1.6; }
        
        .metric-box {
            display: inline-block;
            background: rgba(0, 120, 212, 0.1);
            border-left: 4px solid #0078d4;
            padding: 20px 30px;
            margin: 10px;
            border-radius: 2px;
        }
        
        .metric-box .number {
            font-size: 2.5em;
            font-weight: 300;
            color: #0078d4;
        }
        
        .metric-box .label {
            font-size: 0.9em;
            color: #666;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <!-- Title Slide -->
    <section class="section-blue" style="color: white;">
        <h1>Presentation Topic</h1>
        <p style="font-size: 1.5em; margin-top: 40px; opacity: 0.9;">
            Short description or tagline
        </p>
    </section>

    <!-- Content Slide with Metrics -->
    <section>
        <h2>Key Results</h2>
        <div style="margin-top: 60px;">
            <div class="metric-box">
                <div class="number">42%</div>
                <div class="label">Improvement</div>
            </div>
            <div class="metric-box">
                <div class="number">3x</div>
                <div class="label">Faster</div>
            </div>
            <div class="metric-box">
                <div class="number">98%</div>
                <div class="label">Satisfaction</div>
            </div>
        </div>
    </section>

    <!-- Accent Section -->
    <section class="section-accent" style="color: white;">
        <h2>Key Takeaway</h2>
        <p style="font-size: 1.4em; margin-top: 40px;">
            Main message or call-to-action
        </p>
    </section>
</body>

Auto-Animate Code Walkthrough Template

Template for demonstrating code with progressive reveal:

<section>
    <h2>Code Evolution</h2>
    
    <!-- Step 1: Basic function -->
    <section data-auto-animate>
        <pre data-id="code"><code class="language-javascript">
function processData(items) {
    return items;
}
        </code></pre>
        <aside class="notes">
            Start with a simple skeleton.
        </aside>
    </section>

    <!-- Step 2: Add logic -->
    <section data-auto-animate>
        <pre data-id="code"><code class="language-javascript">
function processData(items) {
    return items
        .filter(item => item.active)
        .map(item => item.value);
}
        </code></pre>
        <aside class="notes">
            Filter and transform. The code position animates smoothly.
        </aside>
    </section>

    <!-- Step 3: Add error handling -->
    <section data-auto-animate>
        <pre data-id="code"><code class="language-javascript">
function processData(items) {
    if (!items || items.length === 0) return [];
    
    return items
        .filter(item => item.active)
        .map(item => item.value)
        .catch(error => console.error(error));
}
        </code></pre>
        <aside class="notes">
            Add validation and error handling.
        </aside>
    </section>
</section>

Usage:

• Each <section data-auto-animate> animates smoothly from one to the next
• Elements with data-id="code" animate position/size automatically
• Perfect for showing code iterations, design refinements, or algorithm steps

Comparison Layout Template (Two-Column)

<section>
    <h2>Approach Comparison</h2>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 50px;">
        
        <!-- Left column -->
        <div style="text-align: left;">
            <h3 style="color: #0078d4; border-bottom: 3px solid #0078d4; padding-bottom: 10px;">
                Option A
            </h3>
            <ul style="margin-top: 30px; font-size: 0.9em; line-height: 1.8;">
                <li class="fragment">✓ Benefit 1</li>
                <li class="fragment">✓ Benefit 2</li>
                <li class="fragment">✗ Drawback 1</li>
                <li class="fragment">Best for: Use case X</li>
            </ul>
        </div>
        
        <!-- Right column -->
        <div style="text-align: left;">
            <h3 style="color: #e74c3c; border-bottom: 3px solid #e74c3c; padding-bottom: 10px;">
                Option B
            </h3>
            <ul style="margin-top: 30px; font-size: 0.9em; line-height: 1.8;">
                <li class="fragment">✓ Benefit 3</li>
                <li class="fragment">✓ Benefit 4</li>
                <li class="fragment">✗ Drawback 2</li>
                <li class="fragment">Best for: Use case Y</li>
            </ul>
        </div>
    </div>
</section>

Accessibility Checklist Template

<section style="text-align: left;">
    <h2>Accessibility Verification</h2>
    <ul style="font-size: 1.1em; line-height: 2; margin-top: 40px;">
        <li>☐ Color contrast ≥ 4.5:1 (WCAG AA)</li>
        <li>☐ Font size ≥ 18px body, ≥ 60px titles</li>
        <li>☐ Dyslexia-friendly font (Segoe UI, Open Sans, or similar)</li>
        <li>☐ Alt text for all images</li>
        <li>☐ Keyboard navigation tested (arrow keys, space, enter)</li>
        <li>☐ No motion auto-play; prefers-reduced-motion respected</li>
        <li>☐ Slide notes for all transitions</li>
        <li>☐ Tested with screen reader</li>
    </ul>
    <aside class="notes">
        Run through this checklist before final delivery.
    </aside>
</section>

Decision Tree — Quick Guidance

START: What are you building?

1. Is it a code-heavy talk?
   → YES: Use Highlight plugin, plan code walkthrough with auto-animate
   → NO: Go to 2

2. Do you need live annotation?
   → YES: Enable Chalkboard plugin (keyboard: C=draw, B=board, X=color, DEL=clear)
   → NO: Go to 3

3. Is it a long deck (40+ slides)?
   → YES: Add Search plugin (Ctrl+F to find)
   → NO: Go to 4

4. Will you present live with speaker notes?
   → YES: Add Notes plugin (press S for speaker view)
   → NO: Go to 5

5. Do you need PDF export?
   → YES: Configure showNotes, test with ?print-pdf, adjust margins
   → NO: Go to 6

6. Will it be viewed offline?
   → YES: Bundle all assets locally, verify file:// access, zero external requests
   → NO: You can use CDN plugins and remote iframes

DONE: Implement, test, rehearse.

Final Checklist Before Presenting

• Rehearse — Practice in front of audience or mirror; time yourself
• Test offline — Open presentation via file:// (no server); verify all assets load
• Speaker notes — Review all speaker notes; mark timing and demo cues
• PDF backup — Export to PDF (in case tech fails); have printed copy in pocket
• Video/Demo — If using live demo, have screen recording backup
• Accessibility — Test keyboard navigation (Tab, Arrow keys), zoom (Alt+click), contrast
• Browser — Use Chrome/Chromium (most reliable); test zoom level (100%)
• Projector — Test connection; display resolution; font readability from back of room
• Audio — If video/audio embedded, test speakers; have captions available
• Contingency — Backup plan if WiFi fails, projector dies, speaker can't attend

Resources & Further Reading

• Official Reveal.js Docs: https://revealjs.com/
• Reveal.js Demo: https://revealjs.com/demo/
• Markdown Guide: https://revealjs.com/markdown/
• Auto-Animate: https://revealjs.com/auto-animate/
• Fragments & Animations: https://revealjs.com/fragments/
• PDF Export: https://revealjs.com/pdf-export/
• Accessibility: https://www.w3.org/WAI/tutorials/presentations/
• Color Contrast Checker: https://webaim.org/resources/contrastchecker/

You're now equipped to build world-class presentations with reveal.js. Start with Phase 1 (audience discovery), follow the workflow, and refer back to this skill as needed. Good luck! 🎯

Executive / Business Audience

• Goal: Clarity, pace, emphasis on key numbers
• Recommended animations:
  • Fade in (subtle, professional)
  • Slide in from left/right (directional flow)
  • Highlight / scale pulse (draw attention to metrics)
  • Staggered list reveal (one point at a time, controlled pacing)
  • Grow / shrink (show/hide alternatives)
• Avoid: Spinning, bouncing, strobe, or playful effects (distract from message)
• Best plugins: Appearance (polished), Highlight (code if needed)

Technical / Developer Audience

• Goal: Detail, precision, traceability, live interaction
• Recommended animations:
  • Fade (neutral, lets content speak)
  • Grow (reveal complexity incrementally)
  • Code syntax highlight (show errors/solutions step-by-step)
  • Diagram animation (trace architecture, flow)
  • Speaker annotations (draw on live code/diagram)
• Avoid: Cartoon-like effects, oversimplification
• Best plugins: Highlight (syntax coloring), Chalkboard (live markup), Appearance
• Consider: Embed live demos, code playgrounds, vs. slides

Creative / Design Audience

• Goal: Inspiration, emotion, narrative flow
• Recommended animations:
  • Fade, slide, scale (smooth transitions)
  • Custom CSS animations (personality, brand)
  • Video backdrop (cinematic)
  • Animated SVG diagrams (show relationships, process)
  • Interactive elements (hover, click to explore)
• Avoid: Overuse; keep hierarchy clear
• Best plugins: Animate (SVG motion), Appearance (themes), custom CSS

End-User / Customer Audience

• Goal: Engagement, clarity, comfort
• Recommended animations:
  • Gentle fade / zoom (familiar, welcoming)
  • Progressive reveal of benefits (build confidence)
  • Interactive polls / click-through (participation)
  • Whitespace + breathing room (not cluttered)
  • Consistent timing (predictable, not jarring)
• Avoid: Rapid flashing, overwhelming motion
• Best plugins: Appearance (accessible themes), TouchControls (mobile-friendly)

Plugin Recommendations by Use Case

*Truncated - read the full file at https://github.com/olivMertens/copilot-skills/blob/9b8be03bfa6c13b59792ae1dfa6fd55e7e7500a3/skills/reveal-slide-builder/SKILL.md.