Slides Grab HTML Skill
Generate semantic HTML slides in Claude Code / Codex with bespoke AI imagery, a design gate, and PDF/PPTX export.
Evidence shows strong safety design: export is hard-blocked without a fresh design-gate Proceed receipt (test-verified), DESIGN.md is wrapped as untrusted data with adversarial-injection tests, remote http(s) image URLs are forbidden, asset paths are localized, and credential-missing paths have disclosed fallbacks reusing local codex login. Deductions: the default ~/.codex/auth. credential-reuse path is only documented, no fine-grained least-privilege statement, and rollback mechanics are undescribed.
SKILL.md workflow is self-consistent (Plan→Design→Export maps 1:1 to CLI commands), and the repo contains extensive targeted tests (design-gate blocking/staleness/template fidelity, codex-imagen fallback and error wrapping, validate) with clear failure feedback (e.g., codex login hints). Deduction: static review cannot execute reproduction and no CI workflow running the test suite appears in evidence, so the calibration cap of 10 applies.
Scenarios, trigger conditions, and non-fit boundaries (explicitly pointing whole-slide raster work to slides-grab-image) are clearly written; the mode signal (mode: html) supports accurate semantic invocation. Deductions: Chinese-language support is undeclared, and core image generation depends on Codex/OpenAI/Google overseas services, a mainland-China reachability risk only partly mitigated by the web-search download fallback.
Docs are well layered (SKILL.md + references + sibling-skill cross-links), examples and rules are concrete, MIT license is clear, and contribution flow is documented. Deductions: no skill-level version/changelog or known-limitations list; maintenance responsibility and update path rest at repo level rather than being declared for this skill.
The pipeline covers generation, validation, editing, and export end-to-end with directly usable HTML/PDF/PNG outputs and clear marginal value over manual or generic AI slide generation. Deductions: static review cannot verify representative outputs as directly usable; PPTX/Figma export is self-declared experimental and may need heavy cleanup; the self-reported design-gate mechanism adds process cost.
Key claims have auditable primary material: committed tests covering the design gate, image fallback, and validator (using mock providers, no external credentials) are independently reproducible. Deduction: static reading cannot confirm tests pass in CI and no third-party execution corroboration is present, so the cap of 5 applies.
- Default image generation reuses the local Codex login credential (~/.codex/auth.); users should be aware of this credential flow and can opt for explicit providers or fallbacks.
- Image generation depends on overseas services (Codex/OpenAI/Google) and may be unreachable from mainland-China networks without a proxy; the fallback is web search plus local download.
- PPTX (convert) and Figma export are experimental/unstable; outputs may require substantial manual cleanup.
- The design-gate Pass A/B reports are agent-generated and self-recorded — a soft quality gate, not a substitute for human review.
- Static review only; nothing was executed; confidence is low.
What does this skill do, and when should you use it?
slides-grab-html is one skill inside the slides-grab monorepo, providing an HTML-first presentation pipeline. Slides are real semantic HTML files (slide-XX.html) with selectable, editable, searchable text, while imagery is AI-generated as separate hero/accent assets. The workflow runs in three stages: plan an outline, design and pass a design gate, then export. It is explicitly aimed at decks that need editable, accessible text, charts, and diagrams — not pixel-perfect matching of existing templates. The repo is MIT-licensed, installable via npm, and works in both Claude Code and Codex.
Reads topic, audience, and tone, shortlists from 95 bundled design styles, and produces an approved slide outline; generates semantic slide-XX.html files with real text tags (p, h1-h6, ul, ol); generates bespoke hero/accent images via slides-grab image (default codex provider reuses your local Codex ChatGPT login with no separate API key; optional OpenAI gpt-image-2 or Google gemini-3-pro-image-preview providers); renders charts with Chart.js, diagrams with tldraw, and prefers Lucide icons over emoji; runs slides-grab validate (Playwright-based) plus a two-pass design gate and records a Proceed receipt; finally exports to PDF (capture or print mode), per-slide 2160p PNGs, square card-news images, and experimental/unstable PPTX and Figma-importable files.
- Technical talks that will be revised often by humans or agents — HTML text is directly editable and searchable
- Presentations with data charts or architecture diagrams, rendered locally via Chart.js and tldraw and exported reliably
- Teams wanting a new deck driven by corporate colors/fonts without pixel-perfect template matching — import design tokens via slides-grab import-template
- Creators publishing 1:1 card-news to Instagram, exported as square PNGs via --slide-mode card-news
- Users with a Codex login but no standalone image API key, who can still generate imagery
- Accessible presentation materials needing selectable text PDFs via --mode print
What are this skill's strengths and limitations?
- Slides are real semantic HTML text — selectable, searchable, accessible, and far more editable than whole-slide raster decks
- 95 bundled design styles plus custom directions, selectable instantly with no config files
- Default image generation reuses your local Codex login — no extra API key or billing setup
- Enforced design gate plus Playwright validation catches quality issues before export
- One pipeline, many exports: PDF, per-slide PNG, square card-news; PPTX/Figma also available (experimental)
- MIT-licensed, npm-installable, pure-JS editor that is easy to extend
- Not suited to pixel-perfect reproduction of existing templates — the skill itself says that is the image-native pipeline's job
- PPTX and Figma exports are officially experimental/unstable; expect layout shifts and manual cleanup
- The default codex-imagen provider calls an unsupported private Codex backend that may break anytime, and not all ChatGPT accounts have image-generation entitlement
- Heavy dependency chain: Node.js 20+, Playwright Chromium, slides-grab CLI; yt-dlp additionally needed for web video download
- Many strict rules (no CSS gradients, body text ≥14pt, no remote image URLs) that the agent must follow faithfully
- Export is gated behind a design-gate receipt — you cannot get PDF/PPTX until the review passes
How do you install this skill?
Install the whole slides-grab skill collection (this skill lives at skills/slides-grab-html/SKILL.md among 7 bundled skills): npm install slides-grab && npx playwright install chromium && npx slides-grab install-skills --target all --scope user. Requires Node.js >= 20. Alternatively, in Claude Code paste: Read https://raw.githubusercontent.com/NomaDamas/slides-grab/main/docs/installation/claude.md and follow every step. (Codex uses codex.md). Run codex login once before using the default image provider.
How do you use this skill?
Three stages: 1) Plan — tell the agent topic, audience, and tone; run slides-grab list-styles, get approval for 2-3 styles, record mode: html in slide-outline.md. 2) Design — the agent generates semantic slide-XX.html files (720pt × 405pt); for imagery run slides-grab image --prompt "<accent-visual-only prompt>" --slides-dir <path>; then run slides-grab validate and pass the two-pass design gate (Pass A System Contract + Pass B Audience Impact), recording a Proceed receipt. 3) Export — run slides-grab pdf / png, or experimental convert / figma. Note: export is blocked without a fresh design-gate Proceed receipt.
How does this skill compare with similar options?
The repo positions itself as an open-source alternative to Claude Design; versus generic AI slide-HTML tools it adds visual bbox-selection editing and in-place iteration. Compared to its sibling slides-grab-image skill (whole-slide raster pipeline), this skill trades pixel-perfect visual composition for editable, searchable, accessible text.