slides-grab

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`.
metadata	{"tags":"slides-grab, slide-generation, presentation, html-slides, slide-editor, pdf-export, pptx-export, card-news, claude-design-alternative, plugin","platforms":"Claude, Codex, Gemini, OpenCode, All","keyword":"slides-grab","version":"1.0.0","upstream":"https://github.com/NomaDamas/slides-grab","installer":"npm install slides-grab && npx playwright install chromium && npx skills add ./node_modules/slides-grab -g -a codex -a claude-code --yes --copy","source":"akillness/jeo-skills","license":"MIT"}

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