agent-first-screenshots

# Agent-First Screenshots An **agent-first screenshot** is produced by an agent driving the real app via CDP, gated by **structural + pixel + vision verification** before it ships. It turns screenshots from hand-crafted artifacts into a regenerable pipeline. Use this for "take/redo screenshots / make marketing images" tasks. It is NOT e2e evidence — for pass/fail proof use the `fraimz` skill. ## The Zero-Defect Bar **A shippable screenshot has ZERO obvious visual defects** — the bar is not "the content is present", it is: *would a human glancing at it immediately spot something broken?* Overlapping or clipped text, misaligned/collapsed layout, garbled or mid-transition content, blank regions, stray modals/tooltips — any of these disqualifies the frame. Full stop. ## The One Method **Operate the app like a power user preparing a demo, not like a developer hacking the DOM.** The app already looks great: get it into a real, settled state through the UI and capture it cleanly. Never rebuild or fake it. ## Golden Rules 1. **Only remove, never add.** Hiding a leaf distraction (notification badge, "Sign in" footer link, status text) via `display:none` is safe. Never inject fake HTML, override flex/height/width on structural containers, add fixed-position overlays, or mutate the DOM tree — the layout engine will collapse (scroll areas shrink to 0, content disappears). 2. **If a feature isn't available, don't fake it.** Enable it through the settings UI like a r...