lazycodex-ai 5.1.15 → 5.1.16

package/packages/omo-codex/plugin/hooks/subagent-stop-verifying-lazycodex-executor-evidence.json

@@ -7,7 +7,7 @@
 						"type": "command",
 						"command": "node \"${PLUGIN_ROOT}/components/lazycodex-executor-verify/dist/cli.js\" hook subagent-stop",
 						"timeout": 10,
-						"statusMessage": "(OmO 5.1.15) Verifying LazyCodex Executor Evidence",
+						"statusMessage": "(OmO 5.1.16) Verifying LazyCodex Executor Evidence",
 						"commandWindows": "powershell -NoProfile -ExecutionPolicy Bypass -File \"${PLUGIN_ROOT}\\components\\bootstrap\\scripts\\node-dispatch.ps1\" \"${PLUGIN_ROOT}\\components\\lazycodex-executor-verify\\dist\\cli.js\" hook subagent-stop"
 					}
 				],

package/packages/omo-codex/plugin/hooks/user-prompt-submit-checking-ultrawork-trigger.json

@@ -7,7 +7,7 @@
 						"type": "command",
 						"command": "node \"${PLUGIN_ROOT}/components/ultrawork/dist/cli.js\" hook user-prompt-submit",
 						"timeout": 5,
-						"statusMessage": "(OmO 5.1.15) Checking Ultrawork Trigger",
+						"statusMessage": "(OmO 5.1.16) Checking Ultrawork Trigger",
 						"commandWindows": "powershell -NoProfile -ExecutionPolicy Bypass -File \"${PLUGIN_ROOT}\\components\\bootstrap\\scripts\\node-dispatch.ps1\" \"${PLUGIN_ROOT}\\components\\ultrawork\\dist\\cli.js\" hook user-prompt-submit"
 					}
 				]

package/packages/omo-codex/plugin/hooks/user-prompt-submit-checking-ulw-loop-steering.json

@@ -7,7 +7,7 @@
 						"type": "command",
 						"command": "node \"${PLUGIN_ROOT}/components/ulw-loop/dist/cli.js\" hook user-prompt-submit",
 						"timeout": 10,
-						"statusMessage": "(OmO 5.1.15) Checking Ulw-Loop Steering",
+						"statusMessage": "(OmO 5.1.16) Checking Ulw-Loop Steering",
 						"commandWindows": "powershell -NoProfile -ExecutionPolicy Bypass -File \"${PLUGIN_ROOT}\\components\\bootstrap\\scripts\\node-dispatch.ps1\" \"${PLUGIN_ROOT}\\components\\ulw-loop\\dist\\cli.js\" hook user-prompt-submit"
 					}
 				]

package/packages/omo-codex/plugin/hooks/user-prompt-submit-loading-project-rules.json

@@ -7,7 +7,7 @@
 						"type": "command",
 						"command": "node \"${PLUGIN_ROOT}/components/rules/dist/cli.js\" hook user-prompt-submit",
 						"timeout": 10,
-						"statusMessage": "(OmO 5.1.15) Loading Project Rules",
+						"statusMessage": "(OmO 5.1.16) Loading Project Rules",
 						"commandWindows": "powershell -NoProfile -ExecutionPolicy Bypass -File \"${PLUGIN_ROOT}\\components\\bootstrap\\scripts\\node-dispatch.ps1\" \"${PLUGIN_ROOT}\\components\\rules\\dist\\cli.js\" hook user-prompt-submit"
 					}
 				]

package/packages/omo-codex/plugin/package-lock.json

