pamelafox Make a RevealJS presentation
Use this skill when the user wants a RevealJS-based slide deck or wants to start a new talk from the repository's house template.
Default approach
Start from the bundled template asset instead of rebuilding the RevealJS shell from scratch:
- Template asset:
./assets/index.html - Copy that file to the requested output path, then edit the copied file.
- Keep the RevealJS CDN includes and
Reveal.initialize(...)block unless the user explicitly asks to change them.
What to customize first
After copying the template, replace these placeholders before expanding the deck:
Talk TitleConference Name · Month YearYour NameRole · Company · website.example- Example links like
filename.htmlandexample.com/...
Then rewrite or remove the example slides so the deck matches the user's topic.
Template conventions
- The template is intentionally simple and close to stock RevealJS.
- Section divider slides use
class="heading-only". - Code slides are just normal sections with a
<pre><code>block. - If a code badge or copy-button plugin is in use and should be suppressed for one slide, add
class="no-code-badge"to that section.
Customization tips
Body font
Change the body font in the .reveal rule near the top of the template:
.reveal {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
Examples:
- Minimal/system default: keep the existing stack
- Sans-serif web font:
font-family: 'Work Sans', sans-serif; - Serif deck:
font-family: 'Source Serif 4', serif;
If using a web font, also add the corresponding <link rel="stylesheet"> in <head>.
Heading font
Change headings separately in:
.reveal h1,
.reveal h2,
.reveal h3 {
font-family: inherit;
}
Examples:
- Match body text: keep
inherit - Distinct headings:
font-family: 'Roboto', sans-serif; - Editorial style:
font-family: 'Fraunces', serif;
Text sizing
Adjust the default body sizing here:
.reveal p,
.reveal li,
.reveal td,
.reveal th {
font-size: 1em;
}
Increase or decrease that font-size when the user wants a generally larger or smaller deck.
Code block styling
Global code block styling lives in:
.reveal pre { ... }
.reveal pre code { ... }
Adjust those rules for larger code, different padding, or lighter/heavier borders.
Divider slides
The divider slide look is controlled by section.heading-only and the underline rule:
.reveal section.heading-only h1::after,
.reveal section.heading-only h2::after,
.reveal section.heading-only h3::after { ... }
Remove that block if the user wants divider slides to look more like plain RevealJS headings.
Color contrast
If the user customizes colors, keep text/background combinations at accessible contrast.
- Prefer dark text on a light background or light text on a dark background.
- Be especially careful with body text, slide numbers, links, and code blocks.
- Recheck contrast after changing theme colors, background fills, or heading styles.
Accessibility
Preserve accessibility basics when creating or customizing decks.
- Keep text/background contrast accessible, especially after theme changes.
- Make sure links have discernible text.
- Make sure images have alt text if they convey meaning.
- Treat plugin-generated UI separately from slide content when reviewing issues.
RevealMenucurrently has a known accessibility issue: its generated menu trigger may lack a discernible accessible name. If the user keeps the plugin, note that this can remain as an axe violation even when the slide content itself is fine.
Example axe-core audit
If the user asks for an accessibility review in VS Code, open the deck in the integrated browser and run axe-core on the rendered page.
Example Playwright snippet:
await page.addScriptTag({
url: 'https://cdnjs.cloudflare.com/ajax/libs/axe-core/4.10.2/axe.min.js'
});
const results = await page.evaluate(async () => {
return await window.axe.run(document, {
runOnly: {
type: 'tag',
values: ['wcag2a', 'wcag2aa']
}
});
});
When reporting results:
- Separate actual
violationsfromincompletechecks. - Call out the exact HTML or selector for each real issue.
- Distinguish between deck-author issues and plugin-generated issues.
- If contrast checks are inconclusive because Reveal overlays or transforms confuse axe, say that clearly instead of reporting them as confirmed failures.
Editing guidance
- Prefer plain sections, headings, lists, tables, images, and code blocks over custom layout systems.
- Do not add extra decorative CSS unless the user asks for a stronger visual style.
- Keep the deck black-on-white by default unless the user wants a themed presentation.
Validation
After creating or editing the deck:
- Validate the HTML file for diagnostics.
- Open it in the integrated browser.
- If the user asks for accessibility review, run an axe audit on the rendered page and report actual violations separately from inconclusive checks.