Slides

Slides

Converts content from the conversation into a Reveal.js HTML slide deck, writes it to /tmp/slides.html, and opens it live in the browser.

Workflow

1. Extract content structure — identify the title, sections, and key points from the conversation or user-supplied content. See TEMPLATE.md for content chunking rules.
2. Plan slide types and count — assign each section a slide type: title, bullet, two-column, quote, or code. Max 6 bullets per slide; split if more. See TEMPLATE.md for slide type patterns.
3. Write /tmp/slides.html — use the complete Reveal.js template with all CDN links in correct order. See TEMPLATE.md for the full template.
4. Render in browser — follow _shared/chrome-devtools-render.md to open /tmp/slides.html, wait for render, and screenshot. wait_for the title slide's main heading text. See TROUBLESHOOTING.md if slide rendering looks wrong.
5. Tell user how to navigate — reply: "arrow keys to navigate, F for fullscreen".

Self-review checklist

Before delivering, verify ALL:

• Screenshot shows a styled dark slide — not plain unstyled HTML text on a white background
• Heading text is mixed-case, not ALL CAPS (custom CSS override applied)
• No slide has more than 6 bullet points
• CDN links appear in correct order: reveal.css, then black.css theme, then reveal.js
• Reveal.initialize() is called with hash: true, transition: 'slide', backgroundTransition: 'fade'
• wait_for was called before take_screenshot
• User was told: arrow keys to navigate, F for fullscreen

Golden rules

Hard rules. Never violate these.

1. Never allow headings to render uppercase. Always include .reveal h1, .reveal h2 { text-transform: none; } in custom CSS. Reveal.js default forces uppercase and it looks bad.
2. Never put more than 6 bullet points on one slide. Split into two consecutive slides with a shared heading if needed (e.g. "Key Points (1/2)" and "Key Points (2/2)").
3. Always load theme CSS after reveal.css. The order is: reveal.css, then theme/black.css. Reversed order silently breaks all theming.
4. Always use hash: true in Reveal.initialize. This enables deep-linking to slides by index.
5. Always call wait_for before take_screenshot. Wait on the title text. Screenshotting before Reveal renders produces a blank white image.
6. Always use new_page for first open. Use mcp__chrome-devtools__new_page with url: file:///tmp/slides.html. Never navigate an existing page to a file:// URL.

Reference files