export-as-pptx-screenshots
Flat images — pixel-perfect but not editable
git clone --depth 1 https://github.com/asgeirtj/system_prompts_leaks /tmp/export-as-pptx-screenshots && cp -r /tmp/export-as-pptx-screenshots/Anthropic/claude-design/skills/export-as-pptx-screenshots ~/.claude/skills/export-as-pptx-screenshotsSKILL.md
# Export as PPTX (screenshots)
Export an HTML slide deck to a `.pptx` as full-bleed PNG images. Pixel-perfect, not editable. One `gen_pptx` tool call.
### Steps
1. `show_to_user` the deck.
2. Call `gen_pptx`:
```jsonc
{
"mode": "screenshots",
"width": 1920, "height": 1080,
"slides": [
{ "showJs": "goToSlide(0)", "selector": "body" }, // selector unused in screenshot mode but required
{ "showJs": "goToSlide(1)", "selector": "body" }
],
"hideSelectors": [".nav", ".progress"],
// If the deck wraps slides in a transform:scale() container, name it here so
// the deck is forced to width × height inside the locked iframe.
"resetTransformSelector": ".slide-container",
"filename": "my-deck"
}
```
If — and only if — the user asked for Google Slides, also pass `"offer_google_slides": true`: the export dialog gains a 'Send to Google Slides' button, and the upload happens only if they click it.
`slides[].delay` defaults to 600ms — bump if transitions are slower.
#### If the deck uses the `<deck-stage>` starter component
- `resetTransformSelector: "deck-stage"` — same as editable mode; the component drops its shadow-DOM `transform: scale()` so the slides fill the locked iframe.
- `slides[N].showJs`: `"document.querySelector('deck-stage').goTo(N)"` — 0-indexed, so slide 1 is `goTo(0)`.
- `hideSelectors` is unnecessary — the overlay and tap-zones live in shadow DOM and aren't captured.
### Validation
Same flags as editable mode. Watch for `duplicate_adjacent` (showJs didn't navigate) and `reset_selector_miss` / `slide_size_mismatch` (your `resetTransformSelector` matched nothing or didn't size to width × height).
Speaker notes from `#speaker-notes` are attached automatically. Page reloads after.three.js model, downloadable as OBJ or GLB
Timeline-based motion design
Runtime capabilities a published Artifact page can be granted — behavior static HTML cannot provide on its own, such as the page reading live or connected data, remembering what people do on it (a poll, a sign-up sheet, a checklist, a document edited in place — it saves new versions of itself), keeping state shared across viewers, knowing who is viewing, asking Claude a question of its own, storing files people add, or handing the viewer a file to save. Serves this user's live capability roster and the typed call definitions. Load it whenever the user asks for an artifact needing any such runtime behavior.
Design guidance and fundamentals for Artifacts.
Diagramming know-how for Artifacts - when a picture earns its place, how to draw one that shows the real mechanism, and the inline-SVG mechanics that keep it legible in both themes.
Research and plan a large-scale change, then execute it in parallel across 5–30 isolated worktree agents that each open a PR.
Call Claude from your HTML artifacts via window.claude.complete
Automates your Chrome browser to interact with web pages - clicking elements, filling forms, capturing screenshots, reading console logs, and navigating sites. Opens pages in new tabs within your existing Chrome session. Requires site-level permissions before executing (configured in the extension).