{
 "schema_version": 1,
 "generated": "2026-10-20",
 "id": "iamumeransari-claude-show-your-work--qa-bug-fix-before-after",
 "repo": "iamumeransari/claude-show-your-work",
 "repo_url": "https://github.com/iamumeransari/claude-show-your-work",
 "repo_slug": "iamumeransari-claude-show-your-work",
 "title": "Show a bug fix as a before and after recording",
 "page_title": "How to show a bug fix as a before and after recording with Claude Show Your Work",
 "summary": "Have Claude Code record the same Playwright steps on the old and new versions and review them side by side.",
 "who": "A developer or product owner in Claude Code who needs proof that a UI bug fix works before merging it.",
 "problem": "Checking a fix usually means opening a browser, rerunning tests and reading logs to see whether the change really works.",
 "outcome": "The old and new versions play side by side in the chat, with change markers and checks that turn green or red as the video plays.",
 "steps": [
  "Run `/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git#releases` in Claude Code",
  "Run `/plugin install show-your-work@iamumeransari` in Claude Code",
  "Install ffmpeg with `brew install ffmpeg` on macOS, or ask Claude to install it",
  "Ask Claude Code to fix the bug in your project and show you the before and after",
  "Open the Compare view in the chat and check that each Playwright check turns green where the fix works"
 ],
 "agent_prompt": "In the claude-show-your-work repo, install the show-your-work plugin in Claude Code, then fix the bug in <target app or page> and produce a before and after Playwright recording. Expected output: both recordings playing side by side in the chat with change markers. Verify that the checks for the fixed behavior are green in the new version.",
 "agents": [
  "claude-code"
 ],
 "difficulty": "Intermediate",
 "time": "30 minutes",
 "basis": "readme",
 "caveat": "The README describes Playwright recordings for Claude's test runs but does not list setup steps for Playwright itself, so test the setup on your own app first.",
 "category": "Software and DevOps",
 "tags": [
  "Software and DevOps"
 ],
 "lang": "typescript",
 "requirements": [
  "Claude Code 2.1.286 or later",
  "A terminal that supports the kitty graphics protocol, such as Ghostty or Warp",
  "ffmpeg, needed for videos (brew install ffmpeg on macOS, or ask Claude to install it)"
 ],
 "risk": "none",
 "seen_in_the_wild": false,
 "mentioned_publicly": false,
 "risks": [
  {
   "tag": "remote-script",
   "notice": "The install pulls the plugin from a GitHub repository and the plugin runs its own shell scripts and a daily updater, so review the README's list of what it runs first."
  }
 ],
 "best": true,
 "score": 1.0,
 "evidence": [],
 "url": "https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/qa-bug-fix-before-after/",
 "md": "https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/qa-bug-fix-before-after/index.md",
 "disclaimer": "Deduped lists open-source repositories that belong to other people. We do not own, maintain, audit, or vouch for any of them, and a repo appearing here is not an endorsement or a safety check. The use cases, steps, and prompts are written by AI and may be incomplete, outdated, or just wrong. Where a use case is marked \"Seen in the wild\", we link to public posts where someone described something similar, but we have not verified those posts and the use case itself is still our AI's own write-up. Use all of this at your own risk. Only run code, commands, or agents on systems and accounts you are authorized to use, and read the code and every command before you run it, especially anything that touches credentials, files, or the network. Nothing here is professional, security, legal, or financial advice. All trademarks and project names belong to their respective owners, and their use here does not imply affiliation. Content is provided as is, without warranties of any kind. Found a mistake, a safety problem, or something you want removed? Email hello@dedupedai.com and we will look at it promptly.",
 "api": "https://dedupedai.com/api/v1/usecases/iamumeransari-claude-show-your-work--qa-bug-fix-before-after.json",
 "api_version": "v1"
}