[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6ADBJFS3ZTFFKAZGZ78P9XV":3,"skill-same:01M6ADBJFS3ZTFFKAZGZ78P9XV":65},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":30,"linkOnly":31,"markdownContent":32,"markdownBody":33,"frontMatter":34,"refName":35,"commitSha":36,"skillDirectory":37,"forksCount":38,"repositoryHtmlUrl":39,"repositoryHomepageUrl":40,"ownerHtmlUrl":41,"ownerBlogUrl":42,"ownerDescription":43,"updatedAt":44,"install":45,"resources":58},"01M6ADBJFS3ZTFFKAZGZ78P9XV","check-screenshots-content",null,"Verify GitHub Copilot app screenshots match the course content. Use when running \u002Fcheck-screenshots-content, or when asked to confirm that app- prefixed screenshots in chapter assets folders are consistent with the README labels, button names, menu items, dialog options, and step-by-step instructions that reference them.","github\u002Fcopilot-app-for-beginners","github","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F9919?v=4","01M6AC83DS133TPXFSP1DHNCC6","GitHub","01M6ADBDY5EBJ746TEWCCAFYY1",161,"MIT","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcheck-screenshots-content\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000036","内容创作者","PROFESSION","适用职业",[24,25,26,27,28,9,29],"check screenshots content","content","screenshots","github copilot","github copilot app","copilot","2026-11-10 10:12:30",false,"---\nname: check-screenshots-content\ndescription: Verify GitHub Copilot app screenshots match the course content. Use when running \u002Fcheck-screenshots-content, or when asked to confirm that app- prefixed screenshots in chapter assets folders are consistent with the README labels, button names, menu items, dialog options, and step-by-step instructions that reference them.\n---\n\n# Check Screenshots Content\n\nUse this skill to confirm that the **app screenshots** in the course stay in sync\nwith the **course text** that describes them. It loads every app screenshot,\nreads the UI text out of each image, and cross-checks that text against the\nchapter READMEs that embed or describe it.\n\n## Convention This Skill Assumes\n\n- App screenshots (real GitHub Copilot app captures) are named\n  **`app-\u003Ctopic>.webp`** and live in a chapter's **`assets\u002F`** folder, for\n  example `03-development-workflows\u002Fassets\u002Fapp-workspace-panel.webp`.\n- Illustrations and analogy art (recording-studio theme, flow diagrams) do **not**\n  use the `app-` prefix, so this skill ignores them.\n\nIf an obvious app screenshot is missing the `app-` prefix, flag it so the author\ncan rename it (and update the README image reference).\n\n## What To Check\n\nFor every `app-*` screenshot, compare the **exact on-screen text** to how the\ncourse refers to it:\n\n1. **Label casing and wording** — UI labels must match the screenshot verbatim,\n   including casing. For example the sidebar shows `Pull requests` (lowercase\n   \"r\"), `Issues`, `Dashboards`, `Automations`, and `Customize`. The `Chats`\n   row appears under `Sessions` after a chat exists. Match the specific control:\n   the cloud Tools group is `Pull Requests`, but the sidebar view is\n   `Pull requests`.\n2. **Buttons, menu items, and dialog options** — names the README tells the user\n   to click must match the screenshot, e.g. `Create from…`, `Toggle Panel`,\n   `Exit plan mode and I will prompt myself`, `Local folder or repository`,\n   `GitHub repository`, `Repository URL`.\n3. **Mode and control names** — `Interactive`, `Plan`, `Autopilot` plus their\n   descriptions, and the model \u002F reasoning-effort controls. `Copilot Fusion`\n   has `Standard`, `High`, and `Max` effort levels; it is not a session mode.\n4. **Image embed and alt text** — every `app-*` image is embedded by at least one\n   README (no orphan images), every `![...](...app-...)` link resolves to a file\n   that exists (no broken paths), and the alt text matches what the image shows.\n5. **Instruction ↔ screenshot coverage** — when a README step names a UI\n   affordance that a screenshot does show, the wording must match. When a step\n   names an affordance that **no** screenshot shows, report it as a coverage gap\n   (these are often already marked with `\u003C!-- app-screenshot: ... -->` or\n   `\u003C!-- MANUAL STEP TO VERIFY ... -->` comments).\n\nTreat\n[`.github\u002Fskills\u002Fgithub-copilot-app-automation\u002Freferences\u002Fapp-ui-map.md`](..\u002Fgithub-copilot-app-automation\u002Freferences\u002Fapp-ui-map.md)\nas the canonical source for UI label spelling and casing. If a screenshot and the\nUI map disagree, trust the screenshot and note that the UI map needs a refresh.\n\n## Workflow\n\n1. **Discover and prepare the images.** Run the helper, which lists every\n   `app-*` screenshot and writes a PNG copy you can load (some `.webp` files do\n   not load directly in the image view tool):\n\n   ```bash\n   bash .github\u002Fskills\u002Fcheck-screenshots-content\u002Fsample_codes\u002Flist-app-screenshots.sh\n   ```\n\n   Fallback if you prefer to do it by hand: glob `*\u002Fassets\u002Fapp-*` and convert any\n   `.webp` with `sips -s format png \u003Cfile>.webp --out \u002Ftmp\u002F\u003Cname>.png` before viewing.\n\n2. **Read each screenshot.** View the PNG and transcribe the visible UI text:\n   labels, button captions, menu items, dialog headings and options, mode names,\n   tooltips, and any keyboard shortcuts.\n\n3. **Find where the course references it.** For each image, grep the chapters for\n   its filename to find the embedding README and the surrounding steps, e.g.\n   `grep -rn \"app-workspace-panel\" .` Then read the alt text and the nearby\n   numbered steps.\n\n4. **Cross-check** the transcribed text against the README using the rules in\n   *What To Check* above. Also scan the whole course for the visible labels to\n   catch casing drift in chapters that do not embed the image\n   (e.g. `grep -rn \"Pull Requests\" .`).\n\n5. **Report** findings (see *Output*). Do not edit images or rename files as part\n   of the check. Only propose or apply text fixes if the user asks.\n\n## Output\n\nProduce a concise, grouped report:\n\n- **✅ Matches** — screenshot ↔ course text agreements worth confirming (brief).\n- **⚠️ Discrepancies** — concrete mismatches, each with the screenshot, the\n  expected on-screen text, the actual course text, and a `file:line` citation.\n- **📷 Coverage gaps** — README steps that name UI with no supporting screenshot,\n  and any obvious app screenshot missing the `app-` prefix.\n\nKeep citations exact (`path\u002FREADME.md:NN`) so fixes are easy to apply.\n\n## Safety and Notes\n\n- Convert `.webp` to PNG in a temp dir (`\u002Ftmp`), never write derived images into\n  the repo.\n- Screenshots may contain account names, private repo names, or paths. Do not\n  copy private data into the report; describe the UI generically.\n- Casing matters: product labels use the app's exact sentence case\n  (e.g. `Pull requests`, `Assigned to me`), even inside Title Case headings.\n","# Check Screenshots Content\n\nUse this skill to confirm that the **app screenshots** in the course stay in sync\nwith the **course text** that describes them. It loads every app screenshot,\nreads the UI text out of each image, and cross-checks that text against the\nchapter READMEs that embed or describe it.\n\n## Convention This Skill Assumes\n\n- App screenshots (real GitHub Copilot app captures) are named\n  **`app-\u003Ctopic>.webp`** and live in a chapter's **`assets\u002F`** folder, for\n  example `03-development-workflows\u002Fassets\u002Fapp-workspace-panel.webp`.\n- Illustrations and analogy art (recording-studio theme, flow diagrams) do **not**\n  use the `app-` prefix, so this skill ignores them.\n\nIf an obvious app screenshot is missing the `app-` prefix, flag it so the author\ncan rename it (and update the README image reference).\n\n## What To Check\n\nFor every `app-*` screenshot, compare the **exact on-screen text** to how the\ncourse refers to it:\n\n1. **Label casing and wording** — UI labels must match the screenshot verbatim,\n   including casing. For example the sidebar shows `Pull requests` (lowercase\n   \"r\"), `Issues`, `Dashboards`, `Automations`, and `Customize`. The `Chats`\n   row appears under `Sessions` after a chat exists. Match the specific control:\n   the cloud Tools group is `Pull Requests`, but the sidebar view is\n   `Pull requests`.\n2. **Buttons, menu items, and dialog options** — names the README tells the user\n   to click must match the screenshot, e.g. `Create from…`, `Toggle Panel`,\n   `Exit plan mode and I will prompt myself`, `Local folder or repository`,\n   `GitHub repository`, `Repository URL`.\n3. **Mode and control names** — `Interactive`, `Plan`, `Autopilot` plus their\n   descriptions, and the model \u002F reasoning-effort controls. `Copilot Fusion`\n   has `Standard`, `High`, and `Max` effort levels; it is not a session mode.\n4. **Image embed and alt text** — every `app-*` image is embedded by at least one\n   README (no orphan images), every `![...](...app-...)` link resolves to a file\n   that exists (no broken paths), and the alt text matches what the image shows.\n5. **Instruction ↔ screenshot coverage** — when a README step names a UI\n   affordance that a screenshot does show, the wording must match. When a step\n   names an affordance that **no** screenshot shows, report it as a coverage gap\n   (these are often already marked with `\u003C!-- app-screenshot: ... -->` or\n   `\u003C!-- MANUAL STEP TO VERIFY ... -->` comments).\n\nTreat\n[`.github\u002Fskills\u002Fgithub-copilot-app-automation\u002Freferences\u002Fapp-ui-map.md`](..\u002Fgithub-copilot-app-automation\u002Freferences\u002Fapp-ui-map.md)\nas the canonical source for UI label spelling and casing. If a screenshot and the\nUI map disagree, trust the screenshot and note that the UI map needs a refresh.\n\n## Workflow\n\n1. **Discover and prepare the images.** Run the helper, which lists every\n   `app-*` screenshot and writes a PNG copy you can load (some `.webp` files do\n   not load directly in the image view tool):\n\n   ```bash\n   bash .github\u002Fskills\u002Fcheck-screenshots-content\u002Fsample_codes\u002Flist-app-screenshots.sh\n   ```\n\n   Fallback if you prefer to do it by hand: glob `*\u002Fassets\u002Fapp-*` and convert any\n   `.webp` with `sips -s format png \u003Cfile>.webp --out \u002Ftmp\u002F\u003Cname>.png` before viewing.\n\n2. **Read each screenshot.** View the PNG and transcribe the visible UI text:\n   labels, button captions, menu items, dialog headings and options, mode names,\n   tooltips, and any keyboard shortcuts.\n\n3. **Find where the course references it.** For each image, grep the chapters for\n   its filename to find the embedding README and the surrounding steps, e.g.\n   `grep -rn \"app-workspace-panel\" .` Then read the alt text and the nearby\n   numbered steps.\n\n4. **Cross-check** the transcribed text against the README using the rules in\n   *What To Check* above. Also scan the whole course for the visible labels to\n   catch casing drift in chapters that do not embed the image\n   (e.g. `grep -rn \"Pull Requests\" .`).\n\n5. **Report** findings (see *Output*). Do not edit images or rename files as part\n   of the check. Only propose or apply text fixes if the user asks.\n\n## Output\n\nProduce a concise, grouped report:\n\n- **✅ Matches** — screenshot ↔ course text agreements worth confirming (brief).\n- **⚠️ Discrepancies** — concrete mismatches, each with the screenshot, the\n  expected on-screen text, the actual course text, and a `file:line` citation.\n- **📷 Coverage gaps** — README steps that name UI with no supporting screenshot,\n  and any obvious app screenshot missing the `app-` prefix.\n\nKeep citations exact (`path\u002FREADME.md:NN`) so fixes are easy to apply.\n\n## Safety and Notes\n\n- Convert `.webp` to PNG in a temp dir (`\u002Ftmp`), never write derived images into\n  the repo.\n- Screenshots may contain account names, private repo names, or paths. Do not\n  copy private data into the report; describe the UI generically.\n- Casing matters: product labels use the app's exact sentence case\n  (e.g. `Pull requests`, `Assigned to me`), even inside Title Case headings.\n",{"name":5,"description":7},"main","f4fe510c5e94fc9bbcb90d4e41a101ef8d512e84",".github\u002Fskills\u002Fcheck-screenshots-content",187,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners","https:\u002F\u002Fgh.io\u002Fcopilot-app-course","https:\u002F\u002Fgithub.com\u002Fgithub","https:\u002F\u002Fgithub.com\u002Fabout","How people build software.","2026-11-12 12:39:45",{"source":8,"skillName":5,"commands":46,"prompt":56,"zipAvailable":57},[47,50,53],{"tool":48,"command":49},"npx","npx skills add github\u002Fcopilot-app-for-beginners --skill check-screenshots-content",{"tool":51,"command":52},"bunx","bunx skills add github\u002Fcopilot-app-for-beginners --skill check-screenshots-content",{"tool":54,"command":55},"pnpm","pnpm dlx skills add github\u002Fcopilot-app-for-beginners --skill check-screenshots-content","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcheck-screenshots-content\u002FSKILL.md",true,[59],{"path":60,"resourceType":61,"resourceTypeDesc":62,"sizeBytes":63,"sourceHtmlUrl":64},"sample_codes\u002Flist-app-screenshots.sh","SCRIPT","脚本",1584,"https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcheck-screenshots-content\u002Fsample_codes\u002Flist-app-screenshots.sh",[66,93,106],{"skillNo":67,"name":68,"nameZh":6,"description":69,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":70,"categories":71,"keywords":80,"publishedAt":30},"01M6ADBQXAJBTWP32YMPZJ5WRB","github-copilot-app-automation","Automate and research the GitHub Copilot app desktop experience. Use for driving Copilot App sessions, creating isolated app experiments, mapping app UI\u002Faccessibility controls, taking app screenshots, saving PNG captures, optimizing WebP images, testing prompts without submitting, using app\u002Fsession APIs, canvases, automations, macOS Accessibility, AppleScript, and safe end-to-end Copilot App workflow probes.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fgithub-copilot-app-automation\u002FSKILL.md",[72,77],{"categoryNo":73,"categoryName":74,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",{"categoryNo":78,"categoryName":79,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000023","Skill与智能体开发",[81,82,29,9,28,27,83,26,84,85,86,87,88,89,90,91,92],"automation","github copilot app automation","desktop","safe","testing","accessibility","sessions","experiments","ui","workflow","macos","research",{"skillNo":94,"name":95,"nameZh":6,"description":96,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":97,"categories":98,"keywords":102,"publishedAt":30},"01M6ADBMTBWFPZMV3GAES608GM","create-svg-image","Wrap a raster image in an SVG and overlay a numbered red \"step\" circle for course screenshots. Use when running \u002Fcreate-svg-image, or when asked to add a numbered callout badge to an image (e.g. a red circle with a \"1\" pointing at a UI control) that must still render on a GitHub README.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fcreate-svg-image\u002FSKILL.md",[99],{"categoryNo":100,"categoryName":101,"taxonomyType":75,"taxonomyTypeDesc":76},"01JBSEEDCAT000000000000016","图像与多媒体",[103,104,105,26,89,9],"create","create svg image","image",{"skillNo":107,"name":108,"nameZh":6,"description":109,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":30},"01M6ADBG6RYHZZJ3T80612P31R","book-app-reviewer","Review changes in samples\u002Fbook-app-web for accessibility, responsive layout, tests\u002Fbuild validation, and small beginner-safe changes.","https:\u002F\u002Fgithub.com\u002Fgithub\u002Fcopilot-app-for-beginners\u002Fblob\u002Fmain\u002F.github\u002Fskills\u002Fbook-app-reviewer\u002FSKILL.md",[],[113,114,86,115,84,116,117],"book app reviewer","review","validation","review changes","web"]