rendering-slides

Files (19)

• SKILL.md
• accessibility-bar.md · references/
• deck-folder.md · references/
• themes.md · references/
• checks.mjs · scripts/
• deck.mjs · scripts/
• package-lock.json · scripts/marp-cli/
• package.json · scripts/marp-cli/
• marp.config.json · scripts/
• rendering-slides.mjs · scripts/
• timing.mjs · scripts/
• tools.mjs · scripts/
• checks.test.mjs · tests/
• deck.md · tests/fixtures/minimal/
• rendering-slides.test.mjs · tests/
• themes.test.mjs · tests/
• timing.test.mjs · tests/
• editorial-inverse.css · themes/
• editorial.css · themes/

SKILL.md (first lines)

# Rendering slides

Turn a Deck Folder's `deck.md` into the Rendered Deck, in the deck's theme, and prove the result is readable and accessible.

Script paths below are relative to this skill's folder. Run each as one command with the folder's absolute path in front, never chained with `&&`, `$(…)`, or heredocs. The Deck Folder layout is in [references/deck-folder.md](references/deck-folder.md).

## Workflow

```
- [ ] 1. Tools installed
- [ ] 2. Theme in place
- [ ] 3. Rendered
- [ ] 4. Slides looked at
```

1. **Tools.** Run `node scripts/rendering-slides.mjs setup --status`. If anything is missing, ask the person to run `node scripts/rendering-slides.mjs setup` once, outside the sandbox: it installs a pinned Marp CLI and browser with verified checksums into a shared cache. On Linux it may print one package-install command for the person to run; never run `sudo` yourself.
2. **Theme.** If the Deck Folder has no `theme.css`, apply the look from the Brief: `node scripts/rendering-slides.mjs theme --deck <folder> --name editorial` (light) or `--name editorial-inverse` (dark), or a brand theme with `--brand <brand.json>` (see [references/themes.md](references/themes.md)). `deck.md` must say `theme: deck` in its front matter. To change the look later, run `theme` again.
3. **Render.** Run `node scripts/rendering-slides.mjs render --deck <folder>`. It writes `dist/deck.html` (to present from, and the accessible version), `dist/deck.pdf` (tagged, with an outline), and `dist/deck-notes.md` (the speaker-notes script). Add `--pptx` only when the person asks for PowerPoint, and say it is made of slide pictures, so it is neither editable nor accessible. Add `--images` for PNG slide images.
4. **Look.** Render with `--images` and look at every slide: text overflowing its slot, overlapping elements, unreadable contrast, a visual that misses its caption. Fix the source (`deck.md`, `theme.css`, or `media/`), never `dist/`, and render again.

## The Accessibility Bar

Every `render` ends with the scripted checks listed in the [Accessibility Bar](references/accessibility-bar.md) ("Who checks what"). A finding names the slide and the fix; correct the source and render again. Run `node scripts/rendering-slides.mjs check --deck <folder>` to check without rendering. It also prints the notes' speaking time as information, never a finding: it compares with the length in `brief.md`, or with `--minutes <n>` when there is no Brief, and says nothing about length when neither is given.

The judgement checks in that table need a person or a review; say so when reporting a passing render.

## When the render fails

- **The sandbox blocks the browser.** The error says so and explains how to allow that one render command outside the sandbox for the harness in use. Pass this on to the person; never change their harness settings yourself.
- **The browser's own sandbox cannot start.** The error gives the fix; ask the person before setting `CHROME_NO_SANDBOX=1` for that render.
- **An `asset-path` or `raw-html` finding stops the render.** The Deck Folder is untrusted input: copy the file into `media/` or `fonts/`, or write the markup as Markdown, then render again.
- **A tool is missing.** The error names the exact `setup` command.

## Theme values for visuals

Diagrams and charts do not inherit the deck's CSS. Run `node scripts/rendering-slides.mjs theme-values --deck <folder>` and save its JSON output as the theme values file passed to `creating-diagrams` and `creating-charts`, together with the slot of the slide's Layout Class (`--slot-split`, `--slot-visual`, `--slot-default`).

When the deck is rendered and checked, the natural next step is a review: `reviewing-presentation`, if installed, checks facts, timing, and the rendered result.

From ken-guru/skills, MIT.

More from ken-guru/skills