← ClaudeAtlas

verifylisted

Visually verify UI changes by taking authenticated screenshots of the local dev server. Use after editing any view, template, component, or layout file. If screenshot redirects to a login page, invoke vischeck:setup-auth first.
mickzijdel/vischeck · ★ 0 · Web & Frontend · score 72
Install: claude install-skill mickzijdel/vischeck
# vischeck:verify Use the `screenshot` CLI to visually verify UI changes against a running dev server. Always Read the saved image after taking a screenshot — then **review it like a critical designer, not a rubber stamp.** ## When to use After editing any view, template, component, or layout file: 1. Take a screenshot and Read the image 2. **Judge it against the rubric below — this is the point of the skill, not an afterthought** 3. For interactive elements (forms, buttons, inputs), also test the interaction with playwright-cli ## How to judge the screenshot (do not skip) A bare verdict of "looks good" is a **failure of this skill**. Your default instinct will be to approve — resist it. UIs that are subtly wrong (inputs that don't match the house style, cluttered cards, low-contrast text) look fine at a glance and are exactly what this step exists to catch. Work in this order, and write down what you observe **before** giving any verdict: **1. Zoom in.** A full-page shot is too small to judge detail — borders, contrast, and spacing get lost. Take a focused shot of the component you just changed and Read that too: ```bash screenshot /signup --selector ".signup-form" # just the thing you changed ``` **2. Compare against the house style.** You cannot know what "correct" looks like from one screenshot in isolation. Screenshot an **existing, known-good** page or component of the same kind (another form, another card, another table) and compare side by side: ```bash sc