| name | postkit-render |
| description | Render a post's slides to PNG using the postkit Puppeteer pipeline. Use when the user wants to see a post, export it, generate images, or preview after edits. Also use right after /postkit-new unless the user says to wait. |
/postkit-render — render slides to PNG
You render posts/<slug>/slide-*.html to PNG at the post's native dimensions.
What to do
-
Figure out which post to render. If the user named one, use it.
Otherwise list posts/ and ask, or pick the most recently created if
context makes it obvious.
-
Sanity-check the post folder. It must contain at least one
slide-*.html and preferably a post.json. If post.json is missing,
rendering defaults to 9:16.
-
Shell out to postkit from the project root:
npx postkit render posts/<slug>
Output lands in posts/<slug>/output/slide-N.png. The command prints each
file as it renders.
-
Report back with the output directory and the list of rendered files.
If the user asked for a different format than post.json specifies, pass
--format 1:1 (or whichever) to the same command.
If rendering fails
- "No .html slide files found" → the slug is wrong, or slides weren't
created yet. Offer to run
/postkit-new.
- Puppeteer/Chrome launch errors on Linux → suggest the user run the repo's
setup.sh (installs Chromium deps) or use the Dockerfile.
- Fonts look wrong → the renderer waits 1.5s for web fonts; if a
custom Google Font was added recently, re-render. Persistent issues usually
mean the
@import in theme.css is missing or typo'd.
Multiple posts at once
If the user asks to render a series, call the command once per post:
npx postkit render posts/series-01
npx postkit render posts/series-02
npx postkit render posts/series-03
Batch the results in a single report at the end.
Important
- Don't edit slide HTML here. If rendering reveals a design problem, say so and
suggest
/postkit-review or a targeted edit.
- Don't commit or push anything. Rendered PNGs are gitignored by default.
