Generate, visually edit, and export beautiful HTML/CSS presentation decks with agents using slides-grab (NomaDamas, MIT) — the open-source Claude Design alternative and best harness + editor + linter for slides in Claude Code / Codex. One routing-first skill across Plan (agent drafts an outline), Design (each slide is a self-contained slide-XX.html), Edit (a pure-JS browser editor where you drag a bbox over any region and ask the agent to rewrite just that area, or hand-tweak text/size/bold), and Export (capture-or-print PDF, per-slide PNG incl. Instagram 1:1 card-news, plus experimental/unstable PPTX and Figma-importable PPTX). Picks an install path (npm package + npx skills add, or clone), a deck workspace (--slides-dir, multi-deck decks/<name>/), one of 35 bundled design styles, and the supported asset flow (local ./assets/<file> only — image via god-tibo-imagen/codex/nano-banana, fetch-video via yt-dlp, tldraw .tldr→SVG), validating with slides-grab validate before any export.
Instrucciones de origen · Vista previa de solo lectura
name
slides-grab
description
Generate, visually edit, and export beautiful HTML/CSS presentation decks with agents using slides-grab (NomaDamas, MIT) — the open-source Claude Design alternative and best harness + editor + linter for slides in Claude Code / Codex. One routing-first skill across Plan (agent drafts an outline), Design (each slide is a self-contained slide-XX.html), Edit (a pure-JS browser editor where you drag a bbox over any region and ask the agent to rewrite just that area, or hand-tweak text/size/bold), and Export (capture-or-print PDF, per-slide PNG incl. Instagram 1:1 card-news, plus experimental/unstable PPTX and Figma-importable PPTX). Picks an install path (npm package + npx skills add, or clone), a deck workspace (--slides-dir, multi-deck decks/<name>/), one of 35 bundled design styles, and the supported asset flow (local ./assets/<file> only — image via god-tibo-imagen/codex/nano-banana, fetch-video via yt-dlp, tldraw .tldr→SVG), validating with slides-grab validate before any export.
allowed-tools
Bash Read Write Edit Glob Grep WebFetch
compatibility
Cross-platform slide-generation/editing/export wrapper usable from Claude Code and Codex (the upstream ships dedicated install guides for both) and other agents via the shared skill. Wraps the upstream slides-grab CLI (NomaDamas/slides-grab, MIT) — a Node.js >= 20 package (`npm install slides-grab`) with a Playwright/Chromium render+export pipeline and a pure-JS browser editor. No MCP server and no daemon; `slides-grab edit` runs a local editor server on demand. Routes editable vector diagrams to `drawio`/`mermaid`, packet-first deck planning/handoff to `presentation-builder`, AI image generation to `god-tibo-imagen`, and broad local design-artifact generation to `open-design`.
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 or
and embed the exported image
drawio
mermaid
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
Plan — have the agent draft a structured outline from the topic/files.
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.
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:
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.
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/)
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
Validate before every export — slides-grab validate (Playwright)
catches missing local assets and discouraged path forms before PDF/PNG/PPTX.
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.
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.
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.
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.
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.
