skills.rest
Neko-Catpital-Labs
Neko-Catpital-LabsOFFICIAL
Explore all skills by this author →
GitHub

visual-proof

Capture before/after UI screenshots and video diffs for Invoker plans that modify the UI.

18|5|Updated Apr 17, 2026
Search Tags:#pull request#screenshots#playwright#ui testing#electron#visual regression#before after
One-click install
npx skills add https://github.com/Neko-Catpital-Labs/Invoker --skill visual-proof-neko-catpital-labs
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: visual-proof
Source: https://github.com/Neko-Catpital-Labs/Invoker/tree/main/skills/visual-proof
Command: npx skills add https://github.com/Neko-Catpital-Labs/Invoker --skill visual-proof-neko-catpital-labs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? UI changes in Invoker plans need verifiable visual evidence, but screenshots are often stale, reused from unrelated PRs, or never actually inspected. This Skill enforces a disciplined capture-and-inspect workflow so every visual claim in a PR is backed by media captured against the exact change being proved. ## Core Features & Use Cases - Before/After Capture: Run capture-before on the base branch and capture-after after implementation via scripts/ui-visual-proof.sh, producing Playwright screenshots and video. - Diff and Embed: Generate pixel-diff images, side-by-side video comparisons with ffmpeg, and base64-embedded markdown for PR bodies. - Merge Gate Integration: Plans flagged with visualProof: true automatically run captures in TaskExecutor.runVisualProofCapture() and upload assets to Cloudflare R2. - Use Case: A plan modifies the approval modal in packages/ui/. You add a plan-specific test to visual-proof.spec.ts, capture before/after states, compare them, and attach a ## Visual Proof section with a Manually inspected: line to the PR. ## Quick Start Run the visual-proof capture-before script on the base branch, implement the UI change, then run capture-after and compare to attach verified before/after screenshots to the pull request.

Frequently Asked Questions about visual-proof

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I capture before/after screenshots for a UI change?▼

Run bash scripts/ui-visual-proof.sh capture-before on the base branch, implement the change, then run capture-after. Both commands build the UI and app, run the Playwright visual-proof spec, and save screenshots and video to packages/app/e2e/visual-proof/.

How do I add a new visual proof state to the Playwright spec?▼

Add a test case to packages/app/e2e/visual-proof.spec.ts that sets up state via loadPlan and startPlan, waits for the target UI state, then calls captureScreenshot(page, 'state-name'). The capture subcommands automatically include it.

Can I reuse an old screenshot as visual proof for a new PR?▼

No. Every image or video in a Visual Proof section must come from a capture run against the change being proved in the same PR. Stale assets can predate the fix and mislead reviewers about the current UI state.

What tools are required for the compare subcommand?▼

The compare subcommand requires existing before/ and after/ directories with matching PNG files, plus ffmpeg for side-by-side video comparison. ImageMagick compare is optional for per-image pixel diffs. Output goes to the diff/ directory.

Why does my PR body validation reject the Visual Proof section?▼

scripts/validate-pr-body.mjs rejects a Visual Proof section that contains media but no Manually inspected: line. You must open the captured files yourself, verify what they show, and state precisely what you saw on that line.

What if a UI behavior cannot be shown in a screenshot?▼

Capture whatever partial signal is visible, using delayMs test overrides to hold transient states open. For truly uncapturable behavior, state so plainly in the PR body and point to a concrete non-visual proof such as a DOM assertion or test name.

Related Skills

Explore More Software Engineering Skills→
zxyycomzxyycom

interview-me

Interview users one question at a time to clarify true intent before planning.

Community
Advanced
Norfolk-GroupNorfolk-Group

ce-demo-reel

Capture visual demo evidence as GIFs or screenshots for pull request descriptions.

Official
Advanced
lushly-devlushly-dev
4

test-components

Run Playwright E2E tests with visual regression and axe-core accessibility checks.

Official
Intermediate
basedgod55hjlbasedgod55hjl

update-screenshots

Downloads screenshot artifacts from CI runs and explains the external baseline service workflow.

Community
Basic