---
name: markloom-visual-review-board
description: Use Markloom when comparing generated mockups, golden screenshots, simulator screenshots, actual app screenshots, or reference images, then annotating exact UI fixes on a static visual review board.
---

# Markloom Visual Review Board

Markloom is a static visual review board for AI-assisted UI review.

Canonical URLs:

- Landing page: `https://markloom.satoapps.com/`
- Board: `https://markloom.satoapps.com/board/`
- Agent guide: `https://markloom.satoapps.com/agent-guide.md`
- Skill: `https://markloom.satoapps.com/skill/SKILL.md`

Always re-read the agent guide before using Markloom. If this skill is installed locally, refresh it after Markloom updates or when behavior seems different from the local instructions.

## Use Cases

Use Markloom when the user wants to:

- Compare generated UI mockups with Flutter goldens
- Compare actual screenshots with expected screenshots
- Mark exact UI fixes with pen, arrows, boxes, text, or pasted references
- Create a low-noise visual context image for another LLM or review thread

## Import Payload

Open the board with:

```text
https://markloom.satoapps.com/board/#data=<base64url(JSON)>
```

Minimal payload:

```json
{
  "title": "UI Review",
  "storageKey": "ui-review-20260605",
  "pairs": [
    {
      "id": "home",
      "title": "Home Screen",
      "left": "https://example.com/mock.png",
      "right": "https://example.com/golden.png",
      "leftLabel": "Mock",
      "rightLabel": "Golden"
    }
  ]
}
```

Supported fields:

- `title`: page title
- `storageKey`: unique browser storage key
- `pairs[].id`: stable board id
- `pairs[].title`: section title
- `pairs[].left` or `pairs[].mock`: left image URL or data URL
- `pairs[].right` or `pairs[].golden`: right image URL or data URL
- `pairs[].leftLabel`: left image label
- `pairs[].rightLabel`: right image label
- `pairs[].leftAlt`: optional left alt text
- `pairs[].rightAlt`: optional right alt text

Do not inject review comments, red/blue text, arrows, boxes, or handwritten annotations through the import payload. Import only page title, section title, images, and image labels. Add review annotations on the board after import.

## Board Tools

The board exposes:

- Select
- Pen
- Arrow
- Box
- Eraser
- Add image
- Color swatches
- Board-level Undo, Redo, Reset, and Copy

There is no circle tool.

## Updating One Image

To update one image, decode the current `#data` payload, replace `pairs[i].left` or `pairs[i].right`, re-encode the JSON as base64url, and update the hash.

Keep the same `storageKey` and `pairs[i].id` if existing annotations should stay associated with the same board. Use a new `storageKey` for a clean board.

## Copy Handoff

Use the board-level `Copy` button to copy the rendered board image to the clipboard. The copied image should include enough context for an LLM to understand which section, mock, golden, and annotations are being referenced.

## Large Images

Small HTTPS URLs and small data URLs are fine in hash payloads. For large images, open the board and paste or drag images into it.