slides-grab HTML Skill

Build semantic slide-XX.html files where text is real HTML (selectable, editable, accessible) and imagery is generated as supporting accent/hero assets — never as whole-slide rasters. Use this pipeline when the user wants a deck they can edit, when slides contain charts or diagrams, or when no existing template demands pixel-perfect visual matching.

Mode signal

The plan stage records mode: html in slide-outline.md. If no mode is recorded, default to this pipeline.

Bespoke imagery rule

• Use slides-grab image to generate individual hero/accent images that sit beside or behind semantic text inside an HTML slide. The generated image is a supporting visual — text and layout stay in HTML/CSS.
• A bespoke image prompt describes the accent visual only — the atmospheric mood, the hero illustration, the background texture — not the slide's title, body copy, or layout. Let HTML handle text and layout.
• Good prompt: "Atmospheric dawn horizon, cyan and silver tones, dreamy Y2K mood, no text, 16:9" — describes a hero background.
• If you instead need the generated image to BE the whole slide (title, body, layout burned into the raster), use the image-native pipeline (../slides-grab-image/SKILL.md) — semantic HTML is the wrong tool for that.

Workflow