YAS PR screenshots

SkillDocs & knowledge

Lets your agent create before/after screenshot images of terminal UI changes and add them to a pull request.

Available today. Use it from your connected AI after setup.

Add ahel to your AI once: Claude, ChatGPT, Cursor, Claude Code or Codex. Then ask it to use this.

Then ask your AI: use the YAS PR screenshots skill

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

  1. 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.

  2. Locate the screenshots checkout. Use $YAS_PR_SCREENSHOTS_DIR if set, else a sibling ../yas-pr-screenshots, else clone git@github.com:tmck-code/yas-pr-screenshots.git. Ensure it's on main and clean (git -C <dir> pull --ff-only). *.png is LFS-tracked there.

  3. Pick variants. Always shoot kitchen-sink. Then read git diff --stat main...HEAD (and the diff) and add the variants most relevant to what changed — map area → variant:

    Branch touchesAdd variant LABEL:SCENARIO:ENV
    subagents / openspec / tasks / workflowssubagents:subagents: · openspec:openspec: · tasks:tasks: · workflows:workflows:
    context fill / soft limit / token windowfull-context:full-context: (or YAS_SOFT_LIMIT=)
    config parsing / errorsconfig-error:config-error:
    narrow width / truncationnarrow:kitchen-sink:YAS_MAX_WIDTH=40
    full widthfull-width:kitchen-sink:YAS_FULL_WIDTH=1
    justify / labelsjustify:kitchen-sink:YAS_JUSTIFY=1 · labels:kitchen-sink:YAS_LABELS=1
    theme / gradient / colourtheme-<name>:kitchen-sink:YAS_THEME=<name>
    glyph modegithub:kitchen-sink:YAS_GLYPH_MODE=github
    model / thinkingopus-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.py SCENARIOS (kitchen-sink, tasks, openspec, subagents, workflows, full-context, config-error, sonnet-thinking, opus-thinking, …).

  4. 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 main worktree), 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 (ImageMagick magick, deterministic). The combined image lands at screenshots/<pr_id>/<label>.png (the raw halves are also kept under screenshots/<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> | ![<label>](<url_base>/<label>.png?raw=true) |
    

    When the change is theme-wide, use the same scenario (usually kitchen-sink) across all rows and vary only YAS_THEME, labelling each row with the theme name.

  5. 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
    
  6. 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=true blob form resolves LFS pointers correctly where raw.githubusercontent.com doesn't.
  • Prerequisite: magick on PATH (also used for the combine step) and a Mono Nerd Font installed (see ops/ansi_png.py env knobs).

Signals

GitHub stars
242
Forks
24
Last commit
Sep 2026
Advanced
Item type
skill
Key
yas-pr-screenshots
Source
github.com/tmck-code/yet-another-statusline