Review changes in samples/book-app-web for accessibility, responsive layout, tests/build validation, and small beginner-safe changes.
日本語の概要は準備中です。原文の説明を表示しています。
Automate and research the GitHub Copilot app desktop experience. Use for driving Copilot App sessions, creating isolated app experiments, mapping app UI/accessibility controls, taking app screenshots, saving PNG captures, optimizing WebP images, testing prompts without submitting, using app/session APIs, canvases, automations, macOS Accessibility, AppleScript, and safe end-to-end Copilot App workflow probes.
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
Use this skill when the task is about driving, testing, mapping, or experimenting with the GitHub Copilot app. Prefer app/session APIs first, then app-native canvases/automations, and use GUI Accessibility only when the visible desktop UI itself must be exercised.
This skill's power depends heavily on where the agent runs:
| Context | Session/app APIs | Capture reliability | Best for |
|---|---|---|---|
| Inside the GitHub Copilot app agent (recommended) | Available for the host instance. They do not select a separately launched persona. | High when the agent launches, drives, and captures the persona by process ID | End-to-end screenshot capture with a dedicated persona |
| GitHub Copilot CLI (terminal) | Not available | Low/manual — a human must navigate the app, and its window must be on the same macOS Space as the terminal | Read-only mapping (map-app.sh), the dynamic screenshots.sh list/embed flow, and one-off captures of an already-visible window |
For course screenshots, drive this from inside the app, but do not use the host instance as the screenshot target. Launch the dedicated persona below, then use process-scoped Accessibility and capture. The shell scripts here run in both contexts because the app agent is built on Copilot CLI.
Regardless of context: pixels still come from screencapture (there is no pure render/export API yet, so the window must be visible), Screen Recording permission is required, captures must come from a sanitized training account on the training fork, and advanced features (Agent Merge, cloud automations) stay policy/billing-gated.
For each screenshot, launch a new app process from the persistent, signed-in
demo persona instead of creating a new persona or reusing an open process:
SK=.github/skills/github-copilot-app-automation/sample_codes/macos-accessibility
PERSONA="demo"
# The local clone of the training fork, not the upstream course repository.
REPO="$HOME/copilot-app-for-beginners"
COPILOT_PID="$(bash "$SK/prepare-persona.sh" "$PERSONA" "$REPO" 60)"
This keeps the existing login and persona data, starts a separate app process, sets only that window to a standard 1920x1080-point frame, resets the display zoom and zooms in three times (the zoom is measured and confirmed), enables and verifies Streamer Mode, verifies that the account is signed in, verifies the exact local repository, dismisses transient banners, and returns its process ID. If the repository is missing, the pre-step opens the exact folder through the native folder picker and verifies it before capture. A setup failure keeps the process for inspection and does not return a successful process ID. Do not select a target by app name when another Copilot instance is open. Do not use full screen: it can draw the menu bar and title bar over the app content.
To keep working on other displays during capture, set
COPILOT_CAPTURE_DISPLAY=builtin for both prepare-persona.sh and
capture-window.sh. The window then opens on the built-in laptop display and
zooms in twice instead of three times, because the laptop frame is smaller.
After setup, focus goes back to the app that you used before. The pointer is
not moved, and the capture does not activate the persona. Do not type during
the first launch seconds, and keep the laptop display on its current Space.
Before preparing the visible state, extract the Markdown around the image reference:
python3 "$SK/screenshot-context.py" <chapter>/README.md <image-name>
Use the section heading, instructions before the image, and instructions after the image to define the exact screen, open menu, selected item, and callouts. Do not capture a generic approximation. Confirm that current Accessibility labels agree with the text. If the app label changed, update the directly related course text before capture.
Add numbered red callouts when one screenshot shows two or more controls that
the reader must select in order. The nearby instructions must identify each
number, for example, "select + (callout 1), then select Add GitHub
repository (callout 2)." Do not add callouts to a single-action screenshot,
an output example, or an evidence screenshot. To point at one item without a
sequence, such as a menu item to select, use a red highlight box (--box)
instead. To point at one small status or control, such as a status pill, use a
red arrow (--arrow TAIL_X:TAIL_Y:HEAD_X:HEAD_Y). Recreate the callouts,
boxes, or arrows of an existing image when you retake it, at the new positions
of the same controls.
Keep the process ID and use it for all UI operations and capture. Do not use
navigate_to or other app/session APIs to prepare this window because those
APIs can route to the instance that hosts the agent. Drive the persona through
Accessibility selectors scoped to its process ID.
An isolated HOME does not isolate credentials stored in the macOS Keychain.
The persona can still show the current GitHub account name and avatar.
Process-specific capture automatically derives the visible profile name from
the accessibility tree and replaces that text with Copilot Dev. If an
account handle or repository owner matches the normalized profile name, it
replaces that text with copilotdev, including inside paths and branch names.
The macOS account name and machine name, which terminal prompts and paths can
show, become copilotdev and copilot-dev-mac. It preserves the avatar
and unrelated people and organizations. On a Settings screen, it also removes
the displayed app version. Never hard-code a person's name or an app version.
Never treat the persona name alone as proof that the capture is sanitized.
Zoom in on every replaced span: a partial replacement can leave letters of the
private name next to the new text.
If the user asks for a fresh, separate, or hidden Copilot App instance/session:
list_projects, create_session, send_session_message, get_session, and filesystem verification.navigate_to, foreground open -a, menu-bar actions, folder pickers, or Accessibility clicks unless the user explicitly asks to see the App UI.git init in the target folder) so the App can distinguish it from a parent repository.open -g -j -a "GitHub Copilot" <folder> and immediately verify with list_projects; if it does not register the project, stop and report the gap.screencapture; screenshot capture requires a visible window or a future App-provided render/export API. Do not switch the user's current App window just to satisfy a hidden screenshot request.Work in layers, from safest to most brittle:
Message, Select model, and Open changes.screencapture to save PNGs, then convert to WebP for web delivery./tmp or the session artifact directory.AXWebArea before each UI operation.screencapture fails or returns a privacy prompt, the automation caller also needs macOS Screen Recording permission.Observed on this machine:
/Applications/GitHub Copilot.appcom.github.githubappmap-app.sh; do not rely on a stored version/Applications/GitHub Copilot.app/Contents/MacOS/githubAfter macOS Accessibility permission was enabled, System Events could address the app as process GitHub Copilot.
Useful exposed controls (app 1.1.26; see app-ui-map.md for the full map):
| Control | Role | Use |
|---|---|---|
GitHub Copilot | AXWindow | Main app window |
GitHub Copilot | AXWebArea | Main webview-backed app content |
Sidebar | AXGroup | Sidebar region |
Toggle sidebar, Command + B | AXCheckBox | Collapse/expand sidebar |
New, Pull requests, Issues, Automations, Customize | AXButton | Sidebar views (Quick links) |
More | AXPopUpButton | Sidebar menu with Edit sidebar... |
New project or session | AXPopUpButton | Projects + menu |
New session in <project> | AXButton | Project-specific new session entry (visible on hover or focus) |
Message | AXTextArea | Prompt composer |
Project: <project> | AXComboBox | Composer project picker |
Workspace: <choice>, branch: <branch> | AXPopUpButton | Where to work menu |
Toggle panel, Command + Option + B | AXCheckBox | Review panel |
Add tab, Command + T | AXPopUpButton | Review panel tab menu |
See macos-accessibility.md for scripts and caveats.
AXWebArea children.Use:
AXTextArea name=Message.cleared-value is empty.Use type-and-clear-draft.applescript.
Only use this workflow when the user has agreed the App can be visible or when the target state is already visible in a dedicated App window. Capture from a sanitized training account on the training fork — never the user's real private projects.
screenshot-context.py for the referenced image and turn the nearby
course text into a concrete capture checklist. If you retake an existing
image, view the old image first and list its callouts, boxes, and crop.demo persona with
prepare-persona.sh. The pre-step sets a standard 1920x1080-point window,
resets zoom, zooms in three times, and enables and verifies Streamer Mode. It
fails closed if Streamer Mode or the zoom cannot be verified. Pass the exact
local training repository and keep the returned process ID. Turn off Siri
before you capture: its waveform orb can appear next to a focused text field,
and the capture script fails when it sees the orb.COPILOT_PID="$COPILOT_PID" map-app.sh so steps match
the current app build.prepare-copilot-state.swift for states that a named
action cannot create: focus shows a hover-only control (such as the +
on the Chats row), highlight-menu-item selects a menu item with the
keyboard (web menus ignore synthetic pointer moves), set-value fills a
field without pressing Return, and park moves the pointer and focus away
so no hover effects or focus rings remain.locate-copilot-element.swift, then capture the window owned by that process
ID and convert it to WebP. Pass callouts in instruction order, highlight
boxes, and an optional crop, all in final 1920x1080 coordinates:
bash sample_codes/macos-accessibility/capture-window.sh \
<chapter>/assets <base-name> 40 "$COPILOT_PID"
bash sample_codes/macos-accessibility/capture-window.sh \
00-setup/assets app-add-project 40 "$COPILOT_PID" \
--callout 1:372:338 --callout 2:585:437
bash sample_codes/macos-accessibility/capture-window.sh \
06-canvases/assets app-open-repo-issues-canvas 40 "$COPILOT_PID" \
--box 1287:266:1551:309 --crop 352:0:1920:700
#ff594b circle with a white number. Keep each badge at
least its radius plus 2 px from the image edge.#cccccc border inside its edges, and
that no window corner shows black pixels. The app window has transparent
rounded corners. Put an image on white before any RGB conversion or
resize, or the corners turn black. capture-window.sh stops if it finds
dark corner pixels.capture-window.sh
does this with hide-window-controls.py.cleanup-persona.sh only after the
capture is verified. Keep the signed-in persona for the next screenshot.To work through the course's pending shots, discover them dynamically and process one at a time (never hardcode the list): screenshots.sh list -> screenshots.sh next -> capture -> screenshots.sh embed. See missing-screenshots.md.
Use:
list / next / embed the chapters' <!-- app-screenshot: ... --> placeholdersprepare-persona.sh--callout, --box, --arrow, and --crop#cccccc inside border, and cropsPrefer session orchestration:
list_projects to find a project id.create_session to create a new isolated session.send_session_message to give that session work.get_session to inspect path and metadata.navigate_to only when the user explicitly wants to see the session.For test boards, dashboards, course trackers, or visible state, use canvas surfaces instead of GUI clicking. Canvases are bidirectional and can expose agent-callable actions. See canvas-and-automation.md.
| Goal | Best mechanism |
|---|---|
| Learn how sessions behave | Create separate sessions and compare outputs |
| Type/clear a prompt in the desktop UI | macOS Accessibility Message text area |
| Click a named app button | Accessibility by role/name/action |
| Capture a course screenshot | Accessibility window bounds + screencapture PNG + WebP conversion |
| Launch recurring experiments | App automations/workflows |
| Build a visible experiment dashboard | Canvas extension |
| Steer a CLI session away from machine | Copilot CLI remote control |
| Test PR/issue lifecycle | App session APIs plus GitHub issue/PR tools |
| Full native UI regression testing | Appium Mac2 after explicit setup |
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
Review changes in samples/book-app-web for accessibility, responsive layout, tests/build validation, and small beginner-safe changes.
日本語の概要は準備中です。原文の説明を表示しています。
Verify GitHub Copilot app screenshots match the course content. Use when running /check-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.
日本語の概要は準備中です。原文の説明を表示しています。
Wrap a raster image in an SVG and overlay a numbered red "step" circle for course screenshots. Use when running /create-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.
日本語の概要は準備中です。原文の説明を表示しています。
Rebuild or update the course overview video (about 98 seconds) for this course in videos/overview. Use when running /overview-video, or when asked to refresh the course overview video, add a chapter or feature to it, retake its dark-mode app screenshots, change its copy or timing, add music, or render a new MP4.
日本語の概要は準備中です。原文の説明を表示しています。