Claude Code shows images and plays videos right in your terminal: screenshots, Playwright recordings, and synced before/after QA. Ghostty & kitty.
# Add to your Claude Code skills
git clone https://github.com/iamumeransari/claude-show-your-workGuides for using ai agents skills like claude-show-your-work.
See how claude-show-your-work compares with popular alternatives.
claude-show-your-work is an open-source ai agents skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by iamumeransari. Claude Code shows images and plays videos right in your terminal: screenshots, Playwright recordings, and synced before/after QA. Ghostty & kitty. It has 90 GitHub stars.
claude-show-your-work's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
Clone the repository with "git clone https://github.com/iamumeransari/claude-show-your-work" and add it to your Claude Code skills directory (see the Installation section above).
claude-show-your-work is primarily written in TypeScript. It is open-source under iamumeransari on GitHub, so you can review or fork the full source.
Yes. SkillsLLM lists many other AI Agents skills you can browse and compare side by side. Open the AI Agents category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh claude-show-your-work against similar tools.
No comments yet. Be the first to share your thoughts!
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
See comparison
claude-show-your-work is a Claude Code plugin that displays images and plays videos in the chat. Claude uses it to show what it has made, such as a web page, a design, a chart or a video, and to play recordings of your app while it tests it.
Run these two commands in Claude Code:
/plugin marketplace add https://github.com/iamumeransari/claude-show-your-work.git
/plugin install show-your-work@iamumeransari
The plugin requires macOS, Claude Code 2.1.287 or later, and the Ghostty terminal. Videos also require ffmpeg, which you can install with brew install ffmpeg or by asking Claude to install it.
Claude shows visual work without being asked. You can also ask for it directly, for example:
Claude can show several design concepts side by side, and you choose one by replying. It can also show a finished page at desktop, tablet and phone widths in a single image.
Claude can test a feature with Playwright, record the run, and play the recording in the chat. The changes it made are listed next to the video, and clicking a change jumps to that point. Each check is marked as passed or failed when the video reaches it.
For a bug fix, Claude records the same steps on the old and new versions. The Compare view plays both recordings side by side and keeps them in sync, even when one loads more slowly, with the check results for each version.
Videos play in the chat with a list beside them, such as the sections of an ad. When Claude makes a new version, the earlier ones stay in the history so you can compare them.
Charts, slides, motion graphics and any other image or video file work the same way.
If a file can't be shown, a note appears in its place with the reason: the file is missing, it isn't an image, the video is damaged or has no picture, ffmpeg isn't installed, or the terminal can't display images. The note has a button that copies a prompt for Claude to fix the problem.
Claude Code mods let a plugin draw its own interface inside Claude Code, and Ghostty can display images in the terminal. Claude tells the plugin which file to show, and the plugin passes it to the terminal.
Videos are split into frames with ffmpeg. The plugin prepares a few seconds of frames at a time, so long videos use little memory or disk space.
The image or video goes to your screen and not to Claude, so displaying it uses no tokens.
The plugin works in Ghostty. iTerm2, Terminal.app and the VS Code terminal can't display these images, and the plugin tells you when that happens.
In tmux, add set -g allow-passthrough on to ~/.tmux.conf. If the setting is off, the plugin shows you how to turn it on.
Yes. When Claude Code starts, the plugin checks GitHub for a new version once a day and installs it. Set SHOW_YOUR_WORK_AUTO_UPDATE=0 to turn this off.
It sends anonymous usage counts, such as which versions are in use and how often images and videos are shown. It never sends files, file names, paths, prompts or anything you write, and it never records your IP address or location. Set SHOW_YOUR_WORK_TELEMETRY=0 to turn it off.
To report a bug or suggest a change, open an issue.
The plugin gives Claude two tools, show_image and show_video. A basic call needs only a path. For a before and after, Claude also passes the old file and its results:
{
"path": "qa/after.webm", // the run on the fixed version
"compare": "qa/before.webm", // the same steps on the old version
"title": "Pricing page",
"url": "http://localhost:3000/pricing",
"changes": [ // what changed, and the second it shows up
{ "title": "Annual toggle sets prices", "at": 3.2 },
{ "title": "Plan buttons line up", "at": 5.4 }
],
"summary": [ // the test results, at most three lines
{ "label": "Billing: toggle works", "ok": true, "passed": 1, "total": 1 },
{ "label": "Layout: plans, buttons", "ok": true, "passed": 3, "total": 3 }
]
}
Videos become frames at up to 12 per second, 960 px wide, 900 frames at most. You can open any file yourself with /img path/to/file.png.
To work on the plugin, edit hooks/register.tsx and run /reload-plugins. Check it with claude plugin validate . and claude plugin test ..
MIT. Photography in the examples is from Unsplash, used under the Unsplash License.