YAS PR screenshots
SkillDocs & knowledgeLets your agent create before/after screenshot images of terminal UI changes and add them to a pull request.
Use YAS PR screenshots in Claude, ChatGPT or Ahel Desktop
Free. Sign in, add YAS PR screenshots and connect your AI. About a minute.
Also: Claude Code · Cursor · Codex
Then ask your AI: use the YAS PR screenshots skill
Details
Instructions available. Your AI can read the instructions. Execution depends on the setup they require.
Account requirements not reviewed. Check the skill instructions before use; Ahel provides instructions and does not run this skill.
No other account needed.
Add Ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.
About this skill
Generate before/after PNG screenshots for a YAS branch's rendering changes, push them to the yas-pr-screenshots repo, and hand back a markdown before/after table for the PR description. Use when the user wants real image screenshots (not ANSI-stripped text) attached to a YAS pull request, or asks to
What this skill tells your AI
The instructions your AI receives, as published by tmck-code/yet-another-statusline in .claude/skills/yas-pr-screenshots/SKILL.md and read by Ahel’s review.
Render the statusline on main ("before") and on the current branch ("after") as
deterministic PNGs, publish them to the public tmck-code/yas-pr-screenshots repo,
and emit a markdown table that another worker (e.g. the yas-pr skill or a
gh pr edit) drops into the PR body. PNGs come from DEMO_ONLY=<scenario> make demo/img (via ops/ansi_png.py — needs ImageMagick magick + a Mono Nerd Font).
Steps
-
Resolve
<pr_id>. If the current branch already has a PR, use its number (gh pr view --json number -q .number). Otherwise predict the next one:gh pr list --state all --limit 1 --json number -q '.[0].number'+ 1. -
Locate the screenshots checkout. Use
$YAS_PR_SCREENSHOTS_DIRif set, else a sibling../yas-pr-screenshots, else clonegit@github.com:tmck-code/yas-pr-screenshots.git. Ensure it's onmainand clean (git -C <dir> pull --ff-only).*.pngis LFS-tracked there. -
Pick variants. Always shoot
kitchen-sink. Then readgit diff --stat main...HEAD(and the diff) and add the variants most relevant to what changed — map area → variant:Branch touches Add variant LABEL:SCENARIO:ENVsubagents / openspec / tasks / workflows subagents:subagents:·openspec:openspec:·tasks:tasks:·workflows:workflows:context fill / soft limit / token window full-context:full-context:(orYAS_SOFT_LIMIT=)config parsing / errors config-error:config-error:narrow width / truncation narrow:kitchen-sink:YAS_MAX_WIDTH=40full width full-width:kitchen-sink:YAS_FULL_WIDTH=1justify / labels justify:kitchen-sink:YAS_JUSTIFY=1·labels:kitchen-sink:YAS_LABELS=1theme / gradient / colour theme-<name>:kitchen-sink:YAS_THEME=<name>glyph mode github:kitchen-sink:YAS_GLYPH_MODE=githubmodel / thinking opus-thinking:opus-thinking:·sonnet-thinking:sonnet-thinking:Use the same ENV on both sides so the diff is purely the content change. Scenario names:
ops/demo.pySCENARIOS(kitchen-sink, tasks, openspec, subagents, workflows, full-context, config-error, sonnet-thinking, opus-thinking, …). -
Render + stage. From the YAS repo root run the helper with the chosen variants:
.claude/skills/yas-pr-screenshots/scripts/shoot.sh <pr_id> <screenshots_dir> \ 'kitchen-sink:kitchen-sink:' 'narrow:kitchen-sink:YAS_MAX_WIDTH=40' 'subagents:subagents:'For each variant it renders after (current tree) and before (a throwaway
mainworktree), then combines the pair into ONE wide PNG — before and after side by side, each half topped by a small "before" / "after" heading, joined by a visible vertical separator strip (ImageMagickmagick, deterministic). The combined image lands atscreenshots/<pr_id>/<label>.png(the raw halves are also kept underscreenshots/<pr_id>/{before,after}/for reference, but the table embeds only the combined image). It prints the markdown table to stdout: a blank-headed left column holding the variant label, one row per variant. A before render that fails (scenario new to the branch) yields a "(not on main)" placeholder left half instead of aborting.| | before / after | |--|----------------| | <label> |  |When the change is theme-wide, use the same scenario (usually
kitchen-sink) across all rows and vary onlyYAS_THEME, labelling each row with the theme name. -
Commit + push (outward-facing — confirm with the user first):
git -C <dir> add screenshots/<pr_id> git -C <dir> commit -m "screenshots: PR #<pr_id> before/after (<branch>)" git -C <dir> push origin main -
Hand off the table. Output the table from step 4 verbatim as the final result so the PR-authoring worker can paste it into the Screenshots / recording section. Do not edit the PR body yourself — that's the next worker's job.
Notes
- Images render only after the push lands (GitHub's LFS/image proxy may lag a few seconds).
- The embed URL is
.../blob/main/screenshots/<pr_id>/<label>.png?raw=true— the?raw=trueblob form resolves LFS pointers correctly whereraw.githubusercontent.comdoesn't. - Prerequisite:
magickon PATH (also used for the combine step) and a Mono Nerd Font installed (seeops/ansi_png.pyenv knobs).
Signals
- GitHub stars
- 242
- Forks
- 25
- Last commit
- Oct 2026
Advanced
- Item type
- skill
- Key
yas-pr-screenshots- Source
- github.com/tmck-code/yet-another-statusline
github.com/tmck-code/yet-another-statusline
More in Docs & knowledge
Skill · mattpocock
More in Docs & knowledgecanvas-design
Skill · anthropics
More in Docs & knowledgedoc-coauthoring
Skill · anthropics
More in Docs & knowledgepopups
Skill · coreyhaines31
More in Docs & knowledgewriting-for-agents
Skill · mattpocock
More in Docs & knowledgespec-driven-development
Skill · addyosmani
More in Docs & knowledge