slides-grab

slides-grab — Point-and-Edit AI Slide Decks in HTML/CSS

slides-grab (NomaDamas, MIT) is the open-source Claude Design alternative — a harness + visual editor + linter for generating presentation decks with coding agents. Every slide is a self-contained slide-XX.html file of plain HTML & CSS — the language AI agents are strongest at — so decks are beautiful, trivially editable by the agent, and exportable to PDF (and experimental/unstable PPTX or Figma). Its signature move: in the browser editor you drag a box over any region and ask the agent to rewrite just that area; small things (text, size, bold) you can still tweak by hand "like in the 2024 era". This skill is the routing-first wrapper: pick an install path, a deck workspace, a design style, and the right asset/export flow.

When to use this skill

• The user wants to generate a slide deck from a topic or source files and then iterate on it visually rather than re-prompting from scratch
• The user wants to point at a region of a rendered slide and have the agent edit only that area (bbox selection + agent rewrite) — the core slides-grab workflow via slides-grab edit
• The user wants a deck in HTML/CSS they can hand-tweak (text, size, bold) and that the agent can restyle with any of the 35 bundled design styles
• The user wants to export a deck — slides-grab pdf (capture or searchable --mode print), slides-grab png (per-slide, incl. 1:1 card-news for Instagram), or the experimental/unstable convert (PPTX) / figma (Figma-importable PPTX)
• The user is building Instagram-style card news (square 720pt × 720pt) and wants PNG-first output
• The user needs deck assets done the supported way — generate imagery with slides-grab image (god-tibo-imagen / codex / nano-banana), pull a web video with fetch-video (yt-dlp), or turn a .tldr diagram into a slide-sized SVG with slides-grab tldraw
• The user wants to validate a deck (slides-grab validate, Playwright) before exporting to catch missing local assets and discouraged path forms

When not to use this skill

• The user wants editable vector diagrams (architecture, ERD, UML, sequence, flowchart) inside a slide → author them with drawio or mermaid and embed the exported image
• The user wants packet-first deck planning, narrative structure, or the last-mile handoff decision (HTML review vs PPTX vs PDF vs Google/Figma Slides) without committing to slides-grab's HTML pipeline → presentation-builder
• The user just wants AI-generated images (not a deck) → god-tibo-imagen
• The user wants broad local design-artifact generation (web/mobile/desktop prototypes, media, 72 design systems) → open-design
• The deck must be pixel-perfect PowerPoint or native Figma — slides-grab's convert/figma paths are explicitly experimental / unstable, emit best-effort .pptx for manual import, and expect cleanup; do not promise faithful PPTX/Figma parity

Prerequisites

Requirement	Notes
Node.js >= 20	Hard requirement for the CLI
Chromium via Playwright	npx playwright install chromium — render, validate, and export pipeline
A coding agent	Claude Code or Codex have first-class install guides; the bbox "edit this region" loop hands selections to the agent
yt-dlp (optional)	Only for slides-grab fetch-video
A Codex/ChatGPT login (optional)	Default slides-grab image provider (god-tibo-imagen) reuses ~/.codex/auth.json; alternative providers need OPENAI_API_KEY or GOOGLE_API_KEY

Instructions

Step 1 — Install slides-grab

Path	When	Command
npm package (recommended)	Normal usage — CLI + shared skills	npm install slides-grab → npx playwright install chromium → npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy
Agent install guide	Let the agent wire it end-to-end	Claude Code: read docs/installation/claude.md; Codex: read docs/installation/codex.md and follow every step
Clone	Develop/contribute to slides-grab itself	git clone … && cd slides-grab && npm ci && npx playwright install chromium

The skill ships scripts/install.sh to run the npm path (install + Playwright Chromium + npx skills add), with SLIDES_GRAB_NO_SKILLS=1 to skip the agent-skill registration step.

Step 2 — Choose a deck workspace

Workflow commands take --slides-dir <path> (default: slides). For more than one deck, keep each under decks/<name>/ and pass --slides-dir decks/<name> to every stage. On a fresh install the discovery commands (--help, list-templates, list-styles, preview-styles) work with no deck; edit, build-viewer, validate, convert, and pdf require an existing workspace containing slide-*.html.

Step 3 — Plan → Design

1. Plan — have the agent draft a structured outline from the topic/files.
2. Design — the agent generates each slide as a self-contained slide-XX.html. Browse styles with slides-grab list-styles (35 bundled: 30 from corazzon/pptx-design-styles
   • 5 originals) or slides-grab preview-styles for the visual gallery, then just tell the agent which style to use (or ask for a custom one — no config files).

Step 4 — Edit visually (the slides-grab move)

bash slides-grab edit --slides-dir decks/my-deck

Launches the pure-JavaScript browser editor. Drag a bbox over any region and ask the agent to rewrite just that area; do simple text/size/bold edits by hand. Use --mode card-news here (and at every later stage) for square 1:1 decks. The editor file is plain JS — easy to extend with new agents/designs.

