check-screenshots-content

# Check Screenshots Content Use this skill to confirm that the **app screenshots** in the course stay in sync with the **course text** that describes them. It loads every app screenshot, reads the UI text out of each image, and cross-checks that text against the chapter READMEs that embed or describe it. ## Convention This Skill Assumes - App screenshots (real GitHub Copilot app captures, dark theme) are named **`app-<topic>.webp`** and live in a chapter's **`assets/`** folder, for example `03-development-workflows/assets/app-workspace-panel.webp`. - Illustrations and analogy art (recording-studio theme, flow diagrams) do **not** use the `app-` prefix, so this skill ignores them. If an obvious app screenshot is missing the `app-` prefix, flag it so the author can rename it (and update the README image reference). ## What To Check For every `app-*` screenshot, compare the **exact on-screen text** to how the course refers to it: 1. **Label casing and wording** — UI labels must match the screenshot verbatim, including casing. For example the sidebar shows `Pull requests` (lowercase "r"), `Issues`, `Automations`, `Customize`, `More`, and the `Chats` row under `Projects`. Flag any course text that writes `Pull Requests`, `New Chat`, etc. 2. **Buttons, menu items, and dialog options** — names the README tells the user to click must match the screenshot, e.g. `Create from…`, `Toggle review panel`, `Exit plan mode and I will prompt myself`, `Local folder or repository`, `GitHub repository`, `Repository URL`. 3. **Mode and control names** — `Interactive`, `Plan`, `Autopilot` plus their descriptions, and the model / reasoning-effort controls. 4. **Image embed and alt text** — every `app-*` image is embedded by at least one README (no orphan images), every `` link resolves to a file that exists (no broken paths), and the alt text matches what the image shows. 5. **Instruction ↔ screenshot coverage** — when a README step names a UI affordance that a screenshot does show, the wording must match. When a step names an affordance that **no** screenshot shows, report it as a coverage gap (these are often already marked with `<!-- app-screenshot: ... -->` or `<!-- MANUAL STEP TO VERIFY ... -->` comments). Treat [`.github/skills/github-copilot-app-automation/references/app-ui-map.md`](../github-copilot-app-automation/references/app-ui-map.md) as the canonical source for UI label spelling and casing. If a screenshot and the UI map disagree, trust the screenshot and note that the UI map needs a refresh. ## Workflow 1. **Discover and prepare the images.** Run the helper, which lists every `app-*` screenshot and writes a PNG copy you can load (some `.webp` files do not load directly in the image view tool): ```bash bash .github/skills/check-screenshots-content/sample_codes/list-app-screenshots.sh ``` Fallback if you prefer to do it by hand: glob `*/assets/app-*` and convert any `.webp` with `sips -s format png <file>.webp --out /tmp/<name>.png` before viewing. 2. **Read each screenshot.** View the PNG and transcribe the visible UI text: labels, button captions, menu items, dialog headings and options, mode names, tooltips, and any keyboard shortcuts. 3. **Find where the course references it.** For each image, grep the chapters for its filename to find the embedding README and the surrounding steps, e.g. `grep -rn "app-workspace-panel" .` Then read the alt text and the nearby numbered steps. 4. **Cross-check** the transcribed text against the README using the rules in *What To Check* above. Also scan the whole course for the visible labels to catch casing drift in chapters that do not embed the image (e.g. `grep -rn "Pull Requests" .`). 5. **Report** findings (see *Output*). Do not edit images or rename files as part of the check. Only propose or apply text fixes if the user asks. ## Output Produce a concise, grouped report: - **✅ Matches** — screenshot ↔ course text agreements worth confirming (brief). - **⚠️ Discrepancies** — concrete mismatches, each with the screenshot, the expected on-screen text, the actual course text, and a `file:line` citation. - **📷 Coverage gaps** — README steps that name UI with no supporting screenshot, and any obvious app screenshot missing the `app-` prefix. Keep citations exact (`path/README.md:NN`) so fixes are easy to apply. ## Safety and Notes - Read-only by default: analyze and report; only change course text when asked. - Convert `.webp` to PNG in a temp dir (`/tmp`), never write derived images into the repo. - Screenshots may contain account names, private repo names, or paths. Do not copy private data into the report; describe the UI generically. - Casing matters: product labels use the app's exact sentence case (e.g. `Pull requests`, `Assigned to me`), even inside Title Case headings.