Capture & annotate

Render a page, mark what changed, and host the result in one step.

Capture a screenshot #

screenshot renders a URL or a local .html file and hosts the image in one step:

uploads screenshot https://app.example --pr 123

Leave off --pr and it stages on your branch, the same way put does.

It uses Chrome if you have it installed. Otherwise it renders on uploads.sh, which can’t reach localhost.

Common flags:

--dark renders in dark mode.
--selector <css> captures one element instead of the viewport.
--out <path> also saves a local copy.

For dev-server options, like hiding overlays or waiting for the app to load, run uploads screenshot --help.

Annotate a screenshot #

Point reviewers at what changed. uploads bakes boxes, labels, and redactions into the image before it hosts it. Both commands read the same JSON file:

uploads screenshot http://localhost:3000 --via local --annotate ./callouts.json

uploads annotate ./shot.png --spec ./callouts.json --out ./shot.marked.png

Use screenshot --annotate on a page you can load locally, so annotations can target elements by CSS selector. Use annotate on an image you already have; it takes pixel coordinates.

{
  "version": 1,
  "annotations": [
    { "type": "box", "selector": "#save-button" },
    { "type": "label", "text": "New: bulk save", "selector": "#save-button" },
    { "type": "redact", "selector": "[data-testid=api-key]", "style": "solid" }
  ]
}

Hide secrets with a solid redact. Hosted files are public, and blurred text can sometimes be read.

The full spec, including arrows and freehand strokes, is in the annotate-screenshots skill and in uploads annotate --help.