Artifact organizer slides
Skill keepYaoung/artifact-organizer/skills/artifact-organizer-slides
Agent skill that turns semantic JSON into self-contained, themed HTML — then stacks your artifacts into one persistent, restyleable dashboard. Zero dependencies, opens offline.
npx -y skills add keepYaoung/artifact-organizer --skill artifact-organizer-slidesAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
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).
The file declares its own license as MIT. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
6.4 KB, as published. Nobody here has run it
Step 0 — Preference: Before running any renderer command, perform the theme-preference resolution block from the base
artifact-organizerskill (~/.claude/skills/artifact-organizer/SKILL.md, section "Step 0"). It sets$THEMEand$RENDERER. If absent, this wrapper falls back tonotion+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, neverartifact-organizer/Page. Slides don't nest inside Page. SlideDeck.childrenmust be an array ofartifact-organizer/Slideobjects — 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
footerwith 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:
transitionis ignored in scroll-snap and scroll-jack modes (the modes own their motion).- Both scroll modes respect
prefers-reduced-motionand degrade to instant slide swaps. scroll-jackconsumes 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— coversection— "Context" / intro dividercontent× 3–5 — each major pointquoteorimage— emphasis beattwo-col— comparison if relevantsection— "Next steps" dividercontent— action itemstitle— 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
deckmode (default): users navigate with arrow keys / space / Home / End, or click the bottom nav buttons.scroll-snapmode: users scroll vertically inside the deck — each slide snaps into place. Buttons/keys still jump between slides.scroll-jackmode: 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
Slideinside aPage(fails schema validation). - Copying the user's document verbatim — distill the essence.
- Nesting markdown inside Slide props —
bulletsisstring[], plain text only.