/ui-visual-diff

Make it your own.

In Claude Code, use the slash command and add your context. In Codex, select ui-visual-diff from the just-vibe skill picker, then send the same brief.

Version 0.11.0 also supports /jv ui-visual-diff, /just-vibe ui-visual-diff and /jv:ui-visual-diff in Claude. See shortcut setup and context examples.

What the agent does

1. Match viewport, DPR, fonts, content, theme and animation state across the captures.
2. Mask only justified nondeterminism, identify the meaningful changed regions and describe differences by user impact.
3. Inspect changed regions before accepting any baseline.

Inputs

• reference/current renders with matching viewport, state, data, fonts, and theme.

Optional context: scope, references, constraints, successCriteria, environment, mode, budget.

Scope

Reads

Visual differences and regression classification; match applies visual fixes.

Writes

No source changes in inspect/plan. Save only requested planning artifacts. A separately requested repair uses the relevant implementation workflow.

Mode

Inspect existing captures; reference/current renders with matching viewport, state, data, fonts, and theme.

Prerequisites

Target screens/flows, existing design conventions, and runnable UI or supplied references. Visual claims require actual renders; accessibility claims distinguish automated, keyboard, and assistive-technology evidence.

Expected output

• Annotated difference report with capture conditions, changed regions, accepted differences with reasons, remaining mismatches and confidence.

How the work is checked

• A layout shift is detected; a timestamp-only change is not misclassified as a design regression.

When to stop or clarify

• Capturing a local build is bounded local execution; capturing a shared or remote target needs that target in scope. Unmatched conditions invalidate precise pixel-difference claims.

Handling missing context

Infer

Inspect the target flow, existing components/tokens, actual renders or supplied references and current responsive behavior.

Assume

Reuse established visual conventions and preserve keyboard behavior; label unrendered changes as visually unverified.

Ask

Ask about an unresolved interaction or visual direction only when plausible choices materially differ; do not make a missing screenshot block source inspection.

Technical guidance

Evidence

Record baseline approval, viewport, fonts, data, time and screenshot environment.

Method

Compare matched states, separating rendering noise from layout/content changes; inspect differences before replacing a baseline.

Pitfall

Approving a new screenshot merely because it differs converts a regression into the expected result.

Check

Reproduce significant differences with stable fonts/data and retain both images plus a reason for accepted changes.

Situational decisions

When captures differ in environment or content: Recreate comparable captures or give qualitative differences without a precise pixel claim.

The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.

Keep exploring