Documentation maintenance
Refresh docs screenshots with a repeatable command
Capture a stable product or docs URL at a named viewport, write the PNG into the docs asset tree, and review the diff before committing it. Future refreshes use the same command instead of manual browser cropping.
export SCRNIFY_API_KEY=...
mkdir -p docs/assets
capture_url="$(scrnify capture "$DOCS_URL" \
--type image --format png \
--width 1440 --height 900 \
--selector ".product-panel")"
curl -fsSL "$capture_url" -o docs/assets/product-panel.pngRepository candidate
docs/assets/product-panel.png — review this generated file before adding it to a documentation commit.
Run sheet
Store the recipe beside the image
- 01
Choose a stable source state
Use a public page with predictable data. A demo route or fixed product state produces longer-lived documentation than an account page with personal or changing content.
- 02
Define the crop
Capture a unique CSS selector when docs explain one control or panel. Use a fixed viewport or --full-page for page-level walkthroughs, and keep that choice in the refresh script.
- 03
Write to the docs tree
Download to the exact filename referenced by the docs. In CI, upload that file as an artifact for review; the shell recipe does not push or open a pull request.
- 04
Review content and diff
Open the image at full size. Check labels, crop, confidential data, focus state, and theme before committing the binary change with the documentation update.
Before sharing
Keep docs assets trustworthy
- Use stable seed content and remove personal, customer, token, and environment data from the source page.
- Give the image descriptive alt text in docs; do not use the screenshot as the only source of an instruction.
- Record viewport, selector, source URL, and refresh command in a script or contributor note.
- Review every refreshed image; successful capture and download do not prove the screenshot teaches the right step.