Step 5 — Add assets the supported way

Store local images/videos in <slides-dir>/assets/ and reference them as ./assets/<file>. Remote http(s):// image URLs and absolute filesystem paths are disallowed in saved slides; data: URLs are allowed.

Need	Command
Generate an image	slides-grab image --slides-dir decks/my-deck --prompt "…" (default god-tibo-imagen reuses ~/.codex/auth.json; --provider codex needs OPENAI_API_KEY, --provider nano-banana needs GOOGLE_API_KEY)
Pull a web video	slides-grab fetch-video --url <youtube-url> --slides-dir decks/my-deck --output-name hero-video (needs yt-dlp)
Diagram → SVG	slides-grab tldraw --input …/system.tldr --output …/assets/system.svg --width 640 --height 320

god-tibo-imagen calls an unsupported private Codex backend that may break without notice and needs an image-entitled account; on failure slides-grab falls back to any provider with credentials, else to web-search + local download into assets/.

Step 6 — Validate → Export

Always validate first to catch missing assets and bad paths:

bash slides-grab validate --slides-dir decks/my-deck

Output	Command
PDF (capture, default) — rasterized, best fidelity	slides-grab pdf --slides-dir decks/my-deck --output decks/my-deck.pdf
PDF (print) — searchable/selectable text	slides-grab pdf --slides-dir decks/my-deck --mode print --output …-searchable.pdf
PNG per slide (default 2160p)	slides-grab png --slides-dir decks/my-deck --output-dir …/out-png
Card-news PNG (Instagram 1:1)	slides-grab png --slides-dir decks/my-cards --slide-mode card-news --resolution 2160p
PPTX (experimental/unstable)	slides-grab convert --slides-dir decks/my-deck --output decks/my-deck.pptx
Figma-importable PPTX (experimental/unstable)	slides-grab figma --slides-dir decks/my-deck --output …-figma.pptx
Single-file viewer	slides-grab build-viewer

pdf and convert default to 2160p / 4k; override with --resolution 720p|1080p|1440p|2160p|4k. For a <video> slide, set poster="./assets/<file>" so PDF export uses a stable still.

Step 7 — Plugin-style installation alongside jeo-skills

This skill folder is plugin-installable through the standard jeo-skills flow so the wrapper, references, and installer land on disk for any supported runtime:

bash

Project install (writes into .agents/skills/slides-grab/)

npx skills add https://github.com/akillness/jeo-skills --skill slides-grab

Global install for every detected agent

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab

Target specific agents

npx skills add -g https://github.com/akillness/jeo-skills --skill slides-grab -a claude-code -a codex -y

Output format

When the user asks slides-grab for help, return a compact brief:

markdown

slides-grab Routing Brief

Scope

• Install path: npm-package | agent-guide | clone | already-installed
• Deck: slides/ | decks/ | card-news | undecided
• Stage: plan | design | edit | assets | validate | export

Recommended next move

• npm-install | slides-grab edit | list-styles | slides-grab image | validate | pdf | png-card-news | convert

Why

• 2–3 bullets grounded in the user's packet

Route-outs

• drawio / mermaid for editable vector diagrams embedded in a slide
• presentation-builder for packet-first planning + export-target handoff
• god-tibo-imagen for standalone AI image generation
• open-design for broad local design-artifact generation

Best practices

1. Validate before every export — slides-grab validate (Playwright) catches missing local assets and discouraged path forms before PDF/PNG/PPTX.
2. Keep assets local — store under <slides-dir>/assets/ and reference ./assets/<file>; remote image URLs and absolute paths are rejected in saved slides. Download web video with fetch-video first.
3. Use --slides-dir consistently — pass the same deck path to every stage; for card-news pass --mode card-news (editor/validate) and --slide-mode card-news (pdf/png) at every step.
4. Treat PPTX/Figma as best-effort — convert and figma are experimental/unstable; expect layout shifts and manual cleanup. Prefer PDF (capture) for fidelity and PNG for card-news.
5. Prefer the bbox edit loop — drag a region and ask the agent to rewrite just it, instead of regenerating whole slides; hand-edit only trivial text.
6. Mind the image backend caveat — god-tibo-imagen is an unsupported private Codex backend needing an image-entitled account; have OPENAI_API_KEY or GOOGLE_API_KEY ready as a fallback, or fall back to web-search + download.

References

• Upstream repo: https://github.com/NomaDamas/slides-grab
• Live showcase gallery: https://nomadamas.github.io/slides-grab/
• Install guides: docs/installation/claude.md, docs/installation/codex.md
• Feature + command reference: references/features.md
• Installer script: scripts/install.sh
• Adjacent skills: ../drawio/SKILL.md, ../presentation-builder/SKILL.md, ../god-tibo-imagen/SKILL.md, ../open-design/SKILL.md
• License: MIT