Reveal.js Slide Creator

Objective

Use this skill when the user asks you to create a presentation, slides, or a Reveal.js slidedeck. You will generate a self-contained HTML file using the Reveal.js CDN.

Instructions

1. Gather the presentation content (title, sections, slides, speaker notes) from the user. Use the notify_user tool to request clarifications if the content isn't fully provided.
2. Read the standard Reveal.js template from templates/template.html located in this skill's folder.
3. Replace the placeholder content within the
   container with the actual slide contents.
• Use
  for individual horizontal slides.
• Use nested
  elements for vertical slides.
• You can also use markdown inside
  if you prefer or if the content is largely text-based.
4. Save the final output as an HTML file in the user's desired location (or in the current folder if not specified).
5. Let the user know the file has been created and that they can open it directly in their browser.

Guidelines

• Content Constraint (CRITICAL): Strictly constrain the content of each
  so that the text and elements do not exceed the screen size (the default Reveal.js display area). If the provided content for a single slide is too long, you MUST split it into multiple separate slides (e.g., use sequential

  elements) rather than cramming it all into one slide.
• Advanced Features: You must make use of the advanced features natively supported by Reveal.js to create engaging slides:
• Markdown: Use
  ...markdown content...
  .
• Backgrounds: Use data-background-color="color", data-background-image="url", or data-background-video="url" on the
  .
• Media & External Content: Use standard HTML , , or iframe for interactive media.
• Code: Use

  ...

  for syntax highlighting.
• Math: MathJax3 is configured. Use $e^{i\pi} + 1 = 0$ for inline math and \[...\] for block equations.
• Fragments: Add class="fragment", class="fragment fade-up", class="fragment highlight-red", etc., to step through elements incrementally.
• Links: Standard anchor tags.
• Layout Helper Classes: Maximize visual appeal by using native layout helper features:
• class="r-stack": Wrap multiple images/elements inside an
  to center them on top of each other (usually paired with class="fragment").
• class="r-fit-text": Add to headings (e.g.,

  ) to make them perfectly fill the slide width.

• class="r-stretch": Add to an image or video to make it automatically scale to fill the remaining vertical space on the slide.
• class="r-frame": Add to an image or container to give it a neat bordered frame.
• Always use the Reveal.js CSS and JS from the CDN provided in the template (e.g., https://cdnjs.cloudflare.com/ajax/libs/reveal.js/5.0.4/).
• Do not download Reveal.js or use npm for this skill unless explicitly asked; stick to the CDN for a standalone HTML file.
• The default plugins (Markdown, Highlight, Notes) are enabled in the template. Use them if applicable (e.g.,
• Ensure the resulting HTML is fully functional, properly properly indented, and enclosed in standard HTML5 boilerplate.