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) 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, Dashboards, Automations, and Customize. The Chats row appears under Sessions after a chat exists. Match the specific control: the cloud Tools group is Pull Requests, but the sidebar view is Pull requests.
2. Buttons, menu items, and dialog options — names the README tells the user to click must match the screenshot, e.g. Create from…, Toggle 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. Copilot Fusion has Standard, High, and Max effort levels; it is not a session mode.
4. Image embed and alt text — every app-* image is embedded by at least one README (no orphan images), every ![...](...app-...) 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 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 .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.