ui-screenshot-feedback

Define route records with key, path, waitSelector, and optional readySelector, then run a shared capture helper that launches one browser, reuses it across routes, and writes PNGs plus analysis.json. Add data-screenshot-subject attributes and readiness markers so captures wait for async data before firing.

Puppeteer is the default for automated PNG and analysis.json runs. Electron suits persistent operator or control-centre shell behavior. Playwright/MCP works best for exploratory inspection, with repeated steps later promoted into Puppeteer scripts.

Add deterministic readiness markers to the UI that appear after async data loads and client activation completes. Configure the capture route with a readySelector targeting that marker so the screenshot fires only when the page is fully rendered.

Yes, the capture helper supports desktop and mobile viewport passes in a single run using a fixed desktop viewport plus an optional mobile viewport. This is recommended when responsive behavior matters for the review.

Captures usually fail when readiness selectors never appear, the server was not started, or async data has not resolved. Check analysis.json for readiness and browser events, and use --save-dom-snapshots to debug without reopening a browser.

Do not use it when the capture rig itself is broken; lower-level Puppeteer or jsgui3 activation debugging skills handle those failures. It also does not replace unit or functional tests that assert logic rather than visual state.