Step 0 — Preference: Before running any renderer command, perform the theme-preference resolution block from the base artifact-organizer skill (~/.claude/skills/artifact-organizer/SKILL.md, section "Step 0"). It sets $THEME and $RENDERER. If absent, this wrapper falls back to notion + auto.
Artifact Organizer — Slides mode
Forces a artifact-organizer/SlideDeck root (NOT Page) and emits a slide-oriented HTML file via the Artifact Organizer renderer. This skill is a thin wrapper over the artifact-organizer skill: the envelope format and renderer contract live there, this skill adds the slide-specific rules.
When to use
- User says "slides", "deck", "presentation", "walk me through", "recap as slides".
- You're about to produce 5+ sequential points that would benefit from pagination.
- User asks for a kickoff deck, readout, review, demo script, or training material.
Do not use for: single-page docs (use hyperscribe), diff reviews (use hyperscribe-diff), or linear prose.
Rules for slide mode
- Root MUST be
artifact-organizer/SlideDeck, never artifact-organizer/Page. Slides don't nest inside Page.
SlideDeck.children must be an array of artifact-organizer/Slide objects — nothing else.
- Pick
aspect: "16:9" (default widescreen) or "4:3" (compact/legacy).
- Optional
transition: "fade" | "slide" for visual polish (deck mode only).
- Optional
mode: navigation/interaction style (see table below).
- Include a
footer with topic + date.
Mode picker
mode |
Interaction |
Use when |
"deck" (default) |
Keyboard / button nav, one slide at a time |
Tech share-outs, demos, training — viewer controls pacing |
"scroll-snap" |
Vertical scroll-snap inside a 100vh container, IntersectionObserver-driven reveal |
Mobile-friendly walkthroughs, longer decks where the reader scrolls |
"scroll-jack" |
Page-level scroll pinned via position: sticky, slides crossfade with scroll progress (Apple-style) |
Impact pieces, product launches, hero storytelling |
Notes:
transition is ignored in scroll-snap and scroll-jack modes (the modes own their motion).
- Both scroll modes respect
prefers-reduced-motion and degrade to instant slide swaps.
scroll-jack consumes page scroll, so reserve it for full-page decks (one deck per HTML output, no other long content below).
- Keyboard arrows + button nav still work in scroll modes (they programmatically scroll to the target slide).
Slide layout picker
| Layout |
Use when |
Props |
title |
Opening/cover slide |
title, subtitle |
section |
Divider between parts |
title, subtitle |
content |
Single-topic slide with bullets |
title, bullets |
two-col |
Comparing two related lists |
title, bullets (auto-split in half) |
quote |
Featured quote or big statement |
quote, subtitle (attribution) |
image |
Screenshot or visual |
title, image (URL), subtitle (caption) |
Typical deck structure
title — cover
section — "Context" / intro divider
content × 3–5 — each major point
quote or image — emphasis beat
two-col — comparison if relevant
section — "Next steps" divider
content — action items
title — closing / thank you
Aim for 5–12 slides. If the topic is huge, suggest splitting into multiple decks rather than one 40-slider.
Envelope
{
"a2ui_version": "0.9",
"catalog": "artifact-organizer/v1",
"is_task_complete": true,
"parts": [
{
"component": "artifact-organizer/SlideDeck",
"props": { "aspect": "16:9", "transition": "fade", "footer": "My topic · 2026" },
"children": [
{ "component": "artifact-organizer/Slide", "props": { "layout": "title", "title": "...", "subtitle": "..." }},
{ "component": "artifact-organizer/Slide", "props": { "layout": "content", "title": "...", "bullets": ["...", "..."] }},
{ "component": "artifact-organizer/Slide", "props": { "layout": "title", "title": "Thanks", "subtitle": "Q&A" }}
]
}
]
}
Render + open
Same workflow as the base artifact-organizer skill — resolve the renderer, pipe JSON, write output, open.
# Locate the artifact-organizer renderer (installed via `npx skills add keepYaoung/artifact-organizer` or plugin marketplace).
HS=$(for p in \
./.claude/skills/artifact-organizer ~/.claude/skills/artifact-organizer \
./.codex/skills/artifact-organizer ~/.codex/skills/artifact-organizer \
./.cursor/skills/artifact-organizer ~/.cursor/skills/artifact-organizer \
./.opencode/skills/artifact-organizer ~/.opencode/skills/artifact-organizer \
~/.claude/plugins/cache/artifact-organizer-marketplace/*/plugins/artifact-organizer
do [ -x "$p/scripts/outprint" ] && { echo "$p/scripts/outprint"; break; }; done)
if [ -z "$HS" ]; then
echo "artifact-organizer renderer not found. Install with: npx skills add keepYaoung/artifact-organizer" >&2
exit 1
fi
mkdir -p ~/.artifact-organizer/out
OUT=~/.artifact-organizer/out/slides-$(date +%Y%m%d-%H%M%S).html
cat <<'EOF' | "$HS" --theme "${THEME:-notion}" --renderer "${RENDERER:-auto}" --out "$OUT"
<the JSON you built>
EOF
open "$OUT" # macOS; use xdg-open on Linux
Interaction in output
deck mode (default): users navigate with arrow keys / space / Home / End, or click the bottom nav buttons.
scroll-snap mode: users scroll vertically inside the deck — each slide snaps into place. Buttons/keys still jump between slides.
scroll-jack mode: users scroll the page — slides crossfade as they scroll. The deck pins to the viewport while it owns the scroll.
Mention the relevant interaction when reporting the path.
Avoid
- Putting too much text on a single slide — if bullets exceed 5–6 items, split into multiple slides.
- Using
Slide inside a Page (fails schema validation).
- Copying the user's document verbatim — distill the essence.
- Nesting markdown inside Slide props —
bullets is string[], plain text only.
1---2name: artifact-organizer-slides3description: Generate a self-contained HTML slide deck (SlideDeck + Slides with keyboard nav) from a topic or outline. Use whenever the user asks for "slides", "a deck", "a presentation", a "walkthrough", or a 5+ step recap. Requires the `artifact-organizer` skill to be installed (provides the renderer engine).4license: MIT5---67> **Step 0 — Preference:** Before running any renderer command, perform the theme-preference resolution block from the base `artifact-organizer` skill (`~/.claude/skills/artifact-organizer/SKILL.md`, section "Step 0"). It sets `$THEME` and `$RENDERER`. If absent, this wrapper falls back to `notion` + `auto`.89# Artifact Organizer — Slides mode1011Forces a `artifact-organizer/SlideDeck` root (NOT `Page`) and emits a slide-oriented HTML file via the Artifact Organizer renderer. This skill is a thin wrapper over the `artifact-organizer` skill: the envelope format and renderer contract live there, this skill adds the slide-specific rules.1213## When to use1415- User says "slides", "deck", "presentation", "walk me through", "recap as slides".16- You're about to produce 5+ sequential points that would benefit from pagination.17- User asks for a kickoff deck, readout, review, demo script, or training material.1819Do **not** use for: single-page docs (use `hyperscribe`), diff reviews (use `hyperscribe-diff`), or linear prose.2021## Rules for slide mode22231. **Root MUST be `artifact-organizer/SlideDeck`**, never `artifact-organizer/Page`. Slides don't nest inside Page.242. `SlideDeck.children` must be an array of `artifact-organizer/Slide` objects — nothing else.253. Pick `aspect`: `"16:9"` (default widescreen) or `"4:3"` (compact/legacy).264. Optional `transition: "fade" | "slide"` for visual polish (deck mode only).275. Optional `mode`: navigation/interaction style (see table below).286. Include a `footer` with topic + date.2930## Mode picker3132| `mode` | Interaction | Use when |33|---|---|---|34| `"deck"` (default) | Keyboard / button nav, one slide at a time | Tech share-outs, demos, training — viewer controls pacing |35| `"scroll-snap"` | Vertical scroll-snap inside a 100vh container, IntersectionObserver-driven reveal | Mobile-friendly walkthroughs, longer decks where the reader scrolls |36| `"scroll-jack"` | Page-level scroll pinned via `position: sticky`, slides crossfade with scroll progress (Apple-style) | Impact pieces, product launches, hero storytelling |3738Notes:39- `transition` is ignored in scroll-snap and scroll-jack modes (the modes own their motion).40- Both scroll modes respect `prefers-reduced-motion` and degrade to instant slide swaps.41- `scroll-jack` consumes page scroll, so reserve it for full-page decks (one deck per HTML output, no other long content below).42- Keyboard arrows + button nav still work in scroll modes (they programmatically scroll to the target slide).4344## Slide layout picker4546| Layout | Use when | Props |47|---|---|---|48| `title` | Opening/cover slide | `title`, `subtitle` |49| `section` | Divider between parts | `title`, `subtitle` |50| `content` | Single-topic slide with bullets | `title`, `bullets` |51| `two-col` | Comparing two related lists | `title`, `bullets` (auto-split in half) |52| `quote` | Featured quote or big statement | `quote`, `subtitle` (attribution) |53| `image` | Screenshot or visual | `title`, `image` (URL), `subtitle` (caption) |5455## Typical deck structure56571. `title` — cover582. `section` — "Context" / intro divider593. `content` × 3–5 — each major point604. `quote` or `image` — emphasis beat615. `two-col` — comparison if relevant626. `section` — "Next steps" divider637. `content` — action items648. `title` — closing / thank you6566Aim for 5–12 slides. If the topic is huge, suggest splitting into multiple decks rather than one 40-slider.6768## Envelope6970```json71{72 "a2ui_version": "0.9",73 "catalog": "artifact-organizer/v1",74 "is_task_complete": true,75 "parts": [76 {77 "component": "artifact-organizer/SlideDeck",78 "props": { "aspect": "16:9", "transition": "fade", "footer": "My topic · 2026" },79 "children": [80 { "component": "artifact-organizer/Slide", "props": { "layout": "title", "title": "...", "subtitle": "..." }},81 { "component": "artifact-organizer/Slide", "props": { "layout": "content", "title": "...", "bullets": ["...", "..."] }},82 { "component": "artifact-organizer/Slide", "props": { "layout": "title", "title": "Thanks", "subtitle": "Q&A" }}83 ]84 }85 ]86}87```8889## Render + open9091Same workflow as the base `artifact-organizer` skill — resolve the renderer, pipe JSON, write output, open.9293```bash94# Locate the artifact-organizer renderer (installed via `npx skills add keepYaoung/artifact-organizer` or plugin marketplace).95HS=$(for p in \96 ./.claude/skills/artifact-organizer ~/.claude/skills/artifact-organizer \97 ./.codex/skills/artifact-organizer ~/.codex/skills/artifact-organizer \98 ./.cursor/skills/artifact-organizer ~/.cursor/skills/artifact-organizer \99 ./.opencode/skills/artifact-organizer ~/.opencode/skills/artifact-organizer \100 ~/.claude/plugins/cache/artifact-organizer-marketplace/*/plugins/artifact-organizer101do [ -x "$p/scripts/outprint" ] && { echo "$p/scripts/outprint"; break; }; done)102103if [ -z "$HS" ]; then104 echo "artifact-organizer renderer not found. Install with: npx skills add keepYaoung/artifact-organizer" >&2105 exit 1106fi107108mkdir -p ~/.artifact-organizer/out109OUT=~/.artifact-organizer/out/slides-$(date +%Y%m%d-%H%M%S).html110cat <<'EOF' | "$HS" --theme "${THEME:-notion}" --renderer "${RENDERER:-auto}" --out "$OUT"111<the JSON you built>112EOF113open "$OUT" # macOS; use xdg-open on Linux114```115116## Interaction in output117118- **`deck` mode (default):** users navigate with **arrow keys / space / Home / End**, or click the bottom nav buttons.119- **`scroll-snap` mode:** users scroll vertically inside the deck — each slide snaps into place. Buttons/keys still jump between slides.120- **`scroll-jack` mode:** users scroll the page — slides crossfade as they scroll. The deck pins to the viewport while it owns the scroll.121122Mention the relevant interaction when reporting the path.123124## Avoid125126- Putting too much text on a single slide — if bullets exceed 5–6 items, split into multiple slides.127- Using `Slide` inside a `Page` (fails schema validation).128- Copying the user's document verbatim — distill the essence.129- Nesting markdown inside Slide props — `bullets` is `string[]`, plain text only.