Borrowing it
Nothing to install: this file belongs to rajbos/ai-engineering-fluency. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/rajbos/ai-engineering-fluency/main/.claude/skills/visual-view-diff/SKILL.mdgit clone --depth 1 https://github.com/rajbos/ai-engineering-fluencyWrote 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.
[](https://agentmods.dev/skills/rajbos/ai-engineering-fluency/visual-view-diff)<a href="https://agentmods.dev/skills/rajbos/ai-engineering-fluency/visual-view-diff"><img src="https://agentmods.dev/badge/skills/rajbos/ai-engineering-fluency/visual-view-diff/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.
<a href="https://agentmods.dev/skills/rajbos/ai-engineering-fluency/visual-view-diff"><img src="https://agentmods.dev/badge/skills/rajbos/ai-engineering-fluency/visual-view-diff.svg" alt="Reviewed on agentmods" width="80" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00079 | $0.03311 |
| Opus 5.5 | $0.00032 | $0.01324 |
| Sonnet 5.5 | $0.00016 | $0.00662 |
| Haiku 4.5 | $0.00008 | $0.00331 |
Grade A, and why
visual-view-diff 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 yesterday.
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.
How it starts
The opening of the file, as written. The whole thing — 276 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Visual View Diff Skill
Renders the extension's webview panels headlessly, screenshots them, and reports which views changed compared to a baseline commit.
The screenshots are the deliverable. Posting them anywhere — a PR comment, a
job summary, an artifact upload — is deliberately not part of this skill. It
answers exactly one question: what changed visually, and what does it look
like? Whoever wants to publish that answer reads report.md and the PNGs.
The publisher for pull requests is the ui-checks job in
.github/workflows/ci.yml: it runs this diff against the PR's merge base and
posts the before/after/diff images as one comment on the PR (replaced on every
push) through gh pr comment --attach, rendered by
.github/workflows/scripts/visual-diff-comment.js. An agent opening a UI PR
does not have to attach screenshots by hand — it has to make sure the change is
visible to this harness (see "States" below) and say in the PR body which
views it expects to change.
When to use it
- A change touches
vscode-extension/src/webview/**, the shared webview CSS, or aget*Htmlmethod inextension.ts. - A refactor is supposed to be visually neutral and you want proof.
- You want before/after images of a UI change for a human to look at.
Why this exists (and why it does not open VS Code)
The repo forbids agents from launching a real editor window — see
"Never Launch a Real Editor/IDE Instance" in AGENTS.md.
That rules out the Extension Development Host, and with it the existing
aiEngineeringFluency.runLocalViewRegression command, which only a human can
run and which checks DOM metrics (node counts, text length) rather than
appearance.
This skill covers the gap: it renders the real webview bundles outside VS
Code. Every panel's HTML shell in extension.ts is the same four ingredients —
a <div id="root">, a window.__INITIAL_<VIEW>__ payload, the shared JSON
config globals, and <script src="dist/webview/<view>.js">. The harness
reproduces that shell around a committed fixture and supplies the --vscode-*
theme tokens VS Code would normally inject, then lets the real bundle render.
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.
- yesterday First seen · 276 lines · 79 tokens per session scan A 85f2edf55da0
visual-view-diff is a skill published in the GitHub repository rajbos/ai-engineering-fluency (119 stars, last pushed yesterday), licensed MIT. It adds 79 tokens to every session and 3,311 once invoked, about $0.0003 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-10-26.
Other skills, from other repositories
image-compare
Compare two image files on disk and report what changed, region by region. Trigger on "what changed between these two images", "diff these PNGs", "did this render drift", "compare screenshots/exports/renders".
Cypress v14 Component Testing
Component testing patterns with Cypress v14 including React, Vue, and Angular component mounting, custom mount commands, interaction testing, visual snapshots, and integration with Vite and Webpack bundlers.
accessibility-a11y
WCAG 2.2 compliance, ARIA patterns, keyboard navigation, screen readers, automated testing.
frontend-manual-testing
Use when the task changes anything a user sees in a web app - booting it, driving flows with the browser tools, the four-width check, console/network/keyboard checks and the visual checklist.
visual-proof
Capture before/after screenshot evidence of a web page at real breakpoints (375, 768, 1440) in both light and dark themes, using Playwright against a local dev server or a deployed URL. Use before starting any visual change to capture the current state, and again after to prove the delta. Also use when asked to "show…
playwright-scanner
Internal helper: behavioral scans via Playwright for keyboard and state.