skills.rest
syntropic137
syntropic137OFFICIAL
Explore all skills by this author →
GitHub

before-after-evidence

Generate diffable before/after evidence bundles with screenshots, flow recordings, and trace links.

Updated May 28, 2026
Search Tags:#bug fix#UI testing#evidence capture#fix validation#trace correlation#screenshot pair#keyframe grid
One-click install
npx skills add https://github.com/syntropic137/harness-app-template --skill before-after-evidence
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: before-after-evidence
Source: https://github.com/syntropic137/harness-app-template/tree/main/.claude/skills/before-after-evidence
Command: npx skills add https://github.com/syntropic137/harness-app-template --skill before-after-evidence

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill eliminates the risk of unverifiable fix claims by generating structured, diffable evidence bundles that let human or LLM reviewers confirm a bug fix resolved the targeted issue without manual guesswork or incomplete proof.

Core Features & Use Cases

  • Screenshot Pair Capture: Produces full-fidelity PNG and LLM-optimized JPEG before/after screenshots for static UI, layout, text, and simple interaction fixes.
  • Flow Recording & Keyframe Grids: Records user flows, extracts 3x3 ffmpeg keyframe montages, and captures console/network events for animation, transition, and loading state bugs.
  • Trace Correlation: Maps failed browser network requests to backend VictoriaTraces entries to link frontend symptoms to backend root causes for 4xx/5xx errors.
  • Use Case: When you fix a bug where a task creation modal fails to load after a user clicks the "New Task" button, use this Skill to capture before/after screenshots and trace correlation to prove the fix resolved both the UI loading issue and the underlying backend 500 error.

Quick Start

Use the before-after-evidence skill to capture a complete verifiable evidence bundle for your latest UI fix, including before/after screenshots, optional flow recordings, and backend trace correlation for any related server errors.

Frequently Asked Questions about before-after-evidence

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

FAQPage Schema
How do I capture before and after screenshots to prove a UI bug fix works?▼

To capture before and after screenshots for a UI bug fix, you generate structured evidence bundles containing full-fidelity PNG and LLM-optimized JPEG screenshot pairs that validate static UI, layout, and text changes.

What is the best way to validate frontend animation and loading state bug fixes?▼

Validating frontend animation and loading state bug fixes requires recording user flows and extracting 3x3 ffmpeg keyframe montages to visualize the sequence, alongside capturing console and network event logs for review.

How do I correlate frontend network errors with backend VictoriaTraces entries?▼

You correlate frontend network errors with backend VictoriaTraces by mapping failed browser network requests to backend trace entries, linking frontend 4xx/5xx symptoms directly to their backend root causes for validation.

Can I use this evidence capture process for frontend-triggered 4xx and 5xx server errors?▼

Yes, you can use this evidence capture process for frontend-triggered 4xx and 5xx server errors by generating trace correlation links that map failed browser network requests to backend VictoriaTraces entries.

Why do I need an evidence bundle for software bug fixes instead of just a screenshot?▼

You need an evidence bundle for software bug fixes to eliminate unverifiable fix claims, providing human or LLM reviewers structured, diffable proof that confirms the targeted issue is resolved without manual guesswork.

Does this fix validation method work for both static UI changes and complex user flows?▼

Yes, this fix validation method works for both static UI changes using screenshot pairs and complex user flows using flow recordings with ffmpeg keyframe grids and console network event logs.

Related Skills

Explore More Software Engineering Skills→
balajivisbalajivis
2

browse

Automate browser navigation and interaction workflows to test web applications.

Community
Advanced
nandkapadianandkapadia

receiving-code-review

Verify code-review feedback against the codebase before implementing changes.

Community
Advanced
dseirz-rgbdseirz-rgb

multi-service-debug

Correlate logs and traces to diagnose cross-service failures between Vercel and Cloud Run.

Community
Advanced
kollaboraikollaborai
1

webapp-testing

Automate local web app testing with Playwright and Python scripts.

Community
Intermediate