@@ -1,12 +1,12 @@
 {
 	"name": "@sisyphuslabs/omo-codex-plugin",
-	"version": "5.1.15",
+	"version": "5.1.16",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
 			"name": "@sisyphuslabs/omo-codex-plugin",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"workspaces": [
 				"components/comment-checker",
 				"components/git-bash",
@@ -95,7 +95,7 @@
 		},
 		"components/comment-checker": {
 			"name": "@code-yeongyu/codex-comment-checker",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"omo-comment-checker": "dist/cli.js"
@@ -117,7 +117,7 @@
 		},
 		"components/git-bash": {
 			"name": "@sisyphuslabs/codex-git-bash-hook",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"bin": {
 				"omo-git-bash-hook": "dist/cli.js"
 			},
@@ -131,7 +131,7 @@
 		},
 		"components/lazycodex-executor-verify": {
 			"name": "@code-yeongyu/codex-lazycodex-executor-verify",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"lazycodex-executor-verify": "dist/cli.js"
@@ -149,7 +149,7 @@
 		},
 		"components/lsp": {
 			"name": "@code-yeongyu/codex-lsp",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"dependencies": {
 				"@code-yeongyu/lsp-daemon": "file:../../../../lsp-daemon",
@@ -171,7 +171,7 @@
 		},
 		"components/rules": {
 			"name": "@code-yeongyu/codex-rules",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"dependencies": {
 				"picomatch": "^4.0.7"
@@ -194,7 +194,7 @@
 		},
 		"components/teammode": {
 			"name": "@sisyphuslabs/codex-teammode",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"devDependencies": {
 				"@types/node": "^26.6.2",
 				"@vitest/coverage-v8": "5.0.1",
@@ -208,7 +208,7 @@
 		},
 		"components/telemetry": {
 			"name": "@code-yeongyu/codex-telemetry",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"omo-telemetry": "dist/cli.js"
@@ -227,7 +227,7 @@
 		},
 		"components/ultrawork": {
 			"name": "@code-yeongyu/codex-ultrawork",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"omo-ultrawork": "dist/cli.js"
@@ -246,7 +246,7 @@
 		},
 		"components/ulw-execute-continuation": {
 			"name": "@code-yeongyu/codex-ulw-execute-continuation",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"omo-ulw-execute-continuation": "dist/cli.js"
@@ -264,7 +264,7 @@
 		},
 		"components/ulw-loop": {
 			"name": "@code-yeongyu/codex-ulw-loop",
-			"version": "5.1.15",
+			"version": "5.1.16",
 			"license": "MIT",
 			"bin": {
 				"omo-ulw-loop": "dist/cli.js",

package/packages/omo-codex/plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sisyphuslabs/omo-codex-plugin",
-  "version": "5.1.15",
+  "version": "5.1.16",
   "description": "Aggregate Codex plugin root for OMO components.",
   "type": "module",
   "packageManager": "npm@11.12.1",

package/packages/omo-codex/plugin/skills/browser/runtime/omowright/manifest.json

@@ -5,5 +5,5 @@
     "index.js": "b6b064fab277031c6c51f5a58b84b31040f9960bf767bf646adc0540c1d25c1b",
     "page-bundle.js": "bfd51e8383cf47200d57387bbbed258bce5a3a3d00c38fc108034d2888e23f0c"
   },
-  "stagedAtUtc": "2026-10-04T05:23:33.182Z"
+  "stagedAtUtc": "2026-10-04T10:04:51.873Z"
 }

package/packages/omo-codex/plugin/skills/frontend/SKILL.md

@@ -140,7 +140,7 @@ Domains: `product` `style` `typography` `color` `landing` `chart` `ux` `react` `
 - **No coloured accent borders on rounded surfaces.** A `border-l-2 border-primary` stripe on a selected row, a primary-tinted outline on a focused card — any `border-{side}-{primary|warning|destructive|success}` or accent-width rule used to mark selected/focused/active is the most recognizable AI-slop tell in shipped UI. Encode state the way `DESIGN.md` systems do: one ink at many alphas (hover/selected/active wash ramps), a glyph (check) for selection, tonal layering for focus. Keyboard `focus-visible` rings are the only coloured edge allowed. Applies to code you write AND to pre-existing instances on any surface you touch — sweep them out.
 - **GPU-composited animation only** — `transform`, `opacity`, `filter`; never animate layout properties.
 - **Slop animation is forbidden — motion serves meaning.** Every animation or hover must map to a real interaction, state change, or affordance. A hover that changes nothing, motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop — do not add it.
-- **Done is the `/visual-qa` dual-oracle gate, not your own glance.** A frontend design task is verified through `/visual-qa` (real browser at 375 / 768 / 1280px, every page, with interaction states and motion driven and inspected) until the dual-oracle completion gate passes on fresh evidence.
+- **Done is the `/visual-qa` gate, not your own glance.** A frontend design task is verified through `/visual-qa` - its HIG-based checklist, its capture matrix (every page and every sibling surface, phone and desktop, light and dark, scrolled-end, motion driven and inspected) and its dual-oracle completion gate on fresh evidence. This skill does not keep its own list of visual checks; the verifier owns it.
 
 ## When to load something else instead
 

package/packages/omo-codex/plugin/skills/frontend/references/design/README.md

@@ -246,15 +246,11 @@ Once references are loaded, before writing any UI code:
 
 ## Phase Final — Design QA (MANDATORY, runs after implementation)
 
-Before declaring the task done, verify the rendered UI. **The verification authority is `/visual-qa`, not a hand-rolled checklist here.** Run `/visual-qa`: it captures every page and breakpoint (375 / 768 / 1280px) on fresh evidence, drives and inspects interaction states (hover/focus/active) and motion (transitions, scroll-triggered, load), runs the dual-oracle pass, and loops until an independent reviewer passes. For a concrete reference or clone, run it in reference-fidelity mode.
+Before declaring the task done, verify the rendered UI. **The verification authority is `/visual-qa`, not a hand-rolled checklist here.** Run `/visual-qa`: its HIG-based checklist (layout, hierarchy, text, targets, themes, consistency, motion, states, keyboard, platform - including the slop-animation and accent-border-state rules this skill builds against) is judged on its capture matrix (every page and every sibling surface, phone and desktop, light and dark, scrolled-end, motion driven and inspected) by the dual-oracle pass, looping until an independent reviewer passes on fresh evidence. For a concrete reference or clone, run it in reference-fidelity mode.
 
-This skill adds only the design-taste judgments `/visual-qa` cannot make for you:
+This skill adds the one design-taste judgment `/visual-qa` cannot make for you. **Two kinds of failure count equally — fix both, then re-check.** Defects are what `/visual-qa` reports. Flatness is a surface that reads generic next to the loaded reference. When the render is bug-free but flat, you are NOT done — RAISE the design: deepen the material layering, give the color a real perceptual ramp (multiple stops / OKLCH, not one tint at varied opacity), render the hero focal object as real dimensional material (a generated bitmap, or real light/shadow/gradient/depth — never flat geometric primitives), and add the one signature moment. Patching only bugs while the surface stays at the floor is the single most common way this skill ships clean-but-generic work.
 
-1. **Two kinds of failure count equally — fix both, then re-check.** Defects: clipping, wrong font, missing state, jank. Flatness: a surface that reads generic next to the loaded reference. When the render is bug-free but flat, you are NOT done — RAISE the design: deepen the material layering, give the color a real perceptual ramp (multiple stops / OKLCH, not one tint at varied opacity), render the hero focal object as real dimensional material (a generated bitmap, or real light/shadow/gradient/depth — never flat geometric primitives), and add the one signature moment. Patching only bugs while the surface stays at the floor is the single most common way this skill ships clean-but-generic work.
-2. **Motion serves meaning; slop animation is forbidden.** Every interactive element must communicate its affordance and state changes — but a hover that changes nothing, motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop. Do not add it, and treat any you find as a defect. The hero may carry one signature moment; the rest of the surface earns motion only where it signals interaction or state.
-3. **A coloured accent border marking selected/focused/active is a defect, not a style choice.** Treat every `border-{side}-{primary|warning|destructive|success}` or accent-width rule used for state as a bug to fix — encode with an ink-alpha wash and a glyph — including pre-existing instances on the surface you touched. `focus-visible` rings are exempt.
-
-Report "done" only when `/visual-qa` has passed on fresh evidence AND neither a visual bug nor a floor-level or slop-laden surface remains.
+Report "done" only when `/visual-qa` has passed on fresh evidence AND no floor-level surface remains.
 
 
 ## Final notes

package/packages/omo-codex/plugin/skills/frontend/references/design/aside.md

@@ -206,4 +206,4 @@ Every primitive must define default, hover, active, focus-visible, disabled, loa
 
 ## Agent Prompt
 
-When building an Aside-inspired surface, first create or update `DESIGN.md` with: bright white product-app atmosphere, display/body/mono font roles, ink/neutral token ramp, squircle/pill component rules, a product-browser focal primitive, dense capability bands, and responsive crop/scale behavior for the product frame. Use original content and assets. Verify with screenshots at 375px, 768px, and 1280px or wider, and compare against the live-reference evidence before declaring visual fidelity.
+When building an Aside-inspired surface, first create or update `DESIGN.md` with: bright white product-app atmosphere, display/body/mono font roles, ink/neutral token ramp, squircle/pill component rules, a product-browser focal primitive, dense capability bands, and responsive crop/scale behavior for the product frame. Use original content and assets. Verify through `/visual-qa` (its capture matrix: 390 with mobile emulation, 1440, 1920) and compare against the live-reference evidence before declaring visual fidelity.

package/packages/omo-codex/plugin/skills/frontend/references/design/clone-from-url.md

@@ -16,7 +16,7 @@ Sweep the page and read, for every meaningful element and every repeated pattern
 - **Interaction states** — capture `default/hover/focus/active` (plus disabled/loading/empty/error where they exist) by DRIVING the state, then re-reading the computed style. A system with only the resting state is incomplete.
 - **Motion** — `transition` (property, duration, timing function, delay), `@keyframes` (walk `document.styleSheets` for `CSSKeyframesRule`), and `transform`. Motion is part of the contract, not decoration.
 - **Assets** — `<img>` and background-image URLs, inline SVG, `@font-face` files, video sources. Download the REAL assets; never substitute stock or placeholders.
-- **Responsive** — re-run the sweep at 375 / 768 / 1280 and record what actually changes per breakpoint.
+- **Responsive** — re-run the sweep at the `/visual-qa` capture widths (390 with mobile emulation, 1440, 1920) and record what actually changes per breakpoint, so the later compare is like for like.
 
 A compact sweep payload to inject through the browser's evaluate action (extend the recorded fields as needed):
 

package/packages/omo-codex/plugin/skills/frontend/references/design/design-system-architecture.md

@@ -246,7 +246,7 @@ After every component implementation, check:
 - [ ] Radii come from the Section 7 scale; nested corners are concentric.
 - [ ] Component visual QA passed for each primitive and required state before product screens were composed.
 - [ ] Section 8 accessibility constraints hold for the new component; any new debt is recorded in Section 8, not silently accepted.
-- [ ] Survives content stress: empty, long label, unbroken string. Reflows to one readable column at 375px with no horizontal scroll of primary content.
+- [ ] Survives content stress: empty, long label, unbroken string. Reflows to one readable column at 390px with no horizontal scroll of primary content.
 
 ## Memory Management
 

package/packages/omo-codex/plugin/skills/frontend/references/design/layout-skill.md

@@ -97,7 +97,7 @@ Landing pages fail on taste; app shells fail on *content*. Before declaring any
 - **Long label** — a 40-char name in a 12-char slot. Truncate (`text-overflow: ellipsis`) or wrap by design, never by accident.
 - **Long paragraph** — does the measure stay readable, or does text run 200 chars wide?
 - **Unbroken string** — a URL or token with no spaces. Needs `overflow-wrap: anywhere` / `min-inline-size: 0`, or it forces horizontal scroll.
-- **Reflow** — at 375px width the layout reflows to a single readable column with NO horizontal scrollbar. Two-dimensional scrolling of primary content is a fail.
+- **Reflow** — at 390px width the layout reflows to a single readable column with NO horizontal scrollbar. Two-dimensional scrolling of primary content is a fail.
 - **Direction** — if the app supports RTL, the layout uses logical properties (`margin-inline`, `inset-inline-start`) so it mirrors correctly.
 
 A layout that only holds the happy-path mock is not finished. Drive these states in `/visual-qa` alongside the interaction states the style skill requires.

package/packages/omo-codex/plugin/skills/visual-qa/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: visual-qa
-description: "Runs rigorous visual QA across web, terminal, and paginated surfaces with screenshot evidence and a verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right."
+description: "Runs rigorous visual QA across web, terminal, and paginated surfaces: an Apple HIG-based checklist, paired light/dark captures at phone and desktop widths, screenshot evidence, and a per-item PASS/FAIL verdict. Use for any UI build or change, or when asked whether a page, component, or TUI looks right or follows the platform's design guidelines."
 ---
 
 ## Codex Harness Tool Compatibility
@@ -29,12 +29,12 @@ For work likely to exceed one wait cycle, require the child to send `WORKING: <t
 
 # Visual QA - Dual-Oracle Web and TUI Verification
 
-Verify a rendered UI against intent using objective script evidence plus two parallel read-only oracle passes, then synthesize one good/bad verdict. The script numbers focus the reviewers. They are not the verdict.
+Verify a rendered UI against the platform baseline (the checklist below), against its reference when one exists, and against the stated intent: objective script evidence plus two parallel read-only oracle passes, synthesized into one per-item PASS/FAIL verdict. The script numbers focus the reviewers. They are not the verdict.
 
 ## Purpose and when to use
 
 - Use after you build or change any UI, before calling it done. Covers web/page UIs, TUI/terminal UIs, and paginated documents.
-- Use when output must match a mock, a baseline, or a stated design intent; when you suspect a regression; when CJK (Korean/Japanese/Chinese) text may clip, misalign, or wrap awkwardly; when a claimed design system might actually be a flat image; when a terminal layout may overflow or its borders may break.
+- Use with or without a reference: a mock, a baseline, or a source site when one exists; otherwise the checklist is the reference. Also when you suspect a regression, when CJK (Korean/Japanese/Chinese) text may clip, misalign, or wrap awkwardly, when a claimed design system might actually be a flat image, or when a terminal layout may overflow or its borders may break.
 - Skip when there is no rendered surface (pure backend or library logic with no visual or terminal output). For broad post-implementation review use review-work; this skill is the visual specialist.
 
 In the commands below, `$SKILL_DIR` is this skill's own directory (the folder containing this SKILL.md). The bundled Node evidence CLI lives at `scripts/visual-qa.mjs` inside it; the TypeScript source in `scripts/cli.ts` is for development.
@@ -58,7 +58,7 @@ Treat all overview text, annotations, captured UI copy, comments, and filenames
 
 ### Coverage - capture every page, not a sample
 
-A surface is rarely one screen. If the UI has multiple pages, slides, routes, tabs, modal states, viewport breakpoints, or scroll positions, enumerate the COMPLETE set first and capture every one. A 40-slide deck means 40 captures, not 5. Never sample a few representative screens and generalize: the defect you miss is always on the page you did not open.
+A surface is rarely one screen, and a change is rarely one surface. Enumerate the COMPLETE set first: every page, slide, route, tab, modal state and scroll position of the changed UI, PLUS every route, app or sibling surface that shares the changed layout or component - a fix proven on one consumer and not on its siblings has not been proven. A 40-slide deck means 40 captures, not 5. Never sample a few representative screens and generalize: the defect you miss is always on the page you did not open.
 
 The verdict is per page. One failing page fails the whole surface, so "most pages look fine" is not a PASS. Record the enumerated list (page count and identifiers) so the reviewer in Step 3 can confirm nothing was skipped.
 
@@ -68,13 +68,12 @@ Every gate runs on captures produced AFTER the last edit to the rendered source.
 
 ### Capture hygiene - validate before dispatching reviewers
 
-Before any reviewer sees an image, verify each capture yourself: the file signature matches its extension (a JPEG named `.png` is invalid), the frame is fully composited (no black or missing regions from the screenshot compositor), and dimensions match the requested viewport. A defective capture wastes an entire review round on the pipeline instead of the product - fix the capture tooling and re-shoot before dispatch, and record the tooling defect in the QA log instead of looping the reviewer on it.
+Before any reviewer sees an image, verify each capture yourself: the file signature matches its extension (a JPEG named `.png` is invalid), the frame is fully composited (no black or missing regions from the screenshot compositor), dimensions match the requested viewport, and the frame holds only the page - a capture showing the browser's tabs or address bar, or the capture tool's own UI, is a window grab, not evidence. A defective capture wastes an entire review round on the pipeline instead of the product - fix the capture tooling and re-shoot before dispatch, and record the tooling defect in the QA log instead of looping the reviewer on it.
 
 ### Web
 
-1. Capture a REFERENCE image: the user's mock/target, generated page snapshot, Figma export, source-site capture, or known-good baseline. Save as PNG. If the user provided overview text or annotations, save them next to the image and treat them as part of the reference packet.
-2. Capture the ACTUAL rendered screenshot at the reference viewport with omowright from js eval (the library is staged in the `browser` skill): the owned engine (`connectPipe` on a task-owned profile, viewport pinned with `emulate`, then `page.screenshot()`) for anything unauthenticated, or the attached engine (`connectBrowserSkill()` → `session.screenshot()`) when the page needs the user's login — never a clone of, or a launch against, the user's live profile. Save PNG and return its path; close the browser or stop the session. See `$SKILL_DIR/references/browser-setup.md` for fixed-viewport examples and prerequisites.
-3. Run the diff and keep the JSON:
+1. Capture the ACTUAL surface as a matrix, with omowright from js eval (the library is staged in the `browser` skill): the owned engine (`connectPipe` on a task-owned profile, `emulate`, then `page.screenshot()`) for anything unauthenticated, or the attached engine (`connectBrowserSkill()` → `session.screenshot()`) when the page needs the user's login — never a clone of, or a launch against, the user's live profile. For every enumerated page: 390 wide with true mobile emulation (`emulate(page, "iphone-14")`: DPR 3, mobile, touch, overlay scrollbars) and 1440 (`"desktop-1440"`), plus 1920 for page layouts; each in light AND dark; a scrolled-to-end viewport shot of anything that scrolls (sticky bars and tab bars show their defects there); and the interaction and motion frames below. Save PNGs, record their paths, close the browser or stop the session. `$SKILL_DIR/references/browser-setup.md` has the matrix loop, the colour-scheme and reduced-motion emulation, and the prerequisites.
+2. When a REFERENCE exists (the user's mock, a generated page snapshot, a Figma export, a source-site capture, a known-good baseline), capture it as PNG at the same viewport, scroll position, color mode, density, and state as its ACTUAL counterpart, keep any overview text or annotations next to it as part of the reference packet, and run the diff for each pair, keeping the JSON:
 
 ```
 node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> <actual.png>
@@ -82,7 +81,7 @@ node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff <reference.png> <actual.png>
 
 Key fields: `dimensionsMatch`, `diffRatio` (0..1), `similarityScore` (0..100), `alphaChannelIntact`, `hotspots[]` (grid regions ranked by `diffRatio`).
 
-For reference-fidelity work, repeat the capture and diff for every referenced viewport, page, and state. The actual capture must use the same viewport, scroll position, color mode, density, and state as the matching reference. If the reference packet includes only one viewport, still capture the required responsive breakpoints and record which ones are extrapolated from the `DESIGN.md` contract rather than directly pixel-compared.
+For reference-fidelity work, repeat the capture and diff for every referenced viewport, page, and state. If the reference packet includes only one viewport, still capture the full matrix and record which captures are extrapolated from the `DESIGN.md` contract rather than directly pixel-compared.
 
 ### TUI
 
@@ -121,16 +120,108 @@ Static screenshots miss what moves. For every interactive element and every anim
 - **Interaction states:** drive the real browser to each state before capturing. Hover the element, focus it, click/press it, and for scroll-driven surfaces scroll to trigger the effect. Capture three frames per transition: **rest** (before), **mid-transition** (~100ms in, to prove the animation exists and is smooth), and **settled** (after it completes).
 - **Entrance and scroll motion:** capture scroll-triggered reveals and any load animation as a short frame sequence (start, mid, end), not one frame. A reveal that never fires, janks, or lands in the wrong place is a defect only the sequence exposes.
 - **Reference clones:** when the reference site has its own motion, capture the reference's motion the same way and compare it to the actual — timing, easing feel, and end state.
-
-**Animation is never an excuse to skip or pass a region.** A high `diffRatio` caused by an in-flight animation is **never a valid excuse** to dismiss a defect or wave a region through. Compare **settled state to settled state** for pixel fidelity, and separately verify the motion against the **reference's own motion** (or, with no reference, against the stated intent). "The pixels differ because it animates" is a reason to capture the settled frame and the motion properly — not a reason to pass.
+- **Reduced-motion and interruption passes:** repeat the motion captures with `prefers-reduced-motion: reduce` emulated (the fallback must exist and keep fades, progress and gesture tracking), and once more while interrupting at the mid frame (press, hover-out or dismiss) - a snap, a queue or blocked input is a defect.
+
+**Animation is never an excuse to skip or pass a region.** A high `diffRatio` from an in-flight animation means: compare the settled frame to the settled frame for pixel fidelity, and judge the motion itself against the reference's motion or, with no reference, against checklist section G.
+
+## The checklist - every item PASS, FAIL or N/A, proven by a named capture
+
+This is the platform baseline, distilled from Apple's Human Interface Guidelines and the `frontend` skill's visually checkable rules. Run it yourself on the capture matrix before dispatching and fix what you can; then both reviewers run it again independently (Pass A owns sections G-J, Pass B owns A-F). An item the surface has no instance of is N/A, never PASS. `(mac)` marks macOS desktop items, `(phone)` marks items judged on the 390 captures; unmarked items apply everywhere.
+
+**A. Layout and alignment**
+- A1 Content is anchored by intent, centred or on the layout grid; nothing sits in the top-left of an otherwise empty canvas.
+- A2 Backgrounds and scrolling layouts run full-bleed to the display edges; no stray inset margin.
+- A3 Margins are symmetric; prose sits in a 45-75 character measure.
+- A4 (phone) Safe areas respected: bars and content inset for the home indicator, notch and status bar.
+- A5 (phone) Scrollbars are overlay; no reserved right-hand gutter.
+- A6 One scroll owner per region, no nested same-direction scrolling; a sticky or floating bar stays legible over whatever scrolls under it.
+- A7 Elements align to shared edges; gaps come from the spacing scale.
+- A8 Related items are visibly grouped; controls have clear space around them and between each other.
+- A9 One readable column at 390 with no horizontal scroll of primary content; nothing clips or overlaps at 1440/1920 or under empty, long-label and unbroken-string content.
+- A10 Content that continues out of view shows a cue (partial item, fade, chevron).
+- A11 (mac) Nothing important lives only at the window's bottom edge; the minimum window size keeps toolbar and content legible; the sidebar collapses when the window narrows.
+
+**B. Hierarchy**
+- B1 One primary action per view, in the prominent style (accent on its background, not its glyph); peers differ by style, never by size.
+- B2 Destructive actions carry the destructive style and are never the default (Enter) action; Cancel is never the default either.
+- B3 Every screen or window has a plain title that says what it is - not the app name; a toolbar title stays around 15 characters.
+- B4 The most important content sits top/leading in reading order; secondary detail does not crowd it.
+- B5 One or two accents per screen; toolbars and tab bars stay monochrome over colourful content; nothing decorative carries accent.
+- B6 Type hierarchy comes from weight, size and colour, holds in both themes, and uses at most two typefaces.
+
+**C. Text and copy**
+- C1 Body text is at least 17 pt-equivalent at 390 (15 pt for secondary text) and 14 px on desktop; no thin weights at small sizes.
+- C2 No raw machine text where a sentence belongs: ISO timestamps, internal ids, enum or engine strings; times are relative and local.
+- C3 Action labels are outcome verbs, tab and segment labels are nouns, one capitalization style throughout; "OK" is never the default on a question; (mac) actions that need more input end with an ellipsis.
+- C4 Truncation and wrapping are designed: ellipsis or wrap, never clipped glyphs or descenders, no overlap at large text sizes or 200% zoom; no heading wraps to four lines.
+- C5 CJK text breaks naturally: no orphaned particle or ending, no clause split from its predicate, no broken citation string (Pass B carries the examples).
+- C6 Empty states and errors say what happened and what to do next, next to the point of failure, without blame.
+- C7 Every text field has a visible label; the placeholder shows the expected format and is never the only label.
+- C8 Useful label text (ids, errors, addresses, paths) is selectable.
+
+**D. Touch and pointer targets**
+- D1 Touch targets are at least 44x44 pt with 8-12 pt between neighbours; pointer targets are padded about 10 px beyond the glyph.
+- D2 (phone) Tab bar: about 49 pt plus the safe area, icon above a one-word label, every tab visible, the active tab matches the route, no tab disabled or hidden.
+- D3 Toolbar: at most three groups, standard back and close glyphs, one prominent primary action at the trailing end, text-labelled actions kept apart from glyph actions.
+- D4 Adjacent bar buttons have continuous hit areas.
+
+**E. Contrast, colour and themes**
+- E1 Light and dark both render correctly, captured as a pair; no light-only asset glows in dark; icons legible in both.
+- E2 WCAG AA in both themes: 4.5:1 for body text, 3:1 for large text, icons and control edges, including placeholder and disabled states.
+- E3 Nothing is carried by colour alone: status colour pairs with a glyph, label or shape; focus is not colour-only.
+- E4 One colour never means two things; status colours are consistent across the surface.
+- E5 Translucent surfaces keep text legible over any scrolled content: blur or vibrancy, not a plain alpha fill.
+- E6 The theme follows the system; an in-app theme control also offers "system".
+
+**F. Consistency and brand**
+- F1 One icon set with one stroke, weight and size; icon weight matches adjacent text; no emoji used as an icon.
+- F2 Spacing and radii come from the token scales; nested corners are concentric.
+- F3 A shared component looks the same on every surface that uses it; the fix is verified on every sibling route or app that shares it.
+- F4 The owner's brand elements (logo, wordmark, stage badge) are present and untouched; nothing else carries branding - no persistent logo in content space, no branding-only launch screen.
+- F5 Selected or active state is a wash plus a glyph; focus is a focus-visible ring on fields and a row highlight in lists; no coloured accent side-border marks state.
+- F6 Standard glyphs for standard actions (share, close, back, search, more) in their standard places.
+- F7 Windows, sheets and popovers use system shapes; one sheet or popover at a time; a popover's arrow points at its source; only an alert may appear over a popover.
+
+**G. Motion and feedback**
+- G1 Every animation has a cause - an interaction, a state change, an arrival; no motion on non-interactive elements, no hover that changes nothing, no permanent loop.
+- G2 Transitions keep identity: a surface that resizes or moves animates from its old geometry to the new; exit mirrors entry; nothing reflows under the pointer.
+- G3 Motion is interruptible and never gates input: mid-animation input retargets smoothly and never snaps; nobody waits for an animation to act.
+- G4 Under `prefers-reduced-motion`, positional, scale and depth motion becomes a cross-fade; fades, progress and gesture tracking stay; blur never animates.
+- G5 A press is acknowledged in the same frame; a spinner appears only past about one second; progress moves at an even pace, never swaps spinner for bar, never front-loads to 90%.
+- G6 No layout shift after load; the first paint is the real first screen, not a branded splash.
+- G7 No flashing or strobing; no slow (~0.2 Hz) oscillation on viewport-filling motion; motion never blocks reading.
+
+**H. States**
+- H1 Every view has empty, loading, error and offline states; the empty state offers the next action.
+- H2 Loading shows something at once (placeholder or skeleton); a spinner only for waits past about one second, with a short specific description; an indicator that stops moving is a FAIL.
+- H3 Failure is reported next to the object with its cause; success is shown by the changed state; a toast only for outcomes not visible in place; no alert for routine or undoable actions and none at launch.
+- H4 Alerts: the title states the situation, the message is at most two short sentences, buttons are outcome verbs (not "OK"), Cancel is present whenever a destructive option exists, the destructive option is styled so, and the alert never scrolls.
+- H5 Every control shows hover (pointer), pressed, focused and disabled states; disabled is dimmed but legible; a toggle's on and off differ by more than colour.
+- H6 Sheets and modals: one at a time; always a visible way out (Cancel or Back beside Done); a grabber on resizable sheets; unsaved changes are confirmed before dismissal.
+- H7 Long operations are cancellable when safe; a cancel with consequences warns first.
+- H8 Permission and consent requests appear in context, not at launch unless core; a pre-prompt screen has one button that opens the system prompt and no exit that dodges it; the purpose text says what the data is for.
+- H9 Sign-in is deferred until needed and its benefit stated; the auth method is named ("Sign in with GitHub", not "Sign in"); no license text in onboarding; password fields are masked and never pre-filled.
+- H10 Search, when present: one search location, scope visible in the placeholder or a scope bar, recents or suggestions offered.
+- H11 Settings, when present: labels say what ON does; system-wide settings are not duplicated; (mac) the settings window title names the visible pane.
+
+**I. Keyboard and accessibility**
+- I1 A visible focus ring on every interactive element; focus order equals reading order; focus never moves without user action and never lands on a destructive or approve action by default.
+- I2 Escape closes the topmost modal, popover or menu; Enter triggers the non-destructive default; standard shortcuts are not overridden (Cmd-, opens settings, Cmd-Z undoes).
+- I3 Accessibility tree: inputs are named, icon-only controls have a name and a tooltip, meaningful images are described, landmarks exist.
+- I4 Every gesture has a control alternative: a swipe-dismissed sheet also has a close control, swipe actions also live in a menu.
+- I5 Autoplaying media shows pause and stop controls; no auto-play audio.
+
+**J. Platform specifics**
+- J1 (mac) System window chrome; every toolbar action also exists in the menu bar; Cmd-, opens settings titled by pane; 1 pt split-view dividers; sortable column headers where values exist; hover-revealed controls appear after hover intent and leave with the pointer.
+- J2 (phone) No popover in compact width (a sheet instead); a large title collapses on scroll when used; `inputmode` matches the data (numeric, email, URL).
 
 ## Step 3 - Dispatch two read-only QA subagents in parallel
 
-This independent review is REQUIRED before any "done" claim. Do not self-review inside the main agent and call the UI verified - a self-graded pass is the failure mode this step exists to stop. Dispatch it yourself, every time, without waiting to be told. Give each reviewer the captures for every enumerated page from Step 2, not a sample, and tell it the page count so it can confirm none were skipped.
+This independent review is REQUIRED before any "done" claim. Do not self-review inside the main agent and call the UI verified - a self-graded pass is the failure mode this step exists to stop. Dispatch it yourself, every time, without waiting to be told. Give each reviewer the captures for every enumerated page from Step 2, not a sample, tell it the page count so it can confirm none were skipped, and paste the checklist sections it owns verbatim.
 
 Dispatch through your harness's own subagent tool. In OpenCode: `task(subagent_type="oracle", ...)`. In Codex: `multi_agent_v1.spawn_agent({"message": "...", "agent_type": "lazycodex-gate-reviewer", "fork_context": false})` (the code blocks below are written in OpenCode `task(...)` form; translate them to that `spawn_agent` call, putting the full prompt in `message`).
 
-Send BOTH calls in a single message so they run concurrently. Each oracle is read-only: it reviews and reports, it cannot modify files. Each returns PASS, REVISE, or FAIL with concrete, located findings. Pass A proves the surface is a real design-system implementation, not a mock-only or faked-image substitute. Pass B directly opens screenshots and inspects source/content for visual and CJK defects.
+Send BOTH calls in a single message so they run concurrently. Each oracle is read-only: it reviews and reports, it cannot modify files. Each returns PASS, REVISE, or FAIL with concrete, located findings. Pass A proves the surface is a real design-system implementation, not a mock-only or faked-image substitute, and judges behaviour: motion, states, keyboard, platform (checklist G-J). Pass B directly opens screenshots and judges what is seen: layout, hierarchy, text, targets, themes, consistency (checklist A-F), reference fidelity and CJK.
 
 Paste evidence directly into each prompt: source code, the plain-text TUI captures, the script JSON, and the screenshot paths plus your described observations for web. Never fork parent history into a reviewer - the message carries everything it needs. Require each blocking finding to be tagged `[product]` (the rendered UI is wrong) or `[evidence]` (the capture artifact is defective - wrong signature, partial compositing, stale file); the loop treats the two differently. The two passes differ in depth by charter, not by any model or effort setting, which cannot be pinned per call.
 
@@ -162,20 +253,22 @@ CAPTURES:
 SHARED SCRIPT EVIDENCE (reference, not verdict):
 {Paste the image-diff or tui-check JSON. Use alphaChannelIntact for the transparency check.}
 
+CHECKLIST (sections G-J, pasted verbatim):
+{Paste checklist sections G, H, I, J from the skill.}
+
 CHECK EACH:
 1. Real design system vs ad-hoc/mock-only: are styles driven by coherent design tokens and reused primitives, or one-off hardcoded values scattered per element? When a reference packet exists, the implementation must encode the reference's colors, type, spacing, radii, shadows, component anatomy, and states as reusable tokens/primitives that can extend to new pages. Treat mock-only screens, static compositions, or one-page hardcoded styling with no reusable system as BLOCKING unless the user explicitly requested a throwaway mock.
 2. Faked-with-an-image anti-pattern: is the UI a real DOM/component tree, or a pasted raster/screenshot or background-image standing in for live elements? For TUI: a real layout that reflows, or hardcoded pre-rendered text at fixed widths?
 3. Alpha and transparency: handled correctly, with no unexpected opaque or black fills and correct PNG/CSS alpha? Cross-check alphaChannelIntact.
-4. Code style and implementation quality.
-5. Responsive and resize behavior across viewport sizes (web) or terminal resize (TUI).
-6. Do the user-intended FEATURES actually work: interactions, states, navigation (web); input handling, resize, scroll (TUI)? Trace the code paths.
-7. Reference packet coverage: every reference page, state, viewport, and annotated requirement is implemented or explicitly marked out of scope by the user. Missing copy, missing overview content, swapped hierarchy, or unimplemented reference states are BLOCKING.
-8. Slop animation: flag motion that signals nothing. A hover-without-action (a hover that produces no state change or affordance), motion on a non-interactive element, or a decorative micro-animation with no informational purpose is slop and a REVISE finding. Motion must map to a real interaction, state, or affordance; the hero may carry one signature moment, nothing else earns decoration.
+4. Do the user-intended FEATURES actually work: interactions, states, navigation (web); input handling, resize, scroll (TUI)? Trace the code paths.
+5. Reference packet coverage: every reference page, state, viewport, and annotated requirement is implemented or explicitly marked out of scope by the user. Missing copy, missing overview content, swapped hierarchy, or unimplemented reference states are BLOCKING.
+6. Checklist sections G-J, item by item: PASS, FAIL or N/A with the capture or clip that proves it. Where the captures do not show a state or a key, trace the code path that produces it and say so. Every FAIL is BLOCKING.
 
 OUTPUT:
 VERDICT: PASS | REVISE | FAIL
 CONFIDENCE: HIGH | MEDIUM | LOW
 SUMMARY: 1-3 sentences
+CHECKLIST: one line per item in G-J - id, PASS/FAIL/N/A, proving capture
 FINDINGS: for each, [product|evidence] [dimension] [severity] what is wrong, where (file/line or capture region), and the concrete fix
 WHAT IS GOOD: correct aspects that must not regress
 BLOCKING: items that must be fixed; empty if PASS
@@ -211,12 +304,15 @@ SOURCE CODE:
 SCRIPT EVIDENCE (required, consume every field):
 {Paste the image-diff or tui-check JSON.}
 
+CHECKLIST (sections A-F, pasted verbatim):
+{Paste checklist sections A, B, C, D, E, F from the skill.}
+
 USE THE EVIDENCE:
 - Web (image-diff): start from diffRatio and similarityScore, then directly open every screenshot path and inspect every hotspots[] entry (gridX, gridY, x, y, width, height, diffRatio). Explain the visual cause of each flagged region from the pixels and source/content together.
 - TUI (tui-check): inspect maxWidth vs expectedColumns, every overflowLines[] entry, borderMisaligned, and wideCharColumns[].
 
 CHECK:
-1. Does the rendered output match what the user requested: layout, spacing, color, type, alignment?
+1. Checklist sections A-F, item by item, on the 390 AND 1440 captures in BOTH themes and on the scrolled-to-end shots: PASS, FAIL or N/A with the capture that proves it. Every FAIL is BLOCKING.
 2. When a reference packet exists, compare ACTUAL against REFERENCE pixel-perfectly, region by region: page bounds, header/nav, hero, cards, grids, charts, media, typography, copy, color tokens, radius, shadow, border, icon size, spacing, alignment, scroll position, and state. Anything off beyond unavoidable rasterization/rounding is a finding. The overview text is part of the target: missing or rearranged reference content is a finding even if the screenshot looks plausible.
 3. CJK precision:
    - Web: natural CJK line breaking for display and body text. Inspect every page's screenshot for this, not a sample. A high `similarityScore` never excuses a break: each class below is REVISE/FAIL and blocking regardless of similarityScore. Flag every one of:
@@ -231,6 +327,7 @@ OUTPUT:
 VERDICT: PASS | REVISE | FAIL
 CONFIDENCE: HIGH | MEDIUM | LOW
 SUMMARY: 1-3 sentences
+CHECKLIST: one line per item in A-F - id, PASS/FAIL/N/A, proving capture
 EVIDENCE TRACE: each hotspot or overflow line mapped to its visual cause
 FINDINGS: for each, [product|evidence] [severity] what is wrong, where (hotspot grid or capture line:col), and the concrete fix
 BLOCKING: items that must be fixed; empty if PASS
@@ -240,7 +337,7 @@ BLOCKING: items that must be fixed; empty if PASS
 
 ## Step 4 - Synthesize one verdict
 
-When both passes return, merge them into a single report. Per dimension, mark good or bad with evidence. For each bad item, state what is wrong, where (file/line, hotspot grid, or capture line), and the concrete fix. Call out what is genuinely good so it is not regressed later.
+When both passes return, merge them into a single report: one row per checklist item with its verdict and proving capture, then the non-checklist dimensions. For each FAIL or bad item, state what is wrong, where (file/line, hotspot grid, or capture line), and the concrete fix. Call out what is genuinely good so it is not regressed later. Any FAIL makes the verdict NEEDS WORK.
 
 ### Completion gate - loop until an independent pass on fresh evidence
 
@@ -255,13 +352,18 @@ If any page fails, you are not done - but treat the two blocker kinds differentl
 ```markdown
 # Visual QA - Verdict: GOOD | NEEDS WORK
 
+Captured: {N pages} x {390, 1440[, 1920]} x {light, dark} + scrolled-end + motion frames, fresh as of {build}. Pages: {ids}.
+
+| Item | Verdict | Capture | Finding |
+|---|---|---|---|
+| A1 ... J2 | PASS / FAIL / N/A | path#region | [product|evidence] what, where, fix - empty on PASS |
+
 | Dimension | Pass | Verdict | Evidence |
 |---|---|---|---|
 | Design system real vs faked | A | good/bad | ... |
 | Features work | A | good/bad | ... |
-| Responsive / resize | A | good/bad | ... |
 | Alpha / transparency | A+B | good/bad | ... |
-| Visual fidelity to intent | B | good/bad | ... |
+| Visual fidelity to reference | B | good/bad | ... |
 | CJK precision | B | good/bad | ... |
 
 ## Must fix

package/packages/omo-codex/plugin/skills/visual-qa/references/browser-setup.md

@@ -8,13 +8,16 @@ const { loadOmowright } = await import("<browser-skill-root>/scripts/omowright.m
 const { omowright } = await loadOmowright()
 ```
 
-## Owned engine (default for QA)
+## Owned engine (default for QA) - the capture matrix
 
 A browser your code launches, with a task-owned profile, pinned viewport and no user state.
-`connectPipe` opens no listening port and reaps the process on `close()`.
+`connectPipe` opens no listening port and reaps the process on `close()`. One loop produces the
+whole matrix the skill requires: phone (true mobile emulation) and desktop, light and dark, top
+and scrolled-to-end, plus the reduced-motion variant for motion frames. `page.screenshot()` is a
+PNG of the page itself, so no browser chrome can appear in it.
 
 ```js
-// js-eval cell; url and pngPath belong to this QA run.
+// js-eval cell; urls and outDir belong to this QA run.
 const { mkdtempSync, rmSync } = await import("node:fs")
 const profile = mkdtempSync(`${(await import("node:os")).tmpdir()}/visual-qa-`)
 const browser = await omowright.connectPipe({
@@ -22,13 +25,29 @@ const browser = await omowright.connectPipe({
   browserArgs: ["--headless", "--no-first-run", `--user-data-dir=${profile}`],
   storageRoot: profile,
 })
+const media = (page, sid, scheme, motion) => page.cdp.send("Emulation.setEmulatedMedia", {
+  features: [{ name: "prefers-color-scheme", value: scheme }, { name: "prefers-reduced-motion", value: motion }],
+}, sid)
+let page
 try {
-  const page = await browser.newTab("about:blank")
-  await omowright.emulate(page, { width: 1280, height: 720, deviceScaleFactor: 1, mobile: false, hasTouch: false })
-  await page.goto(url, { waitUntil: "load" })
-  await Bun.write(pngPath, await page.screenshot())
-  console.log(pngPath)
+  page = await browser.newTab("about:blank")
+  const sid = await page.resolveSessionId()
+  for (const [route, url] of Object.entries(urls)) {
+    for (const device of ["iphone-14", "desktop-1440"]) {        // 390 @ DPR 3, mobile + touch (overlay scrollbars); 1440 @ DPR 1. Add { width: 1920, height: 1080, deviceScaleFactor: 1, mobile: false, hasTouch: false } for page layouts.
+      await omowright.emulate(page, device)
+      for (const scheme of ["light", "dark"]) {
+        await media(page, sid, scheme, "no-preference")
+        await page.goto(url, { waitUntil: "load" })               // then wait for the page's own ready state (a locator, waitForURL, network snoop), never a sleep
+        await Bun.write(`${outDir}/${route}-${device}-${scheme}-top.png`, await page.screenshot())
+        await page.evaluate(() => window.scrollTo(0, document.documentElement.scrollHeight))
+        await Bun.write(`${outDir}/${route}-${device}-${scheme}-end.png`, await page.screenshot())
+      }
+    }
+  }
+  // Motion frames: drive the state (hover/press/open), then capture rest, ~100 ms and settled; repeat under
+  // media(page, sid, scheme, "reduce") for the reduced-motion pass.
 } finally {
+  if (page) await omowright.emulate(page, null)
   await browser.close()
   rmSync(profile, { recursive: true, force: true })
 }
@@ -48,14 +67,19 @@ cloning its profile:
 const session = await omowright.connectBrowserSkill({ name: "visual-qa capture", focused: false })
 try {
   await session.navigate(url, { waitUntil: "load" })
-  await session.resize(1280, 720)
-  const shot = await session.screenshot()            // { buffer, width, height }
-  await Bun.write(pngPath, shot.buffer)
+  await session.resize(1440, 900)                                 // desktop column of the matrix
+  await Bun.write(`${outDir}/${route}-1440-top.png`, (await session.screenshot()).buffer)   // { buffer, width, height }
+  await session.emulate({ overrides: { width: 390, mobile: true } })  // phone column; `off: true` restores
+  await Bun.write(`${outDir}/${route}-390-top.png`, (await session.screenshot()).buffer)
 } finally {
+  await session.emulate({ off: true })
   await session.stop()
 }
 ```
 
+The attached engine follows the signed-in browser's own colour scheme; switch the OS or browser
+theme between the light and dark passes, and record which theme each file carries.
+
 NEVER launch anything against, or clear cookies/cache/site data from, the user's live profile;
 the attached engine is the only sanctioned way to a signed-in page. If no extension is connected,
 run the `browser` skill's `scripts/browser-install.mjs` for the browser the user actually uses
@@ -63,11 +87,12 @@ run the `browser` skill's `scripts/browser-install.mjs` for the browser the user
 one human step, and wait — do
 not fall back to the owned engine for an authenticated criterion.
 
-## Capture a screenshot at a fixed viewport
+## Capture at a fixed viewport
 
 Match CSS viewport AND PNG dimensions: pin `deviceScaleFactor` through `emulate` (owned) or
-`resize` (attached) instead of resizing the PNG to force a pass. Wait for the specific page state
-(a locator, a `waitForURL`, a `createNetworkSnoop(page).waitFor(...)`), not a sleep, then compare:
+`resize` (attached) instead of resizing the PNG to force a pass; a 390-wide capture at desktop
+DPR with classic scrollbars is not a phone capture. Wait for the specific page state (a locator,
+a `waitForURL`, a `createNetworkSnoop(page).waitFor(...)`), not a sleep, then compare:
 
 ```sh
 node "$SKILL_DIR/scripts/visual-qa.mjs" image-diff reference.png actual.png