# AI use cases for Claude Show Your Work (iamumeransari/claude-show-your-work) Repo: [iamumeransari/claude-show-your-work](https://github.com/iamumeransari/claude-show-your-work) | Use cases: 4 | Page: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/ A Claude Code plugin that shows images, plays videos and runs visual QA with Playwright recordings inside the terminal. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Show a bug fix as a before and after recording: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/qa-bug-fix-before-after/ - Compare several design directions side by side: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/compare-design-directions-in-chat/ - Play a scroll animation or ad video in the chat: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/review-animation-video-in-terminal/ - Compare two video drafts side by side in sync: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/compare-video-draft-versions/ ## How to show a bug fix as a before and after recording with Claude Show Your Work Repo: [iamumeransari/claude-show-your-work](https://github.com/iamumeransari/claude-show-your-work) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Have Claude Code record the same Playwright steps on the old and new versions and review them side by side. **Who it is for:** A developer or product owner in Claude Code who needs proof that a UI bug fix works before merging it. **The problem:** Checking a fix usually means opening a browser, rerunning tests and reading logs to see whether the change really works. **The 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 1. Run `/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git#releases` in Claude Code 2. Run `/plugin install show-your-work@iamumeransari` in Claude Code 3. Install ffmpeg with `brew install ffmpeg` on macOS, or ask Claude to install it 4. Ask Claude Code to fix the bug in your project and show you the before and after 5. Open the Compare view in the chat and check that each Playwright check turns green where the fix works ### Prompt to paste into your agent ```text In the claude-show-your-work repo, install the show-your-work plugin in Claude Code, then fix the bug in 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. ``` ### 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. Risk, remote script: 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. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/qa-bug-fix-before-after/ ## How to compare several design directions side by side with Claude Show Your Work Repo: [iamumeransari/claude-show-your-work](https://github.com/iamumeransari/claude-show-your-work) | Difficulty: Intermediate | Time: 15 minutes | Basis: From the README Ask Claude Code for multiple design options and view them together in the terminal before choosing one. **Who it is for:** A designer or founder in Claude Code who wants to pick a homepage or screen direction quickly. **The problem:** Opening design files one by one makes it slow to compare concepts and track which draft came first. **The outcome:** Several concepts appear together in the chat, each new version is kept in History, and you can keep iterating on the chosen one. ### Steps 1. Run `/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git#releases` in Claude Code 2. Run `/plugin install show-your-work@iamumeransari` in Claude Code 3. Ask Claude Code for several directions for your screen and ask it to show them side by side 4. Pick one direction and ask for changes, then step back through History to compare drafts 5. Run `/show-your-work` if you need to change your settings ### Prompt to paste into your agent ```text Using the claude-show-your-work plugin in Claude Code, generate design directions for and show them side by side in the chat. Expected output: the directions displayed together, with each new draft kept in History. Verify that all directions appear in the same view and that earlier drafts can be reopened. ``` ### Caveat Pictures need a terminal with the kitty graphics protocol, and in Warp, WezTerm or Konsole you must turn pictures on first. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/compare-design-directions-in-chat/ ## How to play a scroll animation or ad video in the chat with Claude Show Your Work Repo: [iamumeransari/claude-show-your-work](https://github.com/iamumeransari/claude-show-your-work) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Have Claude Code record a video of its work and review it in a player with timestamps inside the terminal. **Who it is for:** A web developer or marketer who needs to review an animation, scroll effect or launch video that Claude Code produced. **The problem:** Reviewing motion and timing is hard from static screenshots, and opening separate video tools breaks the workflow. **The outcome:** The recording plays in the chat with scrubbing, skip controls and clickable timestamps for each step. ### Steps 1. Run `/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git#releases` in Claude Code 2. Run `/plugin install show-your-work@iamumeransari` in Claude Code 3. Install ffmpeg with `brew install ffmpeg` on macOS, or ask Claude to install it 4. Ask Claude Code to build the animation or page and show you how it feels as you scroll 5. Use the play, pause and timeline controls, then click a timestamp in the sidebar to jump to that step ### Prompt to paste into your agent ```text With the claude-show-your-work plugin in Claude Code, record a video of as it scrolls from top to bottom and play it in the chat. Expected output: a playable video in the chat with timestamped steps in the sidebar. Verify that the timestamps jump to the matching moment in the video. ``` ### Caveat Videos need ffmpeg installed, and the README says the plugin is cross-platform on macOS, Linux and Windows but gives the ffmpeg install command only for macOS. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/review-animation-video-in-terminal/ ## How to compare two video drafts side by side in sync with Claude Show Your Work Repo: [iamumeransari/claude-show-your-work](https://github.com/iamumeransari/claude-show-your-work) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Flip between versions of a video Claude Code made, or play old and new drafts together in one player. **Who it is for:** A marketer or creator in Claude Code revising an ad, animation or launch video over several rounds. **The problem:** Keeping track of which video cut changed, and what changed, is hard when each draft is a separate file. **The outcome:** Each new cut opens in the same player, and old and new drafts can be compared in sync. ### Steps 1. Run `/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git#releases` in Claude Code 2. Run `/plugin install show-your-work@iamumeransari` in Claude Code 3. Ask Claude Code to make a video such as an ad or launch cut and show it in the chat 4. Ask Claude Code for a revised cut, then open History to flip between drafts 5. Play the old and new versions side by side and check the changes in sync ### Prompt to paste into your agent ```text Using the claude-show-your-work plugin in Claude Code, produce two versions of and show them side by side in sync. Expected output: both versions playing together in the chat, with earlier drafts listed in History. Verify that playback stays in sync between the two versions. ``` ### Caveat The README says a copy of each shown file is kept in .show-your-work/ in your project, so keep that folder in mind when you manage project files. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/iamumeransari-claude-show-your-work/compare-video-draft-versions/