agentmods.dev

visual-debug

A comparison tool for finding differences between a reference website image and an implementation. It uses image-difference measurements such as pixel changes and structural similarity.

In plain words
What is it for?
Use it to diagnose mismatched regions, selectors, and likely causes after a website has been implemented.
Why use it?
It identifies where a rebuilt interface does not match the reference, instead of relying only on visual inspection.

Skill for Claude CodeCodex

8 2d ago A scan 28 tokens original Apache-2.0
View the source file voidmatcha/ui-clone-skills
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.

agentmods
npx agentmods add skills/voidmatcha/ui-clone-skills/visual-debug
Any agent
npx skills add voidmatcha/ui-clone-skills --skill visual-debug
Clone the repo
git clone --depth 1 https://github.com/voidmatcha/ui-clone-skills

Made for: Claude Code, Codex.

Per session 28 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 10,869 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 1 finding. Scan, not verified.
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 $0.00028 $0.10869
Opus 5 $0.00014 $0.05435
Sonnet 5 $0.00006 $0.02174
Haiku 4.5 $0.00003 $0.01087

Measured 2d ago against content hash 4c5ff4a4135c, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

visual-debug scanned grade A with 1 finding 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 2d ago.

The scan reads SKILL.md. This mod also ships 51 executable files (scripts/ae-compare.sh, scripts/alignment_parity_check.py, scripts/alignment-parity-check.sh, …), listed below but not scanned — reading those needs a real analyzer, not pattern matching.

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.

Makes network callslowCapability

Not a fault in itself. Listed so you know the mod talks to something, and to what.

printf 'Missing system deps:%s\n\nFastest fix:\n tmp=$(mktemp) && curl -LsSf -o "$tmp" https://raw.githubusercontent.com/voidmatcha/ui-clone-skills/main/install.sh && bash "$tmp" && rm -f "$tmp"\n\nOr install manually:\n
skills/visual-debug/SKILL.md · 397 lines

How it starts

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

Visual Debug

Automated post-implementation visual comparison — original vs implementation. Zero vision tokens via AE/SSIM CLI tools.

Primary trigger: Diagnose post-implementation mismatch between a reference and an implementation, then provide concrete repair guidance. Non-goals: Do not use this to build or regenerate the React component, orchestrate a full live URL clone, or perform baseline/reference capture; route build/clone work to ui-reverse-engineering and capture/reference work to ui-capture.

Boundary and handoff

  • Direct invocation: Use when reference/implementation evidence already exists and the user asks for mismatch, diff, diagnosis, comparison, or repair guidance.
  • Routed invocation: ui-reverse-engineering may route here after a failed visual diff, failed post-implementation gate, or completed-state mismatch request.
  • Missing evidence: If baseline/reference capture is missing, return to ui-capture first; if implementation or regeneration is needed, return to ui-reverse-engineering or the active caller pipeline.
  • Return contract: Send the caller concrete findings: failing artifact, mismatched selector/region, likely root cause, recommended fix, and verification command. visual-debug diagnoses and guides; the caller owns implementation, build, regeneration, and full clone orchestration.
  • Evidence-pack first: If brief/WORKER_BRIEF.md or evidence-pack.json exists under the ref dir, read the brief before raw diff/DOM/style artifacts. Use the pack as a compact selector/bbox/style/trigger index and open only the named drill-down paths needed for the failing hotspot.

When to use

  • After implementing a section, before declaring "done"
  • When user says "it's different", "doesn't match"
  • After ui-reverse-engineering reports a failed visual diff or post-implementation gate
  • Instead of Read-ing screenshots for comparison

HARD RULE: Never Read ref/impl images for comparison. For FAIL positions, use auto-diagnose.sh first (zero vision tokens). Only Read diff images as fallback if auto-diagnose finds nothing. Exception: Phase E reads ref+impl pairs, and Phase E must run in a delegated subagent context so its 44K vision tokens stay out of the main context (see Phase E section).

Read the full file on GitHub · 397 lines

Files

What ships with it

60 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.

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. 2d ago First seen · 397 lines · 28 tokens per session scan A 4c5ff4a4135c

Subscribe to this mod's changes

visual-debug is a skill published in the GitHub repository voidmatcha/ui-clone-skills (8 stars, last pushed 2d ago), licensed Apache-2.0. It adds 28 tokens to every session and 10,869 once invoked, about $0.0001 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Browser automationDebuggingFrontendReActclaude-codeclaude-code-pluginclaude-code-skillsreverse-engineeringtailwindcss
Related

Other skills, from other repositories

crud

Build an end-to-end CRUD stack in AdonisJS + Inertia: resource route → thin controller → VineJS validator → Bouncer policy → single-purpose action → transformer variant → Inertia page. Trigger on: "add CRUD for X", "create resource", "list/create/edit/delete X", "resource endpoint".

filipebraida/adonisjs-starter-kit · 66 tokens

notifications

In-app notifications + realtime SSE in an AdonisJS + Inertia app. Stack: @facteurjs/adonisjs for the notification classes and delivery channels + @adonisjs/transmit for the SSE transport. Notifications persist to Postgres and push to a per-user SSE channel. Bell + unread badge in the logged-in shell. Emission goes…

filipebraida/adonisjs-starter-kit · 130 tokens

next-cache-components-adoption

Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…

vercel/next.js · 95 tokens

next-rspack

Maintain @next/rspack-core and @next/rspack-binding packages. Use when editing rspack/package.json, rspack/crates/binding/Cargo.toml, rspack/rust-toolchain.toml, or packages/next-rspack/package.json. Covers upgrading @rspack/core npm version, rspack crate versions, Rust toolchain version, building and linking for…

vercel/next.js · 113 tokens

next-dev-loop

Verify Next.js runtime behavior after editing app code. Use this skill to confirm a change actually works in a running app — not just that it compiles or type-checks. Combines /next/mcp (Next.js's view) with agent-browser (the browser's view). Requires a running next dev.

vercel/next.js · 68 tokens

column-filtering

Filter columns with columnFilteringFeature, filteredRowModel, filterFns, filterMeta, nested-row direction, and manualFiltering. Load for accessor compatibility, controlled filter updaters, fuzzy metadata, or client/server ownership.

TanStack/table · 48 tokens