visual-verificationlisted
Install: claude install-skill HECer/yoke
# Visual verification
Unit tests don't see a blank page, an unwired route, a runtime console error, or AI-slop design.
Make the loop's gate catch them by widening `verify`, since the loop trusts verify as truth.
## 1. Compose the verify pipeline
Set `verify.command` (in `.yoke/config.yaml`) to chain, fail-fast:
```
<typecheck> && <unit tests> && yoke design-scan . && yoke flow-smoke .
```
e.g. `tsc --noEmit && vitest run && yoke design-scan . && yoke flow-smoke .`. Any red step blocks the story.
## 2. Flow-smoke with the built-in gate
Configure the key user flows once in `.yoke/config.yaml`:
```yaml
smoke:
baseUrl: http://localhost:3000
flows:
- name: home
path: /
landmark: "main h1"
- name: login
path: /login
landmark: "form"
```
With that in place, the `yoke flow-smoke .` step from the section-1 pipeline is live.
`yoke flow-smoke` loads each route against the running dev server, waits for the landmark,
fails on any console error, and **always** saves a screenshot to `.yoke/proof/<story>/`
(the loop labels the folder with the current story id via `YOKE_STORY`; standalone runs use
`latest`, or pass `--label=`). Requires Playwright in the project:
`npm i -D playwright && npx playwright install chromium`. Start the dev server before verify
(e.g. via `start-server-and-test`).
## 3. Video only when necessary
`yoke flow-smoke` records video per flow and keeps it **only on failure**
(`.yoke/proof/<story>/<flow>.webm`). When a flow goes