slide-to-image
Installation
SKILL.md
Slide To Image
Capture a slide as a PNG to visually verify it renders correctly.
Usage
npx promptslide to-image <slide-path> [-o <output-file>]
<slide-path>: Slide file relative to project root (e.g.src/slides/slide-title.tsx)-o <output-file>: Optional output path. Defaults to<slide-name>.pngin the current directory.
Workflow
- Identify the slide file. If unclear, glob for
src/slides/**/*.tsx. - Run
npx promptslide to-image <slide-path>from the project root. - Read the resulting PNG with the Read tool to visually inspect it.
- If the slide has visual issues (layout, spacing, content), fix the code and re-capture.
Proactive Visual Check
After creating or editing a slide, capture a screenshot to verify:
- Layout and spacing look correct
- Text is readable and not clipped
- Colors and styling match expectations
- Animations render in their final state (all steps shown)
If something looks off, iterate on the slide code and re-capture until it looks right.
Related skills