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](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](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](TEMPLATE.md) for the full template.
4. Render in browser — follow [_shared/chrome-devtools-render.md](../_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](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'
• [ ] waitfor was called before takescreenshot
• [ ] 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 waitfor before takescreenshot. Wait on the title text. Screenshotting before Reveal renders produces a blank white image.
6. Always use newpage 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

| File | Contents | |------|----------| | [TEMPLATE.md](TEMPLATE.md) | Complete Reveal.js HTML template, all slide type patterns, content chunking rules | | [TROUBLESHOOTING.md](TROUBLESHOOTING.md) | Failure diagnosis table: symptoms, causes, fixes |

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: npow
• Source: npow/claude-skills
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.