iamumeransari / claude-show-your-work

claude-show-your-work 
 See, review and iterate on your agent's work without leaving the terminal. Images, videos and visual QA for Claude Code. 
## Install
Run these two commands in Claude Code:
 [code] 
It works on macOS, Linux and Windows. You need a terminal that supports the kitty graphics protocol, like Ghostty or Warp, and Claude Code 2.1.286 or later. Videos also need ffmpeg: install it with your package manager (`brew install ffmpeg` on macOS), or ask Claude to install it.
When the install finishes, a short onboarding shows you around. Run `/show-your-work` at any time to change your settings.
## Usage
Claude shows you its work in the chat whenever it builds or changes something visual. You can also ask for it directly:
- "Give me four directions for the homepage hero and show them side by side."
- "Build the sign-up form, test it, and show me the recording."
- "Fix the billing toggle and show me before and after."
### Visual QA with before-and-after recordings
When Claude builds a feature or fixes a bug, it tests the change with Playwright, records the run and plays the recording in the chat, with everything you need to review the work in one place:
- **Before and After:** For any change, from a new feature to a bug fix, Claude records the same steps on the old version and the new one. Compare then plays both side by side, in sync.
- **Change Markers:** Every change Claude made is listed beside the video with its timestamp, and clicking one jumps straight to the moment it shows up.
- **Live Checks:** Each test check turns green or red as the video reaches it, so you can see exactly where the fix works and where something still fails.
- **One Place to Review:** You don't need to open a browser, rerun the tests or read through logs, because the recording and its results are right there in the chat.
### Images
Whatever Claude designs, you see it right in the chat: landing pages, app screens, components, design concepts, slides, charts and generated images. Ask for a few directions and they appear side by side, then keep iterating on the one you like.
- **Compare Directions:** Several concepts show together, so you can pick one at a glance instead of opening files one by one.
- **Every Version Kept:** Each new version lands in the same player, and History lets you step back through every earlier draft.
- **Before and After:** Switch between the old and new design, or put them side by side, to see exactly what changed.
### Video
Beyond product QA, Claude can show you a video of almost anything it works on. Building a website and want to see how it feels as you scroll from top to bottom? Just ask, and the recording plays in the chat, animations and all.
Making an ad, an animation or a launch video? Each cut plays right in the chat, in a full-featured video player:
- **Video Controls:** Play, pause, scrub through the timeline, and skip forward or back to the moment you want.
- **Timestamps:** The sidebar walks you through what happens in the v