vischeck
A Claude Code plugin for visual verification of UI changes. Bundles a screenshot CLI, a smart PostToolUse hook, and two skills.
What's included
| Component | Purpose |
|---|
bin/screenshot | Authenticated screenshot CLI via Playwright — auto-added to PATH |
bin/screenshots | Multi-page batch CLI — captures a list of pages in one go and builds an index.html grid |
hooks/ | PostToolUse hook — reminds Claude to invoke vischeck:verify after view edits |
skills/verify/ | vischeck:verify — screenshot workflow + a strict review rubric (zoom into the component, compare against the house style, report findings by severity), dark/light mode guidance, playwright-cli testing |
skills/setup-auth/ | vischeck:setup-auth — sets up the dev auth bypass route (Rails, Django, Flask, FastAPI) |
Install
/plugin install github:mickzijdel/vischeck
Prerequisite: uv. The bin/ scripts use PEP 723 inline script metadata, so uv installs their Python dependencies (playwright, pyyaml) automatically on first run — no pip install or virtualenv needed. Playwright's browser binary is a one-time download:
uvx playwright install chromium
Usage
The screenshot command is available in any Claude Code session once the plugin is active:
screenshot /dashboard # authenticated screenshot
screenshot /dashboard --dark # dark color scheme
screenshot /dashboard --width 375 --height 812 # mobile viewport
screenshot /dashboard --full-page # full scrollable page
screenshot /dashboard --selector ".user-card" # capture just one element, for close inspection
screenshot /dashboard --port 8080 # non-default port
screenshot /dashboard --no-auth # public page, skip login
screenshot /dashboard --auth-url "/login?token={token}&next={path}" # custom auth URL
Screenshots save to tmp/screenshots/ in the current working directory. Token is read from DEV_AUTH_TOKEN env var (default: claude-screenshot-token).
Multi-page screenshots
screenshots (plural) captures a whole list of pages in one batch — useful for re-screenshotting the same set while iterating, or grabbing several affected pages at once. It invokes the single screenshot tool per page (in parallel), so the same auto-auth, error handling, and dark-mode behaviour applies. All images plus an index.html grid land in tmp/screenshots/batch_<timestamp>/.
screenshots / /dashboard /news # capture exactly these paths
screenshots # use ./screenshots.yml top-level `pages:`
screenshots --group smoke # capture a named group
screenshots -g smoke,admin # union of several groups (repeatable too)
screenshots --all # union of every group
screenshots --list # list the groups defined in the config
screenshots --config pages.yml # explicit config file
screenshots --dark # dark scheme for all pages
screenshots --selector ".card" # capture the same element on every page
screenshots --workers 8 # more parallelism
Selection: positional paths always win. Otherwise --group / --all / --list operate on the config's groups:, and with no selection the config's top-level pages: list is used. The config file is auto-discovered as screenshots.yml, .screenshots.yml, or config/screenshots.yml in the current directory. With nothing to capture it prints the available groups (or the format help) and exits non-zero — it never guesses a page list.
Create a screenshots.yml to keep a consistent set of pages. Each entry is a plain path string, or a mapping with per-entry overrides; top-level keys are global defaults:
# optional global defaults
port: 3000
width: 1280
height: 720
pages: # default set, used when no group is selected
- / # string form
- path: /dashboard # mapping form, per-entry overrides
dark: true # capture this one in dark mode too
- path: /mobile
width: 375 # override viewport for just this page
height: 812
Reusable groups
Define named groups: to re-screenshot a coherent slice without retyping paths — e.g. a smoke set for the public site, an admin set, a users set. A group is either a list of page entries, or a mapping with pages: plus group-level option defaults (e.g. the whole admin group in dark mode or behind a different auth URL):
