ScreenCheck

Design review on localhost

Pin feedback to the screen it's about.

Capture every screen of your app, drop numbered pins where the problems are, and approve screens one by one. When an agent fixes a pin, it says what it changed, right on the card, and you verify it.

Run it locally See what it does
ScreenCheck reviewing a ferry-booking app. A screen index on the left lists nine screens with approval checks and open-comment counts, the middle shows the 'Pick a sailing' capture with two orange pins, and the right panel groups the comments by status and priority. 1 2 3 4 5 6 7
  1. 1Pins
  2. 2Status groups
  3. 3Replies and verify
  4. 4Approvals
  5. 5Showing strip
  6. 6Fullscreen
  7. 7Export

Screenshots in chat lose their place.

One place per screen

Every screen gets a number, a capture and its own comments. "Screen 4, pin 2" means the same thing to everyone.

Nothing leaves your machine

The server binds to 127.0.0.1. Captures, feedback and approvals are plain JSON files in a folder you choose.

Built for fix loops

Export the backlog for an agent, let it reply on each comment, and review the replies against the next capture.

Pin it where it is

Press Add feedback (or ⌘F) and click the capture. The pin lands on that exact spot, the editor opens beside it, and the note autosaves as you type.

  • Pins sit on an aspect-locked frame, so they stay put at any window size.
  • P0, P1, P2 priorities plus any free-text tags.
  • Captured with the helper, each pin names the element under it: ↳ button "Return" · TripTypeToggle.tsx:24.
A new pin dropped on the Children row of the Vehicle and passengers screen, with the feedback editor open on the right showing a note and the P1 tag selected.
A new pin on step 3. The editor shows the same number as the pin.

Sort by status

Comments group into Backlog, In progress, Fixed, Verified and Won't fix, then by priority. Each group has its own Hide pins switch, so you can clear the screen of everything except what still needs work.

  • Fixed and Verified pins turn teal with a check and start hidden.
  • Empty groups disappear; untagged comments sit under their status.
The Home screen with three pins. The feedback panel shows Backlog, In progress and Won't fix sections, each with a Hide pins control.
Three statuses on one screen, each with its own pin switch.

Agents close the loop

Whoever fixes a comment replies on it: what changed, or why it won't. Fixed isn't done until you say so. Every Fixed card has Verify and Reopen; only a reviewer can verify.

  • Replies and your answers form a thread on the comment, kept through status changes and in exports.
  • Reopen asks why and sends the comment back to Backlog.
  • Agents reply from the CLI or over MCP. See how.
The Choose route screen. Under Fixed, a teal pin's card shows the note, the element under the pin (button Return, TripTypeToggle.tsx:24), the agent's latest reply, and Verify and Reopen buttons.
A Fixed comment waiting on the reviewer: Verify or Reopen.
The same comment opened in the editor. Below the note, a thread: the agent's reply, the reviewer asking for the teal accent, and the agent's second reply.
Open the comment to read the whole thread.

Approve screen by screen

Approve screen stays at the foot of the feedback panel. One click turns it teal; click again to take it back. The screen index shows a check beside every approved screen and an orange count of open comments beside the rest.

  • Approvals are saved per build and screen.
  • Checks and counts read in the expanded, collapsed and fullscreen index.
The Sign in screen with the Screen approved button in teal at the bottom of the feedback panel. The screen index shows checks next to screens 1, 7 and 9.
Sign in is approved. Screens 7 and 9 are too; the rest still have open comments.

Say what the screen shows

A Showing strip above each capture says exactly which state you're looking at: "Step 3 of 4, manual entry path". Click to edit it. Long pages are captured whole, with the footer at the end where it belongs.

  • Captions default to the screen's description and save per build.
  • captureFullPage moves fixed and sticky bottom bars to the end of the page before the shot.
The Review and pay screen captured as one long page, with the site footer at the very bottom of the capture and a Showing strip above it reading: Step 4 of 4, full page with saved card.
A full-length checkout page with its footer at the bottom.

Fullscreen review

The capture takes the whole window. A slim numbered strip on the left expands to screen names on hover, and feedback slides in from the right edge when you need it.

  • ← → or [ ] move between screens.
  • The address bar keeps the project, build and screen, so links open in the same place.
Fullscreen mode on the Review and pay screen. A narrow numbered strip runs down the left edge with checks and counts, and a Feedback tab sits on the right edge.
Fullscreen keeps the numbers, checks and counts in a 64px strip.

Export for the backlog

Export writes Markdown or JSON for all screens or just this one, filtered by status. Exports are deterministic, state their scope and keep the on-screen pin numbers, so "screen 4, pin 2" still means something in a ticket.

  • Every comment carries its id, so an agent can reply to it.
The Export feedback dialog with Markdown selected, All 9 screens, and Backlog, In progress, Fixed and Won't fix all checked. The footer reads: All 9 screens, version build-42, 14 items.
Fourteen comments across nine screens, ready to hand off.

For coding agents

Fix it, then say so.

ScreenCheck is a review surface you and your agent share. You pin, the agent fixes and replies, and you check the reply against the next capture.

  1. Review the build and pin what's wrong.
  2. Point the agent at ScreenCheck over MCP, or hand it a Markdown export.
  3. The agent fixes each comment, replies and marks it Fixed.
  4. Recapture, verify or reopen each fix, and approve the screen. 
# MCP: Copilot CLI, Claude Code or VS Code
claude mcp add screencheck -- screencheck mcp

# Tools: list_projects, list_feedback, get_comment,
# reply, set_status, approval_status

get_comment returns the note, the element under the pin and a crop of the capture with the pin circled, so the agent sees what you saw. 

# Or from a shell: list open comments
screencheck reply --project tidewater --list

# Say what changed and mark it Fixed
screencheck reply --project tidewater \
  --id <feedbackId> --status fixed --author Copilot \
  --note "Moved the saving into the Return button label."

--status takes fixed, wont-fix, in-progress or backlog. Agents can't mark a comment Verified; that stays with you.

Install

Running in three steps

1. Start it

Node 22 or later. The server listens on 127.0.0.1:4173 only. npm link puts screencheck on your path; it isn't on npm yet. 

git clone https://github.com/alexselig/screencheck
cd screencheck
npm install
npm run build && npm link
screencheck serve --open

2. Capture your screens

Use Playwright and the bundled helper, so long pages end at their footer. 

import { captureFullPage } from
  "./src/capture/full-page";

await page.goto("http://localhost:3000/checkout");
await captureFullPage(page, {
  path: "captures/build-42/checkout.png",
});

3. Register the project

Save as ~/.screencheck/projects/shop.json. 

{
  "id": "shop",
  "name": "Shop",
  "versions": [{ "id": "build-42",
    "captureRoot": "/path/to/captures/build-42" }],
  "screens": [{
    "id": "checkout", "ordinal": 1,
    "title": "Checkout", "group": "Buy",
    "description": "Step 2 of 3, saved card",
    "capturePath": "checkout.png",
    "viewport": { "width": 1440, "height": 1000 }
  }]
}

Feedback is saved to ~/.screencheck/feedback/<project>/. Set SCREENCHECK_DATA or SCREENCHECK_PROJECTS to use other folders. Every screenshot on this page comes from a made-up app, generated by scripts/site/build-shots.mjs.