just-vibeGeneral · apply by default
/match
Compare an implementation against a visual reference and close gaps
Use when a supplied visual reference is the acceptance target and gaps must be closed; ui-visual-diff only reports differences between captured states, and design creates a direction when no exact target exists.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select match from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv match, /just-vibe match and /jv:match in Claude. See shortcut setup and context examples.
/just-vibe:match Match this supplied pricing-page reference at its captured viewport./just-vibe:match Match this desktop reference while retaining a usable narrow layout./just-vibe:match Analyze a reference with unavailable brand assets; distinguish substitutes from exact matches.What the agent does
- Match viewport, content and fonts to the reference before comparing geometry.
- Compare an equivalent render and fix the largest layout discrepancies before decorative details.
- Repeat bounded comparisons after each change and record legitimate responsive differences.
Inputs
- reference image/design, target implementation, viewport, and assets. Requires readable reference and render capability for visual proof.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Match layout, typography, imagery, and states within the given reference; no invented unseen product behavior.
- Writes
- Apply: only the requested local changes and relevant isolated verification. Inspect/plan requests remain inspection/planning. External actions require their exact action and target in session authorization.
- Mode
- Apply; reference image/design, target implementation, viewport, and assets. Requires readable reference and render capability for visual proof.
- Prerequisites
- Resolve the user brief and inspect the relevant project or supplied evidence. External capabilities are optional unless the selected action actually needs them.
Expected output
- Updated UI with the reference conditions, a matched-state comparison by region, remaining differences and responsive checks.
How the work is checked
- Layout aligns at the reference viewport; responsive behavior is retained outside that viewport.
When to stop or clarify
- Missing fonts/assets are identified explicitly. Do not call a match pixel-perfect without a controlled comparison.
Handling missing context
- Infer
- Resolve the named files, existing scripts, current task and earlier corrections from the conversation and repository.
- Assume
- Use the narrowest interpretation that completes a reversible local task; state a consequential assumption once.
- Ask
- Ask when competing targets or incompatible success conditions would change the result; continue independent inspection first.
Technical guidance
- Evidence
- Establish reference identity, viewport, fonts, assets and the intended tolerance.
- Method
- Compare geometry, typography, color and content in matched rendered states; prioritize structural differences before micro-adjustments.
- Pitfall
- A different viewport or unloaded font can masquerade as implementation error; screenshot similarity does not prove behavior.
- Check
- Retain comparable images and verify the adjusted UI still handles interaction and responsive states.
Situational decisions
When the reference omits a required state: Preserve established interaction behavior and label the added state as an interpretation.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.