← ClaudeAtlas

visual-judgelisted

Judge a UI screenshot against written acceptance criteria — a vision model describes the rendered page neutrally, then an LLM judge compares it to the spec and returns strict JSON with pass/fail and per-violation severity. Use to self-check frontend changes from a screenshot, or as a CI visual-regression gate that only fails when a human would care.
nanoodlecom/noodle-skills · ★ 0 · AI & Automation · score 72
Install: claude install-skill nanoodlecom/noodle-skills
# Visual judge Runs the bundled nanoodle workflow `workflows/visual-judge.noodle-graph.json` against the NanoGPT API in two stages: a vision model describes the screenshot (`Screenshot`) exhaustively and neutrally — it never judges — then an LLM judge compares that description against your acceptance criteria (`Spec`) and returns strict JSON (`Verdict`): `{"pass": bool, "violations": [{"issue", "severity"}]}` with severity `critical | major | minor`. Requires Node.js >= 20 and the `nanoodle` npm package (`npx nanoodle` fetches it). Typical agent use: after editing a component, screenshot the page (Playwright, your project's verify tooling), run this, and only commit when `pass` is true — or read the `violations` and fix them. ## API key The run needs a NanoGPT API key. Use whichever is available: - `NANOGPT_API_KEY` already set in the environment — prefer this; no extra flags. - A `.env` file containing `NANOGPT_API_KEY=...` — pass `--env-file <path>` only when the key is not already in the environment. (With this CLI, `--env-file` overrides ambient `NANOGPT_API_KEY`.) Never print the key. ## Run From this skill's directory (or prefix paths if running from elsewhere). Replace the screenshot path and the spec with the real ones: ```sh npx nanoodle run workflows/visual-judge.noodle-graph.json \ --input "Screenshot=@/path/to/screenshot.jpg" \ --input "Spec=The pricing page must show three plan cards, a visible Buy button on each, and no overlapping sections." ``