---
name: markloom-visual-review-board
description: Use Markloom when reviewing app screenshots, generated mockups, simulator screenshots, goldens, 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 feedback.

Canonical URLs:

- Landing page: `https://markloom.satoapps.com/`
- Japanese landing page: `https://markloom.satoapps.com/ja/`
- Agent entrypoint: `https://markloom.satoapps.com/start.md`
- 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.

## First-Run Onboarding

If the user is trying Markloom for the first time, use the agent entrypoint. The landing page is for humans; agents should read:

```text
https://markloom.satoapps.com/start.md
```

Guide the user through one complete loop:

1. Capture or request one app screenshot.
2. Open or prepare a Markloom board with that screenshot centered.
3. Wait for the user to mark feedback on the board.
4. Read the copied board image when the user returns it.
5. Summarize concrete UI changes before implementation.
6. Tell the user that next time they can say: `Review this screen with Markloom.`
7. If this skill is not installed or may be stale, ask whether to install or update it from `https://markloom.satoapps.com/skill/SKILL.md`.

## Primary Use Case

The main flow is one app screenshot:

1. Open the screenshot in Markloom.
2. Mark fixes with pen, arrows, boxes, text, or pasted reference snippets.
3. Use `Copy` to copy the board image back to the LLM or review thread.

Side-by-side reference images are optional. Do not make them the default unless the user explicitly wants comparison.

## Import Payload

Open the board with:

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

Minimal payload:

```json
{
  "title": "App Screen Review",
  "storageKey": "app-screen-review-20260605",
  "pairs": [
    {
      "id": "home",
      "image": "https://example.com/home-screen.png"
    }
  ]
}
```

Optional reference payload:

```json
{
  "title": "App Screen Review",
  "storageKey": "app-screen-review-20260605",
  "pairs": [
    {
      "id": "home",
      "title": "Home Screen",
      "image": "https://example.com/current.png",
      "reference": "https://example.com/reference.png",
      "imageLabel": "Screenshot",
      "referenceLabel": "Reference"
    }
  ]
}
```

Supported fields:

- `title`: page title
- `storageKey`: unique browser storage key
- `pairs[].id`: stable board id
- `pairs[].title`: optional section title
- `pairs[].image`, `pairs[].src`, or `pairs[].url`: primary screenshot URL or data URL
- `pairs[].reference`, `pairs[].right`, `pairs[].golden`, `pairs[].actual`, or `pairs[].compare`: optional secondary image
- `pairs[].imageLabel`, `pairs[].leftLabel`, or `pairs[].label`: optional primary label
- `pairs[].referenceLabel`, `pairs[].rightLabel`, `pairs[].goldenLabel`, or `pairs[].compareLabel`: optional secondary label
- `pairs[].imageAlt`, `pairs[].leftAlt`, or `pairs[].alt`: optional primary alt text
- `pairs[].referenceAlt`, `pairs[].rightAlt`, or `pairs[].goldenAlt`: optional secondary alt text

Legacy `left`/`mock` and `right`/`golden` payloads still work, but new agents should prefer `image` and optional `reference`.

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

## Board Tools

The board exposes:

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

There is no circle tool.

## Updating One Image

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

To add or update a secondary reference, set `pairs[i].reference`.

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 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.