visual-verification

visual-verification is a skill for Claude Code from HECer/yoke. It costs 92 tokens per session (883 once invoked), scanned A, original, MIT.

A web and user-interface checking workflow that combines code checks with testing of real pages in a running development server.

In plain words
What is it for?
Use it to run type checks, unit tests, design scans, and smoke tests for key routes such as a home page or login form.
Why use it?
Unit tests may miss blank pages, broken routes, browser console errors, or missing page content. This workflow checks those problems and saves screenshots as evidence.

Skill for Claude Code

Written for Claude Code: shipped in a Claude Code plugin.

Part of the yoke plugin — 34 skills, 1 hook shipped together

Good fit Use it to run type checks, unit tests, design scans, and smoke tests for key routes such as a home page or login form.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/hecer/yoke/visual-verification
Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent
npx skills add HECer/yoke --skill visual-verification
Clone the repo
git clone --depth 1 https://github.com/HECer/yoke

Made for: Claude Code.

Or install yoke, the plugin that ships this one along with the rest of its 34 skills, 1 hook.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for visual-verification

README.md
[![agentmods](https://agentmods.dev/badge/skills/hecer/yoke/visual-verification/github.svg)](https://agentmods.dev/skills/hecer/yoke/visual-verification)
Your own site
<a href="https://agentmods.dev/skills/hecer/yoke/visual-verification"><img src="https://agentmods.dev/badge/skills/hecer/yoke/visual-verification/github.svg" alt="Measured on agentmods" height="20"></a>

Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.

agentmods 80×15 button for visual-verification

Your own site · 80×15
<a href="https://agentmods.dev/skills/hecer/yoke/visual-verification"><img src="https://agentmods.dev/badge/skills/hecer/yoke/visual-verification.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 92 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 883 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5.1 $0.00092 $0.00883
Opus 5.5 $0.00037 $0.00353
Sonnet 5.5 $0.00018 $0.00177
Haiku 4.5 $0.00009 $0.00088

Measured 17d ago against content hash 2dd1dc24b000, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

visual-verification scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 17d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

canon/skills/visual-verification/SKILL.md · 78 lines

How it starts

The opening of the file, as written. The whole thing — 78 lines — stays where its author put it; the contents beside it link to each section on GitHub.

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:

smoke:
  baseUrl: http://localhost:3000
  sourceIdentity:
    path: /assets/app-specific-static-source.js
    sha256: "<replace with SHA-256 of the served bytes>"
  flows:
    - name: home
      path: /
      landmark: "main h1"
    - name: login
      path: /login
      landmark: "form"

The example contains a required hash placeholder. Before running production smoke, replace the resource path with a stable, app-specific source resource and the hash with its actual 64-character lowercase SHA-256. The schema allows the field to be absent for existing configuration readers; production flow-smoke requires it.

Start the intended server and confirm its checkout/build and port. Fetch the resource from the effective baseUrl origin, using the exact body bytes returned by the server. Hash those bytes, not a local source file that a dev server may transform. The resource must return a successful HTTP response without redirects, finish within five seconds and contain at most 1 MiB. Keep it stable for the whole smoke run. When --url changes the origin, verify that origin serves the intended build before deriving the pin.

Refresh the expected hash explicitly after an intentional source/build change and after confirming the server serves that change. A mismatch must fail the gate; do not automatically overwrite the expected hash with whatever a port happens to serve. A shared health response or unchanged marker cannot identify changed app code. This static pin proves only that the selected resource matches before and after the run; retain the checkout fingerprint and acceptance evidence for broader source binding.

Read the full file on GitHub · 78 lines

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 17d ago Changed · +23 lines 2dd1dc24b000
  2. 1mo ago First seen · 55 lines · 92 tokens per session scan A 23f05b894856

Subscribe to this mod's changes

visual-verification is a skill published in the GitHub repository HECer/yoke (2 stars, last pushed 8d ago), licensed MIT. It adds 92 tokens to every session and 883 once invoked, about $0.0004 per session on Opus 5.5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

qe2etest

Run quick end-to-end smoke testing for {{COMPANYSLUGUPPER}} changes by tracing changed code paths through the real local stack and verifying behavior live.

3awny/qship · 36 tokens

qmanualt

Perform comprehensive {{COMPANYSLUGUPPER}} acceptance testing with live UI, API, DB, and evidence capture for every acceptance criterion.

3awny/qship · 32 tokens

qshipcheck

Validates that all orchestrator Phase 2 (review), Phase 3 (acceptance), and Phase 4 (deliver) steps were executed after qship pipeline completion. Run this after qship finishes to catch any skipped steps.

3awny/qship · 51 tokens

nestjs-testing

NestJS testing best practices (unit and e2e). Use when writing or reviewing NestJS tests — Test.createTestingModule, mocking providers, controller/service unit tests, or e2e with supertest. Triggers on TestingModule, createTestingModule, overrideProvider, or supertest.

dkmqflx/nestjs-best-practices-plugin · 62 tokens

qa-ui

Explore a live web application and build a complete ui-test.yaml interaction script for accessibility-cli. Follows the same live-explore workflow as accessibility-cli — writes YAML header first, then resolves real selectors page by page and writes each step the moment it is confirmed. Produces interaction steps only…

uppadhyayraj/dq-awesomeqa · 85 tokens

qa-codegen

Generate test code, load test configs, and UI automation scripts using the right tool per domain. For API tests uses apigenerator (DQ MCP server). For performance uses dq-nbomber generate + export. For UI/A11y uses a11y-cli playwright-cli exploration. Never generates from scratch — always uses the appropriate tool…

uppadhyayraj/dq-awesomeqa · 71 tokens