yas-pr-screenshots

Files (2)

• SKILL.md
• shoot.sh · scripts/

SKILL.md (first lines)

# YAS PR screenshots

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 touches | Add variant `LABEL:SCENARIO:ENV` |
   |---|---|
   | subagents / openspec / tasks / workflows | `subagents:subagents:` · `openspec:openspec:` · `tasks:tasks:` · `workflows:workflows:` |
   | context fill / soft limit / token window | `full-context:full-context:` (or `YAS_SOFT_LIMIT=`) |
   | config parsing / errors | `config-error:config-error:` |
   | narrow width / truncation | `narrow:kitchen-sink:YAS_MAX_WIDTH=40` |
   | full width | `full-width:kitchen-sink:YAS_FULL_WIDTH=1` |
   | justify / labels | `justify:kitchen-sink:YAS_JUSTIFY=1` · `labels:kitchen-sink:YAS_LABELS=1` |
   | theme / gradient / colour | `theme-<name>:kitchen-sink:YAS_THEME=<name>` |
   | glyph mode | `github:kitchen-sink:YAS_GLYPH_MODE=github` |
   | model / 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.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:

   ```bash
   .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):

   ```bash
   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).

From tmck-code/yet-another-statusline, BSD-3-Clause.

More from tmck-code/yet-another-statusline