> ## Documentation Index
> Fetch the complete documentation index at: https://jam.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Prove a fix with a screenshot

> Prove a fix with an annotated screenshot Jam. Boxes, arrows, and redactions show a reviewer what changed in five seconds.

Some changes are easier to read in a still image than in a video: a fixed layout, a new label, a corrected number. `jam create jam` uploads the screenshot as a Jam and draws your marks into it. Boxes and arrows get numbered badges, and redactions cover anything that must not leave the screen.

<Info>
  Install the CLI and run `jam skills install` first. See [Get started](/docs/cli#quickstart).
</Info>

## Ask your agent

```text wrap theme={"theme":"css-variables"}
Screenshot the fixed checkout page, box what changed, redact any customer data, and file it as a Jam.
```

The `jam-annotate` skill teaches the agent to scale coordinates, pick marks, and number the description to match the badges. It returns the Jam link.

## Do it yourself

This example uses [agent-browser](https://agent-browser.dev) to take the screenshot. Any tool that saves a PNG or JPEG works.

<Steps>
  <Step title="Take a screenshot of the viewport">
    ```bash theme={"theme":"css-variables"}
    agent-browser set viewport 1280 760 2
    agent-browser open https://example.com/checkout
    agent-browser screenshot ./checkout.png
    ```

    Capture the viewport, not the full page, so element positions and the image line up. The `2` captures at retina scale, so the image is 2560×1520 pixels and stays sharp.
  </Step>

  <Step title="Find where the elements are">
    ```bash theme={"theme":"css-variables"}
    agent-browser eval 'JSON.stringify(document.querySelector("#total").getBoundingClientRect())'
    ```

    Annotation coordinates are pixels of the image file. This returns CSS pixels. At retina scale, multiply every number by two.
  </Step>

  <Step title="Create the Jam with annotations">
    ```bash theme={"theme":"css-variables"}
    jam create jam '{
      "url": "https://example.com/checkout",
      "title": "Discount applies and the order confirms",
      "description": "1. The SPRING10 discount and the new total.\n2. The order confirmation that now appears.\nPayment details and email redacted.",
      "screenshotPath": "./checkout.png",
      "screenDimensions": { "width": 1280, "height": 760 },
      "annotations": [
        { "type": "redact", "x": 2058, "y": 38, "width": 332, "height": 58 },
        { "type": "redact", "x": 154, "y": 462, "width": 1348, "height": 92 },
        { "type": "redact", "x": 154, "y": 638, "width": 1348, "height": 92 },
        { "type": "redact", "x": 154, "y": 814, "width": 1348, "height": 92 },
        { "type": "box", "x": 1662, "y": 672, "width": 764, "height": 204, "label": "Discount applied" },
        { "type": "arrow", "from": { "x": 2200, "y": 1290 }, "to": { "x": 2060, "y": 1140 }, "label": "Order confirmed" }
      ]
    }'
    ```

    The receipt prints the Jam's `url`. Post it on the pull request.
  </Step>
</Steps>

## Make it readable

* Use three to five marks. If you need more, record a video instead.
* Write one line in the description for each numbered mark. Badges follow payload order, and redactions don't get numbers.
* Use `redact` for emails, names, tokens, and customer IDs. Large text can stay readable through a `blur`, so use `blur` only to hide clutter.

<Note>
  A screenshot Jam carries no console logs or network requests. When the proof depends on them, such as a request that now returns 200, record a video with `--cdp` instead. See [Prove a fix with a video](/docs/cli-proof-video).
</Note>

## Next

* For every annotation type, color, and payload field, see [Create and update Jams](/docs/cli-reference#create-and-update-jams).
* When the change is a flow rather than a single state, follow [Prove a fix with a video](/docs/cli-proof-video).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.