diff --git a/.github/scripts/build-visual-quickstart.js b/.github/scripts/build-visual-quickstart.js deleted file mode 100644 index 3f591cd9..00000000 --- a/.github/scripts/build-visual-quickstart.js +++ /dev/null @@ -1,56 +0,0 @@ -#!/usr/bin/env node -/** - * Build the docs visual quickstart site from its content file. - * - * Usage: - * npm run build:visual-quickstart - * - * Edit the words in docs/content.yaml, then run this to regenerate - * the HTML/CSS into docs/. Do NOT hand-edit the generated *.html - - * it is overwritten on every build. - * - * The rendering engine (SVG visual quickstart frames, speech bubbles, auto-placement, etc.) - * lives in the reusable visual-quickstart-generator skill; this is a thin launcher that - * points that engine at this repo's content file and output dir. - * - * Optional env overrides: - * VISUAL_QUICKSTART_SKILL_DIR path to the visual-quickstart-generator skill folder - */ - -const { spawnSync } = require('child_process'); -const { existsSync } = require('fs'); -const { join } = require('path'); -const os = require('os'); - -const repoRoot = join(__dirname, '..', '..'); // .github/scripts -> repo root -const docsDir = join(repoRoot, 'docs'); -const contentFile = join(docsDir, 'content.yaml'); - -const skillDir = - process.env.VISUAL_QUICKSTART_SKILL_DIR || - join(os.homedir(), '.copilot', 'skills', 'visual-quickstart-generator'); -const buildScript = join(skillDir, 'scripts', 'build_site.js'); - -if (!existsSync(buildScript)) { - console.error( - `\u2716 Visual quickstart engine not found at:\n ${buildScript}\n` + - 'Set VISUAL_QUICKSTART_SKILL_DIR to the visual-quickstart-generator skill folder, or install the skill.', - ); - process.exit(1); -} -if (!existsSync(contentFile)) { - console.error(`\u2716 Content file not found:\n ${contentFile}`); - process.exit(1); -} - -console.log(`Building visual quickstart from ${contentFile}`); -const result = spawnSync(process.execPath, [buildScript], { - stdio: 'inherit', - env: { ...process.env, VISUAL_QUICKSTART_DOCS: docsDir, VISUAL_QUICKSTART_CONTENT: contentFile }, -}); - -if (result.error) { - console.error(`\u2716 Failed to run the engine: ${result.error.message}`); - process.exit(1); -} -process.exit(result.status ?? 0); diff --git a/.github/scripts/watch-visual-quickstart.js b/.github/scripts/watch-visual-quickstart.js deleted file mode 100644 index d7d76f39..00000000 --- a/.github/scripts/watch-visual-quickstart.js +++ /dev/null @@ -1,54 +0,0 @@ -#!/usr/bin/env node -/** - * Watch docs/content.yaml and rebuild the visual quickstart site on every save. - * - * Usage: - * npm run watch:visual-quickstart - * - * Leave this running while you edit content.yaml. Each save regenerates the - * visual quickstart HTML/CSS (and re-optimizes images) automatically. Ctrl+C to stop. - * - * The watch loop, like the rest of the rendering/optimization engine, lives in the - * reusable visual-quickstart-generator skill; this is a thin launcher that points - * that engine at this repo's content file and output dir. - * - * Optional env overrides: - * VISUAL_QUICKSTART_SKILL_DIR path to the visual-quickstart-generator skill folder - */ - -const { spawnSync } = require('child_process'); -const { existsSync } = require('fs'); -const { join } = require('path'); -const os = require('os'); - -const repoRoot = join(__dirname, '..', '..'); // .github/scripts -> repo root -const docsDir = join(repoRoot, 'docs'); -const contentFile = join(docsDir, 'content.yaml'); - -const skillDir = - process.env.VISUAL_QUICKSTART_SKILL_DIR || - join(os.homedir(), '.copilot', 'skills', 'visual-quickstart-generator'); -const watchScript = join(skillDir, 'scripts', 'watch.js'); - -if (!existsSync(watchScript)) { - console.error( - `\u2716 Visual quickstart engine not found at:\n ${watchScript}\n` + - 'Set VISUAL_QUICKSTART_SKILL_DIR to the visual-quickstart-generator skill folder, or install the skill.', - ); - process.exit(1); -} -if (!existsSync(contentFile)) { - console.error(`\u2716 Content file not found:\n ${contentFile}`); - process.exit(1); -} - -const result = spawnSync(process.execPath, [watchScript], { - stdio: 'inherit', - env: { ...process.env, VISUAL_QUICKSTART_DOCS: docsDir, VISUAL_QUICKSTART_CONTENT: contentFile }, -}); - -if (result.error) { - console.error(`\u2716 Failed to run the engine: ${result.error.message}`); - process.exit(1); -} -process.exit(result.status ?? 0); diff --git a/.github/uvs.csv b/.github/uvs.csv index afeeaf6e..bdcfb483 100644 --- a/.github/uvs.csv +++ b/.github/uvs.csv @@ -116,3 +116,17 @@ "06/26",517 "06/27",241 "06/28",287 +"06/29",605 +"06/30",550 +"07/01",492 +"07/02",419 +"07/03",497 +"07/04",198 +"07/05",226 +"07/06",507 +"07/07",441 +"07/08",490 +"07/09",474 +"07/10",463 +"07/11",377 +"07/12",336 diff --git a/.github/views.csv b/.github/views.csv index 3ed062f9..16cf0161 100644 --- a/.github/views.csv +++ b/.github/views.csv @@ -115,3 +115,17 @@ "06/26",1066 "06/27",593 "06/28",590 +"06/29",1184 +"06/30",1116 +"07/01",1035 +"07/02",1032 +"07/03",1199 +"07/04",495 +"07/05",794 +"07/06",2370 +"07/07",2880 +"07/08",4565 +"07/09",4512 +"07/10",904 +"07/11",850 +"07/12",788 diff --git a/.github/workflows/deploy-pages.yml b/.github/workflows/deploy-pages.yml deleted file mode 100644 index 71a1b36c..00000000 --- a/.github/workflows/deploy-pages.yml +++ /dev/null @@ -1,43 +0,0 @@ -name: Deploy GitHub Pages - -on: - push: - branches: [main] - paths: - - 'docs/**' - workflow_dispatch: - -permissions: - contents: read - pages: write - id-token: write - -concurrency: - group: pages - cancel-in-progress: true - -env: - FORCE_JAVASCRIPT_ACTIONS_TO_NODE24: true - -jobs: - deploy: - runs-on: ubuntu-latest - environment: - name: github-pages - url: ${{ steps.deployment.outputs.page_url }} - - steps: - - name: Checkout - uses: actions/checkout@v4 - - - name: Setup Pages - uses: actions/configure-pages@v5 - - - name: Upload artifact - uses: actions/upload-pages-artifact@v3 - with: - path: docs - - - name: Deploy to GitHub Pages - id: deployment - uses: actions/deploy-pages@v4 diff --git a/01-setup-and-first-steps/README.md b/01-setup-and-first-steps/README.md index 39afb9ac..ba53741b 100644 --- a/01-setup-and-first-steps/README.md +++ b/01-setup-and-first-steps/README.md @@ -383,11 +383,14 @@ These commands are great to learn initially as you're getting started with Copil | `/help` | Show all available commands | When you forget a command | | `/model` | Show or switch AI model | When you want to change the AI model | | `/plan` | Plan your work out before coding | For more complex features | +| `/refine` | Rewrite a rough, stream-of-consciousness prompt into a clear, focused one | When your prompt feels messy and you want better results | | `/research` | Deep research using GitHub and web sources | When you need to investigate a topic before coding | | `/exit` | End the session | When you're done | > πŸ’‘ **`/ask` vs regular chat**: Normally every message you send becomes part of the ongoing conversation and affects future responses. `/ask` is an "off the record" shortcut β€” perfect for quick one-off questions like `/ask What does YAML mean?` without polluting your session context. +> πŸ’‘ **`/refine` for better prompts**: Not sure if your prompt is clear enough? Type it out as it comes to mind, then run `/refine` to let Copilot rewrite it into a precise, well-structured prompt before sending. This is especially useful when you're new to AI tools and still learning how to write effective prompts. + > πŸ’‘ **Tab-completion**: When typing a slash command, press **Tab** to auto-complete the command name or cycle through available subcommands and arguments. This is especially handy when you can't remember the exact name of a command. That's it for getting started! As you become comfortable, you can explore additional commands. @@ -666,7 +669,7 @@ The examples used `/plan` for a search feature and `-p` for batch reviews. Now t |---------|--------------|-----| | Typing `exit` instead of `/exit` | Copilot CLI treats "exit" as a prompt, not a command | Slash commands always start with `/` | | Using `-p` for multi-turn conversations | Each `-p` call is isolated with no memory of previous calls | Use interactive mode (`copilot`) for conversations that build on context | -| Forgetting quotes around prompts with `$` or `!` | Shell interprets special characters before Copilot CLI sees them | Wrap prompts in quotes: `copilot -p "What does $HOME mean?"` | +| Forgetting quotes around prompts with `$` or `!` | Shell interprets special characters before Copilot CLI sees them | Wrap prompts in single quotes: `copilot -p 'What does $HOME mean?'` | | Pressing Esc once to cancel a running task | A single Esc no longer cancels in-flight work (to prevent accidents) | Press **Esc twice** to cancel while Copilot CLI is processing | ### Troubleshooting diff --git a/04-agents-custom-instructions/README.md b/04-agents-custom-instructions/README.md index 8494273a..44c93a93 100644 --- a/04-agents-custom-instructions/README.md +++ b/04-agents-custom-instructions/README.md @@ -486,6 +486,22 @@ Here are some common patterns: > πŸ’‘ **Tip**: Wrap the glob pattern in quotes (e.g., `"**/*.py"`) to ensure it is interpreted correctly across all operating systems and shells. +#### Importing Other Files with `@` + +You can reference another file inside `AGENTS.md` or any instruction file using `@filepath` syntax. Copilot expands the reference and includes that file's content automatically, so you can keep your main file short while storing the details elsewhere: + +```markdown + +# Project Instructions + +@.github/instructions/python-standards.instructions.md +@.github/instructions/test-standards.instructions.md +``` + +This is handy when your instructions grow large. Split them into focused files and `@`-import them from a single `AGENTS.md`. The same syntax works inside `.github/copilot-instructions.md` and other instruction files too. + +> πŸ’‘ **Tip**: Use `@`-imports to share a common base file across multiple instruction files. For example, you could have a `@.github/instructions/shared-rules.md` that every other instruction file pulls in. + **Finding community instruction files**: Browse [github/awesome-copilot](https://github.com/github/awesome-copilot) for pre-made instruction files covering .NET, Angular, Azure, Python, Docker, and many more technologies. ### Disabling Custom Instructions diff --git a/06-mcp-servers/README.md b/06-mcp-servers/README.md index abac856c..bfbc7f80 100644 --- a/06-mcp-servers/README.md +++ b/06-mcp-servers/README.md @@ -924,6 +924,7 @@ These work when you're already inside `copilot`: | Command | What It Does | |---------|--------------| | `/mcp show` | Show all configured MCP servers and their status | +| `/mcp list` | Show currently attached MCP servers and their status; can be run while Copilot is working | | `/mcp add` | Interactive setup for adding a new server | | `/mcp edit ` | Edit an existing server configuration | | `/mcp enable ` | Enable a disabled server (persists across sessions) | diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css deleted file mode 100644 index 07ad78c9..00000000 --- a/docs/assets/css/style.css +++ /dev/null @@ -1,469 +0,0 @@ -/* - AUTO-GENERATED - DO NOT EDIT THIS FILE. - It is regenerated by the visual-quickstart-generator skill (build_site.js) and your - edits here will be overwritten on the next build. - - How to make changes: - - WORDS (page/tab titles, nav labels, site chrome, subtitle, CTA, footer, - captions, character dialogue, terminal commands, chapter list): edit - docs/content.yaml (see its top-level `site:` section) - - STYLES (CSS): edit templates/style.css in the skill - - HTML STRUCTURE / layout: edit the page templates in build_site.js - (index_page / chapter_page / banner / nav / panel) - - Then rebuild: npm run build:visual-quickstart -*/ -:root{ - --ink:#1f2937; --cream:#fdf3df; --card:#fce9c7; --teal:#0c7a7a; --accent:#be123c; - --focus:#0b66c2; - --shadow:0 14px 34px rgba(31,41,55,.16); -} -*{box-sizing:border-box} -body{margin:0;font-family:'Poppins',Verdana,Segoe UI,sans-serif;color:var(--ink); - background:#ffffff; - min-height:100vh} -a{color:var(--teal)} -/* visually-hidden helper (still exposed to assistive tech) */ -.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; - clip:rect(0,0,0,0);white-space:nowrap;border:0} -/* skip-to-content link: off-screen until focused, then pinned top-left */ -.skip-link{position:fixed;left:8px;top:-100px;z-index:60;background:#fff;color:var(--ink); - font-weight:700;padding:12px 18px;border-radius:10px;text-decoration:none; - border:2px solid var(--focus);box-shadow:0 8px 24px rgba(0,0,0,.25); - transition:top .15s ease} -.skip-link:focus{top:8px} -/* consistent keyboard focus indicators across interactive controls */ -.nav-home:focus-visible,.chapter-select summary:focus-visible, -.cs-options a:focus-visible,.skip-link:focus-visible,.foot a:focus-visible{ - outline:3px solid var(--focus);outline-offset:2px} -.nav-btn:focus-visible,.cta:focus-visible{ - outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 6px var(--focus)} -/* chapter banner (Option 2) - full-width band, content centered */ -.banner-wrap{position:relative;width:100%;overflow:hidden;color:#fff; - background:linear-gradient(125deg,#11999e 0%,#0a6a72 52%,#0a4f63 100%); -} -.banner-wrap::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background: - radial-gradient(600px 300px at 82% -28%,rgba(255,255,255,.16),transparent 70%), - radial-gradient(440px 280px at -3% 130%,rgba(232,112,42,.28),transparent 70%)} -.banner{position:relative;z-index:2;max-width:920px;margin:0 auto; - padding:38px 188px 38px 44px} -.banner>*{position:relative;z-index:2} -.banner .chip{display:inline-block;background:rgba(255,255,255,.15); - border:1px solid rgba(255,255,255,.28);padding:7px 16px;border-radius:999px; - font:700 12px/1 'Poppins',sans-serif;letter-spacing:.18em} -.banner h1{font:700 clamp(2rem,5.4vw,3.2rem)/1.03 'Space Grotesk','Poppins',sans-serif; - margin:.42em 0 .14em;letter-spacing:-.5px} -.banner .b-sub{color:rgba(255,255,255,.88);max-width:540px;margin:0;font-size:1.05rem} -.banner-wrap .b-track{position:absolute;top:0;left:0;z-index:3;height:6px;width:100%; - margin:0;border-radius:0;overflow:hidden;background:rgba(255,255,255,.22)} -.banner-wrap .b-track i{display:block;height:100%;border-radius:0; - background:linear-gradient(90deg,#ffd27a,#e8702a)} -.banner .pipav{position:absolute;right:26px;top:50%;transform:translateY(-50%); - width:150px;height:150px;object-fit:cover;border-radius:50%; - border:4px solid rgba(255,255,255,.9);box-shadow:0 14px 30px rgba(0,0,0,.28)} -@media(max-width:600px){ - .banner{display:flex;flex-direction:column;align-items:center; - padding:30px 26px 26px;text-align:center} - .banner .pipav{order:-1;position:static;transform:none; - margin:0 0 16px;width:104px;height:104px} -} -/* nav */ -.nav{display:flex;gap:12px;justify-content:center;align-items:center; - flex-wrap:wrap;padding:18px 16px;position:sticky;top:0;z-index:5; - background:linear-gradient(#ffffff,rgba(255,255,255,.86) 70%,rgba(255,255,255,0))} -.nav-btn,.nav-home{display:inline-block;text-decoration:none;font-weight:600; - padding:11px 20px;border-radius:999px} -.nav-btn{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(15,138,138,.32)} -.nav-btn:hover{filter:brightness(1.06);transform:translateY(-1px)} -.nav-home{background:#fff;border:2px solid var(--ink);color:var(--ink)} -.nav-btn.disabled{background:#cfc8b8;color:#fff;box-shadow:none;cursor:default} -.nav-lbl-short{display:none} -@media(max-width:540px){ - .nav{gap:8px;padding:14px 10px} - .nav-btn,.nav-home{padding:11px 18px;font-size:.98rem} - .nav-lbl-full{display:none} - .nav-lbl-short{display:inline} -} -/* comic strip */ -.strip{max-width:920px;margin:0 auto;padding:8px 18px 40px; - display:flex;flex-direction:column;gap:34px} -.cell{position:relative;margin:0;background:var(--card);border-radius:22px; - padding:14px;box-shadow:var(--shadow)} -.cell.quiz-cell{background:none;padding:0;box-shadow:none;border-radius:0} -.cell .panel{display:block;width:100%;height:auto;border-radius:12px} -.cap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-weight:700; - font-size:1.325rem;color:var(--ink);margin:2px 4px 12px;padding-left:24px;line-height:1.25} -.cap-title{flex:1 1 auto;min-width:0} -.badge{position:absolute;top:-14px;left:-14px;z-index:2;width:46px;height:46px; - display:grid;place-items:center;border-radius:50%;background:var(--accent); - color:#fff;font-weight:800;font-size:1.25rem;border:4px solid #fff; - box-shadow:0 2px 5px rgb(0 0 0 / 40%)} -/* 'Read in course' deep-link pill, right-aligned on the caption row */ -.cap-link{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:7px; - white-space:nowrap;font-size:.86rem;font-weight:600;line-height:1;color:var(--teal); - text-decoration:none;background:#fff;border:2px solid #e7dcc4;border-radius:999px; - padding:7px 14px;box-shadow:0 3px 10px rgba(31,41,55,.08); - transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease} -.cap-link:hover{background:var(--teal);color:#fff;border-color:var(--teal);transform:translateY(-1px)} -.cap-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px} -.cap-ico{width:17px;height:17px;flex:0 0 auto} -.cap-arrow{font-size:1.05em;line-height:1} -.foot{text-align:center;color:#6c6657;font-size:.92rem;padding:26px 18px 46px} -/* home */ -body.home{display:flex;flex-direction:column;min-height:100vh} -.home-banner{display:flex;align-items:center;gap:34px;padding:40px 44px} -.home-banner .b-copy{min-width:0;flex:1} -.home-banner .home-av{flex:0 0 auto;width:170px;height:170px;object-fit:cover; - border-radius:50%;border:4px solid rgba(255,255,255,.9); - box-shadow:0 14px 30px rgba(0,0,0,.28)} -.home-banner h1{margin:.28em 0 .2em} -.home-banner .b-sub{font-size:1.06rem;max-width:none;margin-bottom:24px} -.home-banner .cta{margin-top:4px} -@media(max-width:760px){ - .home-banner{flex-direction:column;text-align:center;padding:32px 26px} - .home-banner .home-av{order:-1;width:120px;height:120px;margin-bottom:6px} - .home-banner .b-sub{margin-left:auto;margin-right:auto} -} -.home-main{flex:1;width:100%;max-width:920px;margin:0 auto;padding:20px 20px 40px; - display:flex;flex-direction:column} -.home-intro{margin:6px 0 0} -.home-intro .cap{justify-content:center;text-align:center;padding-left:0;font-size:1.40rem} -.home-intro .cap-title{flex:0 1 auto} -.intro-cta{text-align:center;margin:24px auto 0} -.intro-cta .cta{border:3px solid #fff;box-shadow:0 10px 24px rgba(0,0,0,.40)} -.intro-cta .cta:hover{transform:translateY(-2px)} -.cta{display:inline-block;background:var(--accent);color:#fff;text-decoration:none; - font-weight:700;font-size:1.12rem;padding:14px 30px;border-radius:999px; - box-shadow:0 10px 22px rgba(190,18,60,.4)} -.cta:hover{transform:translateY(-2px)} -/* custom chapter selector */ -.chapter-select{position:relative;max-width:560px;width:100%;margin:26px auto 0} -.chapter-select summary{list-style:none;cursor:pointer;display:flex;align-items:center; - justify-content:space-between;background:#fff;border:2px solid #efe4cb;border-radius:16px; - padding:18px 24px;font-weight:700;font-size:1.14rem;color:var(--ink); - box-shadow:0 6px 16px rgba(31,41,55,.08);transition:border-color .2s} -.chapter-select summary::-webkit-details-marker{display:none} -.chapter-select summary::after{content:"";flex:0 0 auto;width:11px;height:11px; - border-right:3px solid var(--teal);border-bottom:3px solid var(--teal); - transform:rotate(45deg);transition:transform .25s;margin-left:14px} -.chapter-select[open] summary::after{transform:rotate(-135deg)} -.chapter-select summary:hover{border-color:var(--teal)} -.cs-options{position:fixed;z-index:30; - background:#fff;border:2px solid #efe4cb;border-radius:16px;padding:8px; - max-height:min(56vh,360px);overflow-y:auto;-webkit-overflow-scrolling:touch; - box-shadow:0 20px 44px rgba(31,41,55,.22)} -.cs-options a,.cs-soon{display:flex;flex-direction:column;gap:2px;text-decoration:none; - border-radius:11px;padding:13px 16px;color:var(--ink)} -.cs-options a:hover{background:#f4eddf} -.cs-options b{font-size:1.08rem} -.cs-options a span,.cs-soon span{color:#6c6657;font-weight:500;font-size:.95rem} -.cs-soon{opacity:.55;cursor:default} -@media(max-width:600px){ - .strip{padding:4px 8px 28px;gap:20px} - .cell{padding:8px;border-radius:16px} - .cap{font-size:1.225rem;padding-left:28px;margin:2px 4px 8px} - .home-main{padding:14px 8px 32px} - .badge{width:38px;height:38px;font-size:1.05rem;top:-12px;left:-8px} - .cap-link{font-size:.8rem;padding:6px 12px} -} -/* ===== starter engagement layer: typewriter - copy ===== */ -/* per-command copy buttons: real HTML -
-
1
Chapter 00 - Learning Objectives
In this chapter you will:- Install Copilot CLI- Sign in to your GitHub account- Clone the course samples and run the book app
-
2
Install the CLILearn more
Got Node.js or Homebrew? Onecommand and you're up and running!
-
3
Sign in securelyLearn more
Run copilot,then type /login to sign in.Lines after > are typed insideCopilot, not your shell.
-
4
Clone the sample projectLearn more
Grab the course samples so youhave samples to work with!
-
5
Verify it worksLearn more
Run the sample book app (you'll need Python installed).See 5 books? You're good to go!
-
Quick check

Which command signs you in to Copilot CLI from inside the tool?

-
6
You're ready!
Setup complete! The realfun starts in Chapter 01.Well done. Youearned this trophy!
-
- - -
- - - - - - diff --git a/docs/chapter-01.html b/docs/chapter-01.html deleted file mode 100644 index 4bdab9e2..00000000 --- a/docs/chapter-01.html +++ /dev/null @@ -1,457 +0,0 @@ - - - - - - -First Steps - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 01 - Learning Objectives
In this chapter you will:- Try a quick code review- Learn the three interaction modes- Use key slash commands- Approve the actions Copilot takes
-
2
Chapter 01 - The magic beginsLearn more
Just ask copilot to help you in plain English.Watch what happens!No secret syntax to learn.Say it your way!
-
3
Demo - Code review in secondsLearn more
Point me at a file and I'llspot bugs and quality issues!
-
4
Copilot asks before it actsLearn more
Before I run a command or edita file, I pause and ask you.Approve once, or allow allin projects you trust.
-
5
Three modes: plan, interactive, or programmaticLearn more
Plan = a GPS route.Interactive = a waiter chat.Programmatic = a drive-through.I'll pick the onethat fits the job.
-
6
Interactive: chat and iterateLearn more
I remember your chat, so eachprompt builds on the last.
-
7
Plan: map it out firstLearn more
I create a plan with steps.Once the plan is in place, I can use itto guide my coding.
-
8
Programmatic: one-shot answersLearn more
Like a drive-through: one order in,one answer out. Great for scripts.
-
9
Control your sessionLearn more
Forgot a command?Type /help.Switching topics?Use /clear.All done?Type /exit!
-
Quick check

You want a single, scripted answer with no back-and-forth. Which mode fits?

-
10
On to Chapter 02!
Next: give me contextwith the @ symbol.See you in Chapter 02!Keep going -you're doing great!
-
- - -
- - - - - - diff --git a/docs/chapter-02.html b/docs/chapter-02.html deleted file mode 100644 index 3b33373b..00000000 --- a/docs/chapter-02.html +++ /dev/null @@ -1,457 +0,0 @@ - - - - - - -Context and Conversations - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 02 - Learning Objectives
In this chapter you will:- Point Copilot at files with the @ symbol- Resume sessions and use persistent memory- Manage the context window
-
2
Give Copilot contextLearn more
Copilot is not a mind reader.Tell it which files to focus on!Context turns a guessinto a real answer.
-
3
Point with the @ symbolLearn more
Type @ followed by a file or folderto point Copilot right at the code.
-
4
Cross-file intelligenceLearn more
Point at many files at once.I spot bugs that hide between them.
-
5
Resume any conversationLearn more
Stopped for the day?Pick up where you left off.Sessions save automatically.Nothing is lost.
-
6
Memory that spans every sessionLearn more
Memory recalls my preferencesacross all my sessions.Tell it once -it carries forward.
-
7
What is context?Learn more
Different from memory: memory carries across all your sessions.Context is for this conversation, in a limited window that you can manage.Context is everythingI'm holding in mindright now.Your chat, plus thefiles you've shown me.
-
8
Manage the context windowLearn more
Context window filling up? Compact it,clear it, or start a new session.
-
9
Debug with screenshotsLearn more
Stuck on a UI bug? Point meat a screenshot to see it.
-
Quick check

What does the @ symbol do in a Copilot prompt?

-
10
On to Chapter 03!
Next: everyday dev workflows -review, refactor, debug, test, and ship.Keep going -you're doing great!
-
- - -
- - - - - - diff --git a/docs/chapter-03.html b/docs/chapter-03.html deleted file mode 100644 index c3d939bd..00000000 --- a/docs/chapter-03.html +++ /dev/null @@ -1,555 +0,0 @@ - - - - - - -Development Workflows - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 03 - Learning Objectives
In this chapter you will:- Review, refactor, and debug code- Generate tests for your code- Ship changes with git commits and PRs
-
2
Five developer workflowsLearn more
Five everyday jobs: review,refactor, debug, test, ship.Pick the workflowthat fits the task.
-
3
Code reviewLearn more
Here's the actual code Copilot reviews.Or use /review for a focused check (more soon).Point me at a file and Iflag bugs and quality issues.
book_app.py
import sys
-from books import BookCollection
-
-
-# Global collection instance
-collection = BookCollection()
-
-
-def show_books(books):
-    """Display books in a user-friendly format."""
-    if not books:
-        print("No books found.")
-        return
-
-    print("\nYour Book Collection:\n")
-
-    for index, book in enumerate(books, start=1):
-        status = "βœ“" if book.read else " "
-        print(f"{index}. [{status}] {book.title} by {book.author} ({book.year})")
-
-    print()
-
-
-def handle_list():
-    books = collection.list_books()
-    show_books(books)
-
-
-def handle_add():
-    print("\nAdd a New Book\n")
-
-    title = input("Title: ").strip()
-    author = input("Author: ").strip()
-    year_str = input("Year: ").strip()
-
-    try:
-        year = int(year_str) if year_str else 0
-        collection.add_book(title, author, year)
-        print("\nBook added successfully.\n")
-    except ValueError as e:
-        print(f"\nError: {e}\n")
-
-
-def handle_remove():
-    print("\nRemove a Book\n")
-
-    title = input("Enter the title of the book to remove: ").strip()
-    collection.remove_book(title)
-
-    print("\nBook removed if it existed.\n")
-
-
-def handle_find():
-    print("\nFind Books by Author\n")
-
-    author = input("Author name: ").strip()
-    books = collection.find_by_author(author)
-
-    show_books(books)
-
-
-def show_help():
-    print("""
-Book Collection Helper
-
-Commands:
-  list     - Show all books
-  add      - Add a new book
-  remove   - Remove a book by title
-  find     - Find books by author
-  help     - Show this help message
-""")
-
-
-def main():
-    if len(sys.argv) < 2:
-        show_help()
-        return
-
-    command = sys.argv[1].lower()
-
-    if command == "list":
-        handle_list()
-    elif command == "add":
-        handle_add()
-    elif command == "remove":
-        handle_remove()
-    elif command == "find":
-        handle_find()
-    elif command == "help":
-        show_help()
-    else:
-        print("Unknown command.\n")
-        show_help()
-
-
-if __name__ == "__main__":
-    main()
-
-
4
Refactor with confidenceLearn more
Messy code? I reshape itwithout changing what it does.
-
5
The bug detectiveLearn more
Show me the error and the file.I track the bug down.
-
6
Test your codeLearn more
I write the tests -you run pytest.Tests are your safety net.Always run them to keepyour agentic workflow on track.
-
7
Ship it with gitLearn more
I review your changes andwrite your commit message.
-
8
Open a pull requestLearn more
Done? Type /pr and I'll open apull request for your branch -right from the CLI.
-
9
Delegate work to the backgroundLearn more
Hand off a task to GitHub cloud agentand it'll work on it inthe background and open a PR.
-
Quick check

Which Copilot CLI command opens a pull request for your current branch?

-
10
On to Chapter 04!
Next: hire built-in and custom agents,and set standards with AGENTS.md.See you in Chapter 04!Keep going -you're doing great!
-
- - -
- - - - - - diff --git a/docs/chapter-04.html b/docs/chapter-04.html deleted file mode 100644 index 87dc52d4..00000000 --- a/docs/chapter-04.html +++ /dev/null @@ -1,554 +0,0 @@ - - - - - - -Agents and Custom Instructions - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 04 - Learning Objectives
In this chapter you will:- Pick built-in and custom agents- Combine specialist agents on a task- Set standards with AGENTS.md and instruction files
-
2
What is an agent?Learn more
Like calling a plumber, electrician, or painter - the right pro for each job.An agent is a specialistI can hire for a job.Each is an expert atone kind of task.
-
3
Pick an agent with /agentLearn more
Type /agent, thenpick one from the list.
-
4
Built-in agentsLearn more
Some agents are built in.Just type a slash command.
-
5
Make your own agentLearn more
A custom agent is just a markdown file you write.Write your own custom agentin a simple markdown file.
python-reviewer.agent.md
---
-name: python-reviewer
-description: Python code quality specialist for reviewing Python projects
-tools: ["read", "edit", "search"]
----
-
-# Python Code Reviewer
-
-You are a Python specialist focused on code quality and best practices.
-
-## Your Expertise
-
-- Python 3.10+ features (dataclasses, type hints, match statements)
-- PEP 8 style compliance
-- Error handling patterns (try/except, custom exceptions)
-- File I/O and JSON handling best practices
-
-## Code Standards
-
-When reviewing, always check for:
-- Missing type hints on function signatures
-- Bare except clauses (should catch specific exceptions)
-- Mutable default arguments
-- Proper use of context managers (with statements)
-- Input validation completeness
-
-## When Reviewing Code
-
-Prioritize:
-- [CRITICAL] Security issues and data corruption risks
-- [HIGH] Missing error handling
-- [MEDIUM] Style and type hint issues
-- [LOW] Minor improvements
-
-
6
Agents work as a teamLearn more
Big task? Several specialistagents team up on it.Each handles the partit knows best.
-
7
Set up your project with /initLearn more
New project? Run /init and Iscaffold your config files for you.
-
8
Target rules to file typesLearn more
Example: .github/instructions/python-standards.instructions.mdTo apply it to a specific file type, use the applyTo field.Example: applyTo: "**/*.py".Each .instructions.md fileapplies to the files you choose.
python-standards.instructions.md
---
-applyTo: "**/*.py"
----
-
-# Python Standards
-
-These rules apply automatically whenever Copilot works on a Python file in
-this project. They never load for other file types, so a conversation about a
-Dockerfile or some JSON stays clutter-free.
-
-## Style
-
-- Follow PEP 8 style conventions.
-- Add type hints to every function signature.
-- Prefer f-strings over `%` formatting or `str.format()`.
-
-## Error Handling
-
-- Catch specific exceptions; never use a bare `except:`.
-- Validate inputs at function boundaries and fail with a clear message.
-
-## Testing
-
-- Put pytest tests in `samples/book-app-project/tests/` using `test_*.py` naming.
-- Cover the happy path and edge cases (empty input, missing data).
-
-
9
Set project standards onceLearn more
Add an AGENTS.md file to your repo.Copilot reads and follows it automatically.Put your rules in AGENTS.md.Set standards once -Copilot follows them.
AGENTS.md
# AGENTS.md
-
-Beginner-friendly course teaching GitHub Copilot CLI. Educational content, not software.
-
-## Structure
-
-| Path | Purpose |
-|------|---------|
-| `00-07/` | Chapters: analogy β†’ concepts β†’ hands-on β†’ assignment β†’ next |
-| `samples/book-app-project/` | **Primary sample**: Python CLI book collection app used throughout all chapters |
-| `samples/book-app-project-cs/` | C# version of the book collection app |
-| `samples/book-app-project-js/` | JavaScript version of the book collection app |
-| `samples/book-app-buggy/` | **Intentional bugs** for debugging exercises (Ch 03) |
-| `samples/agents/` | Agent template examples (python-reviewer, pytest-helper, hello-world) |
-| `samples/skills/` | Skill template examples (code-checklist, pytest-gen, commit-message, hello-world) |
-| `samples/mcp-configs/` | MCP server configuration examples |
-| `samples/buggy-code/` | **Optional extra**: Security-focused buggy code (JS and Python) |
-| `samples/src/` | **Optional extra**: Legacy JS/React samples from earlier course version |
-| `appendices/` | Supplementary reference material |
-
-## Do
-
-- Keep explanations beginner-friendly; explain AI/ML jargon when used
-- Ensure bash examples are copy-paste ready
-- Tone: friendly, encouraging, practical
-- Use `samples/book-app-project/` paths in all primary examples
-- Use Python/pytest context for code examples
-
-## Don't
-
-- Fix bugs in `samples/book-app-buggy/` or `samples/buggy-code/` β€” they're intentional
-- Add chapters without updating README.md course table
-- Assume readers know AI/ML terminology
-
-## Build
-
-```bash
-npm install && npm run release
-```
-
-
Quick check

How do you list and pick an agent in Copilot CLI?

-
10
On to Chapter 05!
Next: skills - teach Copilotrepeatable tasks you can reuse.See you in Chapter 05!Keep going -you're doing great!
-
- - -
- - - - - - diff --git a/docs/chapter-05.html b/docs/chapter-05.html deleted file mode 100644 index d8d0bdaa..00000000 --- a/docs/chapter-05.html +++ /dev/null @@ -1,504 +0,0 @@ - - - - - - -Skills - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 05 - Learning Objectives
In this chapter you will:- Use skills automatically or by name- Build your own skill- Tell agents, skills, and MCP apart
-
2
Skills are power toolsLearn more
Skills are swappabledrill bits for a task.The right bitmakes the job easy.
-
3
Skills apply automaticallyLearn more
Describe the job and thematching skill kicks in.For example, check for code qualityand the code-checklist skill will run.
-
4
Or call one by nameLearn more
Want a specific skill?Call it with a slash.
-
5
Build your own skillLearn more
A SKILL.md just needs a description and instructions.The description should explain when the skill should be used.Make your own skill witha short SKILL.md file.Teach it once,reuse it forever.
code-checklist/SKILL.md
---
-name: code-checklist
-description: Team code quality checklist - use for checking Python code quality, bugs, security issues, and best practices
----
-
-# Code Checklist Skill
-
-Apply this checklist when checking Python code.
-
-## Code Quality Checklist
-
-- [ ] All functions have type hints
-- [ ] No bare except clauses
-- [ ] No mutable default arguments
-- [ ] Context managers used for file I/O
-- [ ] Functions are under 50 lines
-- [ ] Variable and function names follow PEP 8 (snake_case)
-
-## Input Validation Checklist
-
-- [ ] User input is validated before processing
-- [ ] Edge cases handled (empty strings, None, out-of-range values)
-- [ ] Error messages are clear and helpful
-
-## Testing Checklist
-
-- [ ] New code has corresponding pytest tests
-- [ ] Edge cases are covered
-- [ ] Tests use descriptive names
-
-## Output Format
-
-Present findings as:
-
-```
-## Code Checklist: [filename]
-
-### Code Quality
-- [PASS/FAIL] Description of finding
-
-### Input Validation
-- [PASS/FAIL] Description of finding
-
-### Testing
-- [PASS/FAIL] Description of finding
-
-### Summary
-[X] items need attention before merge
-```
-
-
6
Install community skillsLearn more
Don't build every skill yourself -install a ready-made one!
-
7
Agents vs Skills vs MCPLearn more
Agent = broad expertiseSkill = task stepsMCP = live data from services (see Chapter 06)Agents reason and orchestrateSkills provide the know-howMCP delivers the tools and connections.The right toolfor each job.
-
Quick check

How do you run a specific skill on demand?

-
8
On to Chapter 06!
Next: MCP servers connect Copilotto GitHub, files, and live docs.See you in Chapter 06!Keep going -you're doing great!
-
- - -
- - - - - - diff --git a/docs/chapter-06.html b/docs/chapter-06.html deleted file mode 100644 index 22782eae..00000000 --- a/docs/chapter-06.html +++ /dev/null @@ -1,454 +0,0 @@ - - - - - - -MCP Servers - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 06 - Learning Objectives
In this chapter you will:- See what MCP servers add- Use the GitHub server and pull in live docs- Add more servers and combine them
-
2
MCP adds superpowersLearn more
MCP servers are likebrowser extensions.Each one plugs ina new power.
-
3
GitHub MCP is built inLearn more
The GitHub server is builtin - no setup needed.
-
4
Pull in live docsLearn more
Need current library docs?A docs server fetches them live.
-
5
Add more serversLearn more
Browse the registry andadd servers in seconds.
-
6
Many servers, one workflowLearn more
Files, docs, and GitHub -all in one chat.Many servers,one smooth flow.
-
Quick check

Which MCP server is built into Copilot CLI with no setup required?

-
7
On to Chapter 07!
Next: put it all together -go from an idea to a tested,reviewed pull request.The finish line -let's bring it home!
-
- - -
- - - - - - diff --git a/docs/chapter-07.html b/docs/chapter-07.html deleted file mode 100644 index 2fca3e7f..00000000 --- a/docs/chapter-07.html +++ /dev/null @@ -1,452 +0,0 @@ - - - - - - -Putting It Together - Pip's Copilot CLI Comic - - - - - - - - - - - - -
-
1
Chapter 07 - Learning Objectives
In this chapter you will:- Combine agents, skills, and MCP together- Plan, build, and test a feature- Go from an idea to a merged pull request
-
2
Conduct the orchestraLearn more
You are the conductor.Copilot is the orchestra.You lead - thetools play along.
-
3
Idea to merged PRLearn more
Start with an idea, endwith a merged pull request.
-
4
Plan, build, test, shipLearn more
Plan it, build it, test it,then ship it.
-
Quick check

What's a smart first step before building a larger feature?

-
5
You did it!
You made it to theend. Amazing work!Now go buildsomething great!
-
- - -
- - - - - - diff --git a/docs/content.schema.json b/docs/content.schema.json deleted file mode 100644 index b9837dd8..00000000 --- a/docs/content.schema.json +++ /dev/null @@ -1,330 +0,0 @@ -{ - "$schema": "http://json-schema.org/draft-07/schema#", - "$id": "https://github.com/github/copilot-cli-for-beginners/comic-content.schema.json", - "title": "Comic site content", - "description": "Content for the visual-quickstart-generator engine (build_site.js). This file is the source of truth for every editable word; the engine hard-codes none.", - "type": "object", - "additionalProperties": false, - "required": ["site", "home", "footer_html", "chapters"], - "properties": { - "site": { "$ref": "#/definitions/site" }, - "home": { "$ref": "#/definitions/home" }, - "footer_html": { - "type": "string", - "description": "Footer HTML (raw, inserted as-is - typically a link)." - }, - "chapters": { - "type": "array", - "description": "Ordered list of chapters; index 0 -> chapter-00.html, etc.", - "minItems": 1, - "items": { "$ref": "#/definitions/chapter" } - }, - "art": { "$ref": "#/definitions/art" } - }, - "definitions": { - "art": { - "type": "object", - "description": "Project image-generation config (cast, style, brand/logo, per-image logo placement, recolor rules). Consumed by the art tools (gen2.js, relogo.js, recolor.js, render_logo.js); the site engine ignores it.", - "additionalProperties": true, - "properties": { - "style": { "type": "string", "description": "Shared STYLE block prefixed to every generation prompt (art style, palette, reserved top/bottom bands, 'no text')." }, - "scene_suffix": { "type": "string", "description": "Phrase appended after the cast in every prompt (e.g. 'Clean composition with proper margins...')." }, - "size": { "type": "string", "description": "Generated image size, e.g. '1536x1024' (must match the engine viewBox)." }, - "cast": { - "type": "object", - "description": "Map of character key -> fixed spec paragraph, reused verbatim in every prompt for consistency.", - "additionalProperties": { "type": "string" } - }, - "presets": { - "type": "object", - "description": "Map of preset key (gen2.js's first arg) -> which characters to include + a joining phrase.", - "additionalProperties": { - "type": "object", - "additionalProperties": false, - "properties": { - "characters": { "type": "array", "items": { "type": "string" }, "description": "Cast keys to include, in order." }, - "join": { "type": "string", "description": "Phrase appended after the character specs (e.g. relative sizing notes)." } - } - } - }, - "logo": { - "type": "object", - "additionalProperties": true, - "description": "Brand logo: asset path, SVG path for render_logo.js, deboss inpaint prompt, skip list, and per-image placement.", - "properties": { - "asset": { "type": "string", "description": "Logo PNG path relative to the working base (skill or VISUAL_QUICKSTART_BASE)." }, - "svg_path": { "type": "string", "description": "SVG path data for render_logo.js to rasterize the white logo." }, - "deboss_prompt": { "type": "string", "description": "Inpaint prompt used by relogo.js clean to remove a baked-in emblem." }, - "down": { "type": "number", "description": "Optional extra vertical nudge applied to every stamped logo." }, - "skip": { "type": "array", "items": { "type": "string" }, "description": "Image basenames to publish with no logo (plain garment)." }, - "placements": { - "type": "object", - "description": "Map of image basename -> { center: [x,y], width } in 1536x1024 pixels.", - "additionalProperties": { - "type": "object", - "additionalProperties": false, - "properties": { - "center": { "type": "array", "items": { "type": "number" }, "minItems": 2, "maxItems": 2 }, - "width": { "type": "number" } - } - } - } - } - }, - "recolor": { - "type": "object", - "additionalProperties": true, - "description": "HSV recolor rules (0-255 scale) used by recolor.js to fix inconsistent paw/garment colors.", - "properties": { - "hue": { "type": "array", "items": { "type": "number" }, "description": "[min,max] selected hue window." }, - "sat_min": { "type": "number" }, - "val": { "type": "array", "items": { "type": "number" }, "description": "[min,max] selected value window." }, - "out_hue": { "type": "number" }, - "out_sat": { "type": "number" }, - "out_val": { "type": "array", "items": { "type": "number" }, "description": "[lo,hi] output value range (0-1) across the shading." }, - "targets": { - "type": "object", - "description": "Map of image basename -> { boxes: [[x0,y0,x1,y1]...], aggressive?: [{box, s_min, v_min, v_max}] }.", - "additionalProperties": true - } - } - } - } - }, - "site": { - "type": "object", - "description": "Site-wide chrome text and assets (everything not tied to a specific chapter/panel).", - "additionalProperties": false, - "properties": { - "source_base_url": { - "type": "string", - "description": "Base URL of the course source repo for frame deep links (e.g. a GitHub blob/main root). Omit to disable deep links." - }, - "lang": { "type": "string", "description": "Document language for , e.g. 'en'." }, - "title": { "type": "string", "description": "Browser tab title on the home page." }, - "chapter_title_suffix": { "type": "string", "description": "Appended to each chapter's tab title, e.g. ' - Pip's Comic'." }, - "favicon": { "type": "string", "description": "Favicon path relative to the site root." }, - "avatar": { "type": "string", "description": "Mascot avatar image path shown in the banner." }, - "avatar_alt": { "type": "string", "description": "Alt text for the mascot avatar image." }, - "select_label": { "type": "string", "description": "Home page chapter-picker button label." }, - "open_section_label": { "type": "string", "description": "Book-icon deep-link label (aria-label + tooltip)." }, - "read_in_course_label": { "type": "string", "description": "Visible text on the caption-row 'Read in course' deep-link pill." }, - "copy_command_label": { "type": "string", "description": "Prefix for terminal copy-button aria-labels, e.g. 'Copy command'." }, - "progress_label": { "type": "string", "description": "Banner progress-bar aria label. {n} and {total} are substituted." }, - "skip_label": { "type": "string", "description": "Visually-hidden skip-to-content link text." }, - "new_tab_label": { "type": "string", "description": "Appended to the book-icon link aria-label to warn it opens a new tab." }, - "copied_label": { "type": "string", "description": "Screen-reader status announced after a terminal command is copied." }, - "close_label": { "type": "string", "description": "Accessible label for modal/dialog close buttons (e.g. 'Close')." }, - "nav": { "$ref": "#/definitions/nav" }, - "quest": { "$ref": "#/definitions/quest" }, - "certificate": { "$ref": "#/definitions/certificate" }, - "present": { "$ref": "#/definitions/present" }, - "quiz": { "$ref": "#/definitions/quizLabels" } - } - }, - "quest": { - "type": "object", - "description": "Home-page quest map + progress dashboard labels. {xp},{n},{done},{total} are substituted where noted.", - "additionalProperties": false, - "properties": { - "heading": { "type": "string", "description": "Quest section heading." }, - "subheading": { "type": "string", "description": "Quest section subheading." }, - "xp_label": { "type": "string", "description": "XP stat. {xp} is substituted." }, - "level_label": { "type": "string", "description": "Level stat. {n} is substituted." }, - "streak_label": { "type": "string", "description": "Active streak stat. {n} is substituted." }, - "streak_zero": { "type": "string", "description": "Streak stat shown when the streak is 0." }, - "progress_label": { "type": "string", "description": "Chapters-complete stat. {done} and {total} are substituted." }, - "node_todo": { "type": "string", "description": "Status text for a not-yet-completed chapter node." }, - "node_done": { "type": "string", "description": "Status text for a completed chapter node." }, - "badges_heading": { "type": "string", "description": "Heading above the earned-badges row." }, - "badge_locked_alt": { "type": "string", "description": "Alt/title for a not-yet-earned badge. {n} is substituted with the chapter label." }, - "reset_label": { "type": "string", "description": "Label for the 'reset my progress' control." }, - "reset_confirm": { "type": "string", "description": "Confirmation prompt shown before resetting progress." } - } - }, - "certificate": { - "type": "object", - "description": "Completion-certificate labels (home page). {name},{course},{date} are substituted where noted.", - "additionalProperties": false, - "properties": { - "locked_hint": { "type": "string", "description": "Hint shown while the certificate is still locked." }, - "unlocked_heading": { "type": "string", "description": "Heading shown once all chapters are complete." }, - "name_prompt": { "type": "string", "description": "Label above the name input." }, - "name_placeholder": { "type": "string", "description": "Placeholder text for the name input." }, - "generate_label": { "type": "string", "description": "Button that renders the certificate from the entered name." }, - "print_label": { "type": "string", "description": "Button that prints / saves the certificate as a PDF." }, - "title": { "type": "string", "description": "Certificate heading, e.g. 'Certificate of Completion'." }, - "body": { "type": "string", "description": "Line between the name and course, e.g. 'has successfully completed'." }, - "course": { "type": "string", "description": "Course name printed on the certificate." }, - "date_label": { "type": "string", "description": "Label before the completion date. {date} is substituted." }, - "signature": { "type": "string", "description": "Signature line printed on the certificate." } - } - }, - "present": { - "type": "object", - "description": "Presentation / slideshow mode labels (chapter pages). {n} and {total} are substituted where noted.", - "additionalProperties": false, - "properties": { - "start_label": { "type": "string", "description": "Label of the button that enters presentation mode." }, - "exit_label": { "type": "string", "description": "Label of the control that exits presentation mode." }, - "next_label": { "type": "string", "description": "Accessible label for the 'next slide' control." }, - "prev_label": { "type": "string", "description": "Accessible label for the 'previous slide' control." }, - "counter_label": { "type": "string", "description": "Slide counter. {n} and {total} are substituted." }, - "hint": { "type": "string", "description": "Keyboard-hint shown briefly when entering presentation mode." } - } - }, - "quizLabels": { - "type": "object", - "description": "Shared labels for inline knowledge-check (quiz) cards.", - "additionalProperties": false, - "properties": { - "heading": { "type": "string", "description": "Card heading, e.g. 'Quick check'." }, - "correct_prefix": { "type": "string", "description": "Prefix shown when the chosen answer is correct, e.g. 'Correct!'." }, - "incorrect_prefix": { "type": "string", "description": "Prefix shown when the chosen answer is wrong, e.g. 'Not quite.'." }, - "retry_label": { "type": "string", "description": "Hint inviting another attempt after a wrong answer." }, - "answered_label": { "type": "string", "description": "Screen-reader status announced after an answer is chosen." } - } - }, - "nav": { - "type": "object", - "description": "Navigation button labels.", - "additionalProperties": false, - "properties": { - "home": { "type": "string" }, - "prev": { "type": "string", "description": "Full 'previous' label (wide screens)." }, - "prev_short": { "type": "string", "description": "Short 'previous' label (narrow screens)." }, - "next": { "type": "string", "description": "Full 'next' label (wide screens)." }, - "next_short": { "type": "string", "description": "Short 'next' label (narrow screens)." }, - "aria": { "type": "string", "description": "Accessible name for the top nav landmark." }, - "aria_bottom": { "type": "string", "description": "Accessible name for the repeated bottom nav landmark (must differ from 'aria')." } - } - }, - "home": { - "type": "object", - "description": "Home page banner and intro frame.", - "additionalProperties": false, - "required": ["title_html", "subtitle", "cta_text", "cta_href", "intro"], - "properties": { - "title_html": { "type": "string", "description": "Home banner heading (raw HTML;
allowed)." }, - "subtitle": { "type": "string", "description": "Home banner subtitle." }, - "cta_text": { "type": "string", "description": "Call-to-action button text." }, - "cta_href": { "type": "string", "description": "Call-to-action link target." }, - "intro": { "$ref": "#/definitions/panel" } - } - }, - "chapter": { - "type": "object", - "additionalProperties": false, - "required": ["badge", "title", "subtitle", "selector", "panels"], - "properties": { - "badge": { "type": "string", "description": "Chapter chip text, e.g. 'Chapter 00'. The trailing number drives the progress bar." }, - "title": { "type": "string", "description": "Chapter title (banner + tab title)." }, - "subtitle": { "type": "string", "description": "Chapter subtitle shown under the title." }, - "selector": { "type": "string", "description": "One-line description shown in the home chapter picker." }, - "doc": { "type": "string", "description": "Chapter README path under site.source_base_url; gives every frame a default book-icon link." }, - "panels": { - "type": "array", - "description": "The chapter's comic frames, in order.", - "minItems": 1, - "items": { "$ref": "#/definitions/panel" } - } - } - }, - "panel": { - "type": "object", - "description": "A single comic frame: a background image plus optional speech bubbles, a terminal bar or details note, a caption, and a deep link.", - "additionalProperties": false, - "required": ["img", "alt", "caption"], - "properties": { - "img": { "type": "string", "description": "Panel image filename under assets/img/." }, - "alt": { "type": "string", "description": "Alt text / aria-label describing the panel image." }, - "caption": { - "description": "Frame title shown above the panel: a string, or a list of strings joined with spaces.", - "oneOf": [ - { "type": "string" }, - { "type": "array", "items": { "type": "string" } } - ] - }, - "bubble": { "$ref": "#/definitions/bubble" }, - "bubbles": { - "type": "array", - "description": "Multiple speech bubbles (multi-character dialogue).", - "items": { "$ref": "#/definitions/bubble" } - }, - "terminal": { - "type": "array", - "description": "Dark terminal-bar command lines. An indented line continues the line above; ' # ...' (two spaces then #) renders as a dimmed comment.", - "items": { "type": "string" } - }, - "term": { - "type": "array", - "description": "Legacy alias for 'terminal'. Prefer 'terminal'.", - "items": { "type": "string" } - }, - "details": { - "type": "array", - "description": "Light teal-accented note card shown in the bottom strip as an alternative to 'terminal' (use one or the other). Plain prose lines - no terminal styling, comments or copy buttons. Good for explainer text that isn't a command.", - "items": { "type": "string" } - }, - "file_view": { - "type": "object", - "description": "Adds a 'view file' pill on the details card that opens a modal dialog showing a real file's contents (read at build time, embedded in the page). Use to let readers see an example artifact (e.g. an agent or skill file) instead of a copy command.", - "additionalProperties": false, - "required": ["path"], - "properties": { - "path": { "type": "string", "description": "File to embed, relative to the project root (the folder that contains docs/). Read at build time." }, - "label": { "type": "string", "description": "Button text (defaults to 'View ')." }, - "title": { "type": "string", "description": "Dialog heading (defaults to the file's basename)." } - } - }, - "link": { - "description": "Book-icon deep link: a '#anchor' (resolved against the chapter's doc), a path relative to site.source_base_url, an absolute http(s) URL, or false to hide the icon on this frame.", - "oneOf": [ - { "type": "string" }, - { "type": "boolean" } - ] - }, - "quiz": { "$ref": "#/definitions/quiz" } - } - }, - "quiz": { - "type": "object", - "description": "Inline knowledge-check shown below the panel: a question, multiple-choice options and right/wrong feedback. Pure client-side; choosing an answer reveals instant feedback.", - "additionalProperties": false, - "required": ["prompt", "options", "answer"], - "properties": { - "prompt": { "type": "string", "description": "The question text (asked by the mascot)." }, - "options": { - "type": "array", - "description": "Answer choices, in order. At least two.", - "minItems": 2, - "items": { "type": "string" } - }, - "answer": { "type": "number", "description": "Zero-based index of the correct option in 'options'." }, - "correct": { "type": "string", "description": "Explanation shown when the reader answers correctly." }, - "incorrect": { "type": "string", "description": "Explanation/nudge shown when the reader answers incorrectly." } - } - }, - "bubble": { - "type": "object", - "description": "A white speech bubble with a tail that points at the speaker's head.", - "additionalProperties": false, - "required": ["lines", "w", "tx", "ty"], - "properties": { - "lines": { - "type": "array", - "description": "Speech text, one entry per rendered line.", - "minItems": 1, - "items": { "type": "string" } - }, - "w": { "type": "number", "description": "Bubble width in panel pixels." }, - "tx": { "type": "number", "description": "Speaker head X (panel px); the tail points here." }, - "ty": { "type": "number", "description": "Speaker head Y (panel px); the tail points here." }, - "x": { "type": "number", "description": "Manual bubble X (panel px). Usually omit and let auto-placement choose." }, - "y": { "type": "number", "description": "Manual bubble Y (panel px). Usually omit and let auto-placement choose." }, - "auto": { "type": "boolean", "description": "Auto-place the bubble (default true). Set false to force the manual x/y." }, - "delay": { "type": "number", "minimum": 0, "description": "Optional reveal delay in milliseconds (e.g. 1000, 2000). Sets the bubble's animation-delay inline, overriding any default stagger. Omit to use the engine default." } - } - } - } -} diff --git a/docs/content.yaml b/docs/content.yaml deleted file mode 100644 index 48af5ea5..00000000 --- a/docs/content.yaml +++ /dev/null @@ -1,1338 +0,0 @@ -# yaml-language-server: $schema=content.schema.json -# Editable content for the Pip comic site. -# Edit the words here, then rebuild with build_site.py. -# The skill owns the rendering engine; this file owns the content. -# Per bubble: lines (the speech text), w (bubble width px), -# tx/ty (the speaker's head x/y - the tail points there). -# Course deep links: site.source_base_url + each chapter's `doc` give every frame -# a book icon linking to that chapter's README. Add a panel `link` (e.g. '#anchor') -# to deep-link a single frame to a specific section. - -# Site-wide text and assets (everything not tied to a specific chapter/panel). -# All user-facing words live here; the engine (build_site.py) hard-codes none. -site: - source_base_url: https://github.com/github/copilot-cli-for-beginners/blob/main # base of the course repo for frame deep links - lang: en - title: GitHub Copilot - Visual Quickstart # browser tab title (home page) - chapter_title_suffix: ' - Pip''s Copilot CLI Comic' # appended to each chapter's tab title - favicon: assets/img/pip-hero.webp - avatar: assets/img/pip-avatar-hat.webp - avatar_alt: Pip the fox mascot - select_label: Select a Chapter # home page chapter-picker button - open_section_label: Read this section in the full course # book-icon link (aria + tooltip) - read_in_course_label: Learn more # visible text on the caption deep-link pill - copy_command_label: Copy command # prefix for terminal copy-button aria-labels - progress_label: 'Course progress: chapter {n} of {total}' # banner progress bar (aria); {n}/{total} are filled in - skip_label: Skip to main content # visually-hidden skip-to-content link - new_tab_label: ' (opens in a new tab)' # appended to book-icon aria-label (new-tab warning) - copied_label: Copied! # screen-reader announcement after a command is copied - nav: - home: Home - prev: Previous Chapter - prev_short: Prev - next: Next Chapter - next_short: Next - aria: Chapter # accessible name for the top nav landmark - aria_bottom: Chapter (bottom) # accessible name for the repeated bottom nav landmark - close_label: Close # accessible label for modal close buttons - # --- Quest map + progress dashboard (home page) --- - quest: - heading: Your Learning Quest Begins - subheading: Complete chapters to light up the map, earn medals, build a daily streak, and unlock your certificate. - level_label: Level {n} - xp_label: '{xp} XP' - streak_label: '{n}-day streak' - streak_zero: Start your streak! - progress_label: '{done} / {total} chapters' - node_todo: Not started yet - node_done: Complete - reset_label: Reset my progress - reset_confirm: Reset all of your saved progress, streak, and certificate name? - # --- Completion certificate (home page, unlocks at 100%) --- - certificate: - locked_hint: Finish all chapters to unlock your certificate of completion! - unlocked_heading: πŸŽ‰ You completed every chapter! - name_prompt: Your name - name_placeholder: e.g. Ada Lovelace - generate_label: Create my certificate - print_label: Print / Save as PDF - title: Certificate of Completion - body: has successfully completed - course: GitHub Copilot CLI for Beginners - date_label: 'Completed on {date}' - signature: Pip & Professor Quill - # --- Presentation / slideshow mode (chapter pages) --- - present: - start_label: Present - exit_label: Exit - next_label: Next panel - prev_label: Previous panel - counter_label: '{n} / {total}' - hint: Use the arrow keys to move, Esc to exit - # --- Inline knowledge checks (quiz cards) --- - quiz: - heading: Quick check - correct_prefix: Correct! - incorrect_prefix: Not quite. - retry_label: Try another answer. - answered_label: Answer recorded. - -home: - title_html: GitHub Copilot CLI
for Beginners - subtitle: A visual quickstart reference for learning agentic coding. - cta_text: Get Started! - cta_href: chapter-00.html - intro: - img: ch00-welcome.webp - alt: Pip the fox waves hello beside Professor Quill the owl at a cozy desk with a laptop. - caption: Learn with Pip and Professor Quill - pick a chapter below to get started! - bubbles: - - lines: - - Hi, I'm Pip! Ready to learn - - about GitHub Copilot CLI? - w: 624 - tx: 540 - ty: 250 - delay: 600 - - lines: - - Greetings! I'm Professor Quill. - - I explain the "why" behind each step. - w: 690 - tx: 1140 - ty: 560 - delay: 1600 -footer_html: GitHub - Copilot CLI for Beginners course -chapters: -- badge: Chapter 00 - doc: 00-quick-start/README.md - title: Quick Start - subtitle: Install GitHub Copilot CLI, sign in, clone the samples, and verify it works. - selector: Quick Start Β· install, sign in, clone, verify - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 00 - Learning Objectives - details: - - "In this chapter you will:" - - "- Install Copilot CLI" - - "- Sign in to your GitHub account" - - "- Clone the course samples and run the book app" - - img: ch00-install.webp - link: '#local-installation' - alt: Pip gives a thumbs up as software installs onto a laptop. - caption: Install the CLI - bubble: - lines: - - Got Node.js or Homebrew? One - - command and you're up and running! - w: 720 - tx: 645 - ty: 130 - terminal: - - npm install -g @github/copilot - - '# Or use Homebrew' - - 'brew install copilot-cli # macOS / Linux alternative' - - img: ch00-login.webp - link: '#authentication' - alt: Pip holds a key beside Professor Quill, who shows a phone with a security shield. - caption: Sign in securely - bubbles: - - lines: - - Run copilot, - - then type /login to sign in. - auto: false - x: 650 - y: 275 - w: 680 - tx: 520 - ty: 260 - - lines: - - 'Lines after > are typed inside' - - 'Copilot, not your shell.' - w: 640 - tx: 650 - ty: 550 - terminal: - - copilot - - '> /login' - - '# Requires an active GitHub Copilot subscription' - - img: ch00-clone.webp - alt: Pip copies a folder of project files onto a laptop from a cloud. - caption: Clone the sample project - bubble: - lines: - - Grab the course samples so you - - have samples to work with! - w: 680 - tx: 660 - ty: 300 - terminal: - - git clone https://github.com/github/copilot-cli-for-beginners - - cd copilot-cli-for-beginners - - img: ch00-verify.webp - link: '#verify-it-works' - alt: Pip points at a laptop showing books and a green check. - caption: Verify it works - bubble: - lines: - - Run the sample book app (you'll need Python installed). - - See 5 books? You're good to go! - w: 900 - tx: 430 - ty: 180 - terminal: - - cd samples/book-app-project - - python book_app.py list - quiz: - prompt: Which command signs you in to Copilot CLI from inside the tool? - options: - - /login - - copilot --auth - - git login - answer: 0 - correct: Inside Copilot, slash commands like /login control your session. - incorrect: Remember, lines starting with > or / are typed inside Copilot, not your shell. - - img: ch00-ready.webp - link: false - alt: Pip cheers beside Professor Quill, who gives a thumbs up next to a trophy. - caption: You're ready! - bubbles: - - lines: - - Setup complete! The real - - fun starts in Chapter 01. - w: 560 - tx: 500 - ty: 185 - - lines: - - Well done. You - - earned this trophy! - w: 470 - tx: 960 - ty: 500 -- badge: Chapter 01 - doc: 01-setup-and-first-steps/README.md - title: First Steps - subtitle: See Copilot CLI in action, then learn the three interaction modes. - selector: First Steps Β· demos & the three modes - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 01 - Learning Objectives - details: - - "In this chapter you will:" - - "- Try a quick code review" - - "- Learn the three interaction modes" - - "- Use key slash commands" - - "- Approve the actions Copilot takes" - - img: ch01-magic.webp - link: '#getting-comfortable-your-first-prompts' - alt: Pip looks amazed beside Professor Quill as magic sparkles rise from a laptop. - caption: Chapter 01 - The magic begins - bubbles: - - lines: - - Just ask copilot to help you in plain English. - - Watch what happens! - w: 800 - tx: 540 - ty: 240 - - lines: - - No secret syntax to learn. - - Say it your way! - w: 550 - tx: 1160 - ty: 500 - terminal: - - copilot - - '> Explain what a dataclass is in Python in simple terms' - - '> Write a function that counts books by genre # it writes the code, too' - - img: ch01-review.webp - link: '#demo-1-code-review-in-seconds' - alt: Pip inspects code bugs on a laptop with a magnifying glass. - caption: Demo - Code review in seconds - bubble: - lines: - - Point me at a file and I'll - - spot bugs and quality issues! - w: 560 - tx: 700 - ty: 330 - terminal: - - '> Review @samples/book-app-project/book_app.py for code quality' - - '# You''ll learn more about @ and other ways to do reviews later!' - - img: ch01-permissions.webp - link: '#permissions' - alt: Pip pauses with a raised paw at a laptop showing a glowing security shield with a checkmark while Professor Quill gestures reassuringly. - caption: Copilot asks before it acts - bubbles: - - lines: - - Before I run a command or edit - - a file, I pause and ask you. - w: 620 - tx: 640 - ty: 320 - - lines: - - Approve once, or allow all - - in projects you trust. - w: 520 - tx: 1180 - ty: 600 - terminal: - - '> Run the tests for the book app' - - '? Allow Copilot to run python -m pytest? (y/n)' - - '# /allow-all on # auto-approve in trusted projects (use with care!)' - - img: ch01-modes.webp - link: '#the-three-modes' - alt: Professor Quill points at three icons - a map, a waiter, and a drive-through - while Pip thinks. - caption: 'Three modes: plan, interactive, or programmatic' - bubbles: - - lines: - - Plan = a GPS route. - - Interactive = a waiter chat. - - Programmatic = a drive-through. - auto: false - x: 500 - y: 450 - w: 600 - tx: 470 - ty: 610 - - lines: - - I'll pick the one - - that fits the job. - w: 400 - tx: 1250 - ty: 195 - terminal: - - 'copilot --plan # Plan out work first (GPS).' - - 'copilot # Interactively prompt and iterate (waiter).' - - 'copilot -p "[prompt]" # Programmatic - one-shot answer (drive-through)' - - img: ch01-interactive.webp - link: '#mode-1-interactive-mode-start-here' - alt: Pip chats back and forth at a cafe table with Professor Quill acting as a waiter taking notes. - caption: 'Interactive: chat and iterate' - bubble: - lines: - - I remember your chat, so each - - prompt builds on the last. - w: 640 - tx: 560 - ty: 230 - terminal: - - copilot - - '> Add type hints to this file' - - '...response...' - - '> Now make the error handling robust' - - img: ch01-plan.webp - link: '#mode-2-plan-mode' - alt: Pip studies a GPS-style map with a numbered route on a laptop before starting. - caption: 'Plan: map it out first' - bubble: - lines: - - I create a plan with steps. - - Once the plan is in place, I can use it - - to guide my coding. - w: 700 - tx: 480 - ty: 230 - terminal: - - copilot - - '> /plan Add a "mark as read" command and tests to validate it' - - img: ch01-programmatic.webp - link: '#mode-3-programmatic-mode' - alt: Pip sits in his car at a drive-through, reaching out the window to grab a takeout bag - one order in, one out. - caption: 'Programmatic: one-shot answers' - bubble: - lines: - - 'Like a drive-through: one order in,' - - one answer out. Great for scripts. - w: 900 - tx: 560 - ty: 230 - terminal: - - 'copilot -p "How do I read a JSON file in Python?" # One-shot answer' - - img: ch01-commands.webp - link: '#essential-slash-commands' - alt: Pip operates a colorful control panel of buttons. - caption: Control your session - bubble: - lines: - - Forgot a command? - - Type /help. - - Switching topics? - - Use /clear. - - All done? - - Type /exit! - w: 400 - tx: 800 - ty: 320 - terminal: - - '/help # show all commands' - - '/clear # start a fresh conversation' - - '/model # show or switch the AI model' - - '/exit # end the session' - - '!git status # ! runs a shell command directly, no AI' - quiz: - prompt: You want a single, scripted answer with no back-and-forth. Which mode fits? - options: - - Plan mode - - Interactive mode - - Programmatic mode - answer: 2 - correct: Programmatic mode (copilot -p) is the drive-through - one prompt, one answer. - incorrect: Think about the drive-through analogy - one order, one result, no conversation. - - img: ch01-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill while walking toward a glowing arrow. - caption: On to Chapter 02! - bubbles: - - lines: - - 'Next: give me context' - - with the @ symbol. - - See you in Chapter 02! - w: 500 - tx: 600 - ty: 250 - - lines: - - Keep going - - - you're doing great! - w: 440 - tx: 950 - ty: 490 -- badge: Chapter 02 - doc: 02-context-conversations/README.md - title: Context and Conversations - subtitle: Point Copilot at files with the @ symbol, manage context and memory, and resume work across sessions. - selector: Context Β· @ symbol, memory & sessions - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 02 - Learning Objectives - details: - - "In this chapter you will:" - - "- Point Copilot at files with the @ symbol" - - "- Resume sessions and use persistent memory" - - "- Manage the context window" - - img: ch02-context.webp - link: '#the--syntax' - alt: Pip gestures while explaining to Professor Quill at a desk with a laptop showing code. - caption: Give Copilot context - bubbles: - - lines: - - Copilot is not a mind reader. - - Tell it which files to focus on! - w: 560 - tx: 470 - ty: 210 - - lines: - - Context turns a guess - - into a real answer. - auto: false - w: 470 - x: 870 - y: 275 - tx: 1000 - ty: 1100 - terminal: - - copilot - - '> Review @samples/book-app-project/books.py' - - img: ch02-atsyntax.webp - link: '#reference-a-single-file' - alt: Pip points at a laptop showing a file and an @ symbol. - caption: Point with the @ symbol - bubble: - lines: - - Type @ followed by a file or folder - - to point Copilot right at the code. - w: 650 - tx: 600 - ty: 210 - terminal: - - '> Explain what @samples/book-app-project/utils.py does' - - img: ch02-multifile.webp - link: '#cross-file-intelligence' - alt: Pip holds up two pages of code, comparing them side by side. - caption: Cross-file intelligence - bubble: - lines: - - Point at many files at once. - - I spot bugs that hide between them. - w: 660 - tx: 600 - ty: 300 - terminal: - - '> Compare @samples/book-app-project/book_app.py' - - ' @samples/book-app-project/books.py for consistency' - - img: ch02-sessions.webp - link: '#session-management' - alt: Pip stands beside Professor Quill near a laptop showing a refresh and clock icon. - caption: Resume any conversation - bubbles: - - lines: - - Stopped for the day? - - Pick up where you left off. - w: 560 - tx: 640 - ty: 210 - - lines: - - Sessions save automatically. - - Nothing is lost. - w: 600 - auto: false - x: 870 - y: 375 - tx: 1000 - ty: 705 - terminal: - - 'copilot --continue # resume your last session' - - 'copilot --resume # or pick one from a list' - - img: ch02-memory.webp - link: '#persistent-memory-across-sessions' - alt: Professor Quill points at a glowing brain icon above a laptop while Pip holds a notebook of saved preferences. - caption: Memory that spans every session - bubbles: - - lines: - - Memory recalls my preferences - - across all my sessions. - w: 620 - tx: 1100 - ty: 210 - - lines: - - Tell it once - - - it carries forward. - w: 420 - tx: 385 - ty: 560 - terminal: - - copilot - - '> /memory show # what Copilot remembers' - - img: ch02-what-is-context.webp - link: '#understanding-context-windows' - alt: Professor Quill points at a glowing window holding a chat bubble, a file, and a gear while Pip has an aha moment. - caption: What is context? - bubbles: - - lines: - - Context is everything - - I'm holding in mind - - right now. - w: 400 - tx: 360 - ty: 640 - - lines: - - Your chat, plus the - - files you've shown me. - w: 470 - tx: 1285 - ty: 360 - details: - - "Different from memory: memory carries across all your sessions." - - "Context is for this conversation, in a limited window that you can manage." - - img: ch02-context-limit.webp - link: '#check-and-manage-context' - alt: Pip compacts a tall stack of papers beside a desk with a gauge meter that is nearly full. - caption: Manage the context window - bubble: - lines: - - Context window filling up? Compact it, - - clear it, or start a new session. - w: 700 - tx: 555 - ty: 230 - terminal: - - '> /context # see how full the window is' - - '> /compact # summarize to free up space' - - '> /new # create a new session' - - '> /rewind # roll back to an earlier point' - - img: ch02-images.webp - link: '#working-with-images' - alt: Pip holds up a framed screenshot of an app interface and inspects it with a magnifying glass next to a laptop. - caption: Debug with screenshots - bubble: - lines: - - Stuck on a UI bug? Point me - - at a screenshot to see it. - w: 600 - tx: 480 - ty: 200 - terminal: - - '> Why is this layout broken? @screenshot.png' - - '# You can also copy and paste an image into Copilot CLI!' - quiz: - prompt: What does the @ symbol do in a Copilot prompt? - options: - - Tags another GitHub user - - Points Copilot at a specific file or folder for context - - Runs a shell command - answer: 1 - correct: Right - @ pulls a file or folder into context so Copilot reads the real code. - incorrect: In Copilot prompts, @ adds a file or folder to context - it's not a mention or a shell command. - - img: ch02-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill while walking toward a glowing arrow. - caption: On to Chapter 03! - bubbles: - - lines: - - 'Next: everyday dev workflows -' - - review, refactor, debug, test, and ship. - w: 640 - tx: 560 - ty: 230 - - lines: - - Keep going - - - you're doing great! - w: 440 - tx: 950 - ty: 490 -- badge: Chapter 03 - doc: 03-development-workflows/README.md - title: Development Workflows - subtitle: Review, refactor, debug, test, and ship code with everyday Copilot workflows. - selector: Workflows Β· review, debug, test, ship - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 03 - Learning Objectives - details: - - "In this chapter you will:" - - "- Review, refactor, and debug code" - - "- Generate tests for your code" - - "- Ship changes with git commits and PRs" - - img: ch03-workflows.webp - link: '#choose-your-own-adventure' - alt: Pip stands confidently in a workshop beside Professor Quill wearing a tool belt. - caption: Five developer workflows - bubbles: - - lines: - - 'Five everyday jobs: review,' - - refactor, debug, test, ship. - w: 600 - tx: 840 - ty: 210 - - lines: - - Pick the workflow - - that fits the task. - w: 470 - tx: 390 - ty: 470 - terminal: - - copilot - - '> Review @samples/book-app-project/book_app.py for code quality' - - img: ch03-review.webp - link: '#basic-review' - alt: Pip inspects a laptop with a magnifying glass, spotting issues in code. - caption: Code review - bubble: - lines: - - Point me at a file and I - - flag bugs and quality issues. - w: 560 - tx: 560 - ty: 240 - details: - - "Here's the actual code Copilot reviews." - - "Or use /review for a focused check (more soon)." - file_view: - label: "See the code" - path: "samples/book-app-project/book_app.py" - title: "book_app.py" - - img: ch03-refactor.webp - link: '#separate-concerns' - alt: Pip tidies tangled code into neat, clean blocks on a laptop screen. - caption: Refactor with confidence - bubble: - lines: - - Messy code? I reshape it - - without changing what it does. - w: 640 - tx: 470 - ty: 250 - terminal: - - '> Refactor @samples/book-app-project/books.py' - - ' to separate concerns and clearer names' - - img: ch03-debug.webp - link: '#the-bug-detective---ai-finds-related-bugs' - alt: Pip wears a detective hat and uses a magnifying glass to find a bug on a laptop. - caption: The bug detective - bubble: - lines: - - Show me the error and the file. - - I track the bug down. - w: 600 - tx: 560 - ty: 250 - terminal: - - '> Why does this fail? Find the bug in' - - ' @samples/book-app-project/books.py' - - img: ch03-test.webp - link: '#unit-tests' - alt: Pip gives a thumbs up beside Professor Quill near a laptop showing green checkmarks. - caption: Test your code - bubbles: - - lines: - - I write the tests - - - you run pytest. - w: 480 - tx: 600 - ty: 210 - - lines: - - Tests are your safety net. - - Always run them to keep - - your agentic workflow on track. - w: 560 - tx: 1180 - ty: 540 - terminal: - - '> @samples/book-app-project/books.py Add unit tests' - - 'pytest # run the new tests' - - img: ch03-ship.webp - link: '#generate-commit-messages' - alt: Pip stands proudly beside a laptop showing a git branch merging, with a shipping box marked with a green check. - caption: Ship it with git - bubble: - lines: - - I review your changes and - - write your commit message. - w: 680 - tx: 600 - ty: 250 - terminal: - - 'git add . # stage your changes first' - - '> /diff # review everything you changed this session' - - '> Generate a commit message for my staged changes' - - img: ch03-pr.webp - link: '#using-pr-in-interactive-mode-for-the-current-branch' - alt: Pip points at a laptop where a glowing pull-request icon sends a merge arrow up to a cloud. - caption: Open a pull request - bubble: - lines: - - Done? Type /pr and I'll open a - - pull request for your branch - - - right from the CLI. - w: 720 - tx: 540 - ty: 250 - terminal: - - copilot - - '> /pr # open a pull request for the current branch' - - img: ch03-delegate.webp - link: '#using-delegate-for-background-tasks' - alt: Pip keeps working at his laptop while a friendly robot carries a glowing task token off toward a cloud and a server in the background. - caption: Delegate work to the background - bubble: - lines: - - Hand off a task to GitHub cloud agent - - and it'll work on it in - - the background and open a PR. - w: 780 - tx: 430 - ty: 380 - terminal: - - copilot - - '> /delegate Add input validation to the book app' - quiz: - prompt: Which Copilot CLI command opens a pull request for your current branch? - options: - - /pr - - /commit - - git push --request - answer: 0 - correct: Right - /pr opens a pull request straight from your session. - incorrect: Slash commands run inside Copilot - /pr is the one that opens a pull request. - - img: ch03-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill while walking toward a glowing arrow. - caption: On to Chapter 04! - bubbles: - - lines: - - 'Next: hire built-in and custom agents,' - - and set standards with AGENTS.md. - - See you in Chapter 04! - w: 660 - tx: 560 - ty: 230 - - lines: - - Keep going - - - you're doing great! - w: 440 - tx: 950 - ty: 490 -- badge: Chapter 04 - doc: 04-agents-custom-instructions/README.md - title: Agents and Custom Instructions - subtitle: Hire built-in and custom agents, and set project standards once with AGENTS.md. - selector: Agents Β· specialists & AGENTS.md - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 04 - Learning Objectives - details: - - "In this chapter you will:" - - "- Pick built-in and custom agents" - - "- Combine specialist agents on a task" - - "- Set standards with AGENTS.md and instruction files" - - img: ch04-agents.webp - link: '#new-to-agents-start-here' - alt: Professor Quill points at three cards showing a wrench, a lightning bolt, and a paint roller while Pip thinks about which specialist to hire. - caption: What is an agent? - bubbles: - - lines: - - An agent is a specialist - - I can hire for a job. - w: 520 - tx: 400 - ty: 210 - - lines: - - Each is an expert at - - one kind of task. - w: 500 - tx: 1120 - ty: 300 - details: - - "Like calling a plumber, electrician, or painter - the right pro for each job." - - img: ch04-pick.webp - link: '#interactive-mode' - alt: Pip points at a laptop showing a list of agents with the top one highlighted. - caption: Pick an agent with /agent - bubble: - lines: - - Type /agent, then - - pick one from the list. - w: 560 - tx: 560 - ty: 260 - terminal: - - copilot - - '> /agent # list and pick an agent' - - img: ch04-builtin.webp - link: '#built-in-agents' - alt: Pip gives a thumbs up beside a laptop showing a checklist and a badge. - caption: Built-in agents - bubble: - lines: - - Some agents are built in. - - Just type a slash command. - w: 560 - tx: 560 - ty: 240 - terminal: - - '> /review # built-in code-review agent' - - '> /plan # built-in planning agent' - - img: ch04-custom.webp - link: '#where-to-put-agent-files' - alt: Pip proudly holds a page showing a gear icon, representing a custom agent. - caption: Make your own agent - bubble: - lines: - - Write your own custom agent - - in a simple markdown file. - w: 560 - tx: 500 - ty: 200 - details: - - "A custom agent is just a markdown file you write." - file_view: - label: "See an example" - path: ".github/agents/python-reviewer.agent.md" - title: "python-reviewer.agent.md" - - img: ch04-multiagent.webp - link: '#working-with-multiple-agents' - alt: Pip and Professor Quill watch three colorful robot agents passing a glowing task token around a laptop. - caption: Agents work as a team - bubbles: - - lines: - - Big task? Several specialist - - agents team up on it. - w: 580 - tx: 330 - ty: 330 - - lines: - - Each handles the part - - it knows best. - w: 460 - tx: 560 - ty: 610 - terminal: - - copilot - - '> /agent # switch to the reviewer' - - '> /agent # then the tester' - - img: ch04-init.webp - link: '#quick-setup-with-init' - alt: Pip presses a glowing button on a laptop and configuration file icons spill out and arrange themselves on the desk. - caption: Set up your project with /init - bubble: - lines: - - New project? Run /init and I - - scaffold your config files for you. - w: 720 - tx: 470 - ty: 330 - terminal: - - copilot - - '> /init # scan the project and create instruction files' - - img: ch04-scope.webp - link: '#custom-instruction-files-instructionsmd' - alt: Pip points at a laptop showing one instruction document with arrows targeting a Python file and a code file. - caption: Target rules to file types - bubble: - lines: - - Each .instructions.md file - - applies to the files you choose. - w: 640 - tx: 560 - ty: 240 - details: - - 'Example: .github/instructions/python-standards.instructions.md' - - 'To apply it to a specific file type, use the applyTo field.' - - 'Example: applyTo: "**/*.py".' - file_view: - label: "See an example" - path: ".github/instructions/python-standards.instructions.md" - title: "python-standards.instructions.md" - - img: ch04-instructions.webp - link: '#agentsmd' - alt: Pip gestures toward a laptop with a gear while Professor Quill watches. - caption: Set project standards once - bubbles: - - lines: - - Put your rules in AGENTS.md. - w: 560 - tx: 400 - ty: 230 - - lines: - - Set standards once - - - Copilot follows them. - w: 540 - tx: 1300 - ty: 600 - details: - - "Add an AGENTS.md file to your repo." - - "Copilot reads and follows it automatically." - file_view: - label: "See an example" - path: "AGENTS.md" - title: "AGENTS.md" - quiz: - prompt: How do you list and pick an agent in Copilot CLI? - options: - - Type /agent - - Type @agent - - Run copilot --pick-agent - answer: 0 - correct: Right - /agent shows the available agents so you can choose one. - incorrect: Agents are chosen with the /agent slash command, not @ or a shell flag. - - img: ch04-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill while walking toward a glowing arrow. - caption: On to Chapter 05! - bubbles: - - lines: - - 'Next: skills - teach Copilot' - - repeatable tasks you can reuse. - - See you in Chapter 05! - w: 640 - tx: 560 - ty: 230 - - lines: - - Keep going - - - you're doing great! - w: 440 - tx: 950 - ty: 490 -- badge: Chapter 05 - doc: 05-skills/README.md - title: Skills - subtitle: Use built-in skills automatically, call them by name, or build your own. - selector: Skills Β· power tools for tasks - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 05 - Learning Objectives - details: - - "In this chapter you will:" - - "- Use skills automatically or by name" - - "- Build your own skill" - - "- Tell agents, skills, and MCP apart" - - img: ch05-skills.webp - link: '#understanding-skills' - alt: Pip holds a power drill beside Professor Quill, with drill bits on a workbench. - caption: Skills are power tools - bubbles: - - lines: - - Skills are swappable - - drill bits for a task. - w: 500 - tx: 480 - ty: 210 - - lines: - - The right bit - - makes the job easy. - w: 440 - tx: 945 - ty: 440 - terminal: - - copilot - - '> /skills list # see available skills' - - img: ch05-auto.webp - link: '#from-manual-prompts-to-automatic-expertise' - alt: Pip raises a fist beside a laptop that lights up with a checkmark badge. - caption: Skills apply automatically - bubble: - lines: - - Describe the job and the - - matching skill kicks in. - - For example, check for code quality - - and the code-checklist skill will run. - w: 700 - tx: 560 - ty: 240 - terminal: - - '> Check @samples/book-app-project/book_app.py for quality' - - img: ch05-invoke.webp - link: '#direct-slash-command-invocation' - alt: Pip presses a large glowing button next to a laptop. - caption: Or call one by name - bubble: - lines: - - Want a specific skill? - - Call it with a slash. - w: 520 - tx: 560 - ty: 300 - terminal: - - '> /code-checklist Check @samples/book-app-project/book_app.py' - - img: ch05-create.webp - link: '#creating-your-first-skill' - alt: Pip holds a clipboard beside Professor Quill, building a new skill. - caption: Build your own skill - bubbles: - - lines: - - Make your own skill with - - a short SKILL.md file. - w: 520 - tx: 600 - ty: 300 - - lines: - - Teach it once, - - reuse it forever. - w: 470 - tx: 1180 - ty: 560 - details: - - "A SKILL.md just needs a description and instructions." - - "The description should explain when the skill should be used." - file_view: - label: "See an example" - path: ".github/skills/code-checklist/SKILL.md" - title: "code-checklist/SKILL.md" - - img: ch05-community.webp - link: '#finding-and-using-community-skills' - alt: Pip holds a drill bit beside a tall shelf stocked with many ready-made bits while Professor Quill gestures toward the shelf. - caption: Install community skills - bubble: - lines: - - Don't build every skill yourself - - - install a ready-made one! - w: 640 - tx: 540 - ty: 300 - terminal: - - '# Browse installable skills and agents' - - '> /plugin marketplace' - - '# Browse and interactively select a skill from awesome-copilot' - - 'gh skill install github/awesome-copilot # add a community skill' - - img: ch05-vs.webp - link: '#skills-vs-agents-vs-mcp' - alt: Professor Quill gestures at three glowing icons - a lightbulb, a power drill, and a plug going into a socket - while Pip considers them. - caption: Agents vs Skills vs MCP - bubbles: - - lines: - - Agents reason and orchestrate - - Skills provide the know-how - - MCP delivers the tools and connections. - w: 700 - tx: 290 - ty: 545 - - lines: - - The right tool - - for each job. - w: 300 - tx: 1185 - ty: 250 - details: - - "Agent = broad expertise" - - "Skill = task steps" - - "MCP = live data from services (see Chapter 06)" - quiz: - prompt: How do you run a specific skill on demand? - options: - - Call it by name with a slash command - - Wait for Copilot to guess - - Skills can't be called directly - answer: 0 - correct: Right - call a skill by name, like /code-checklist, to run it on demand. - incorrect: Skills apply automatically, but you can also call one by name with a slash command. - - img: ch05-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill while walking toward a glowing arrow. - caption: On to Chapter 06! - bubbles: - - lines: - - 'Next: MCP servers connect Copilot' - - to GitHub, files, and live docs. - - See you in Chapter 06! - w: 640 - tx: 560 - ty: 230 - - lines: - - Keep going - - - you're doing great! - w: 440 - tx: 950 - ty: 490 -- badge: Chapter 06 - doc: 06-mcp-servers/README.md - title: MCP Servers - subtitle: Add new powers to Copilot with MCP servers for GitHub, files, and docs. - selector: MCP Servers Β· add new powers - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 06 - Learning Objectives - details: - - "In this chapter you will:" - - "- See what MCP servers add" - - "- Use the GitHub server and pull in live docs" - - "- Add more servers and combine them" - - img: ch06-mcp.webp - link: '#the-mcp-show-command' - alt: Pip stands beside Professor Quill as glowing extension icons plug into a power outlet. - caption: MCP adds superpowers - bubbles: - - lines: - - MCP servers are like - - browser extensions. - w: 400 - tx: 600 - ty: 150 - - lines: - - Each one plugs in - - a new power. - auto: false - x: 300 - y: 520 - w: 420 - tx: 800 - ty: 520 - terminal: - - copilot - - '> /mcp show # see configured servers' - - img: ch06-github.webp - link: '#get-started-with-the-built-in-github-mcp-server' - alt: Pip gives a thumbs up beside a laptop showing the GitHub octocat. - caption: GitHub MCP is built in - bubble: - lines: - - The GitHub server is built - - in - no setup needed. - w: 560 - tx: 560 - ty: 240 - terminal: - - '> List the latest commits in this repository' - - img: ch06-docs.webp - link: '#context7-server-documentation' - alt: Pip looks up a glowing open documentation book that plugs into his laptop. - caption: Pull in live docs - bubble: - lines: - - Need current library docs? - - A docs server fetches them live. - w: 680 - tx: 560 - ty: 230 - terminal: - - '> Get the latest pytest docs and apply them to' - - ' @samples/book-app-project/tests/test_books.py' - - img: ch06-add.webp - link: '#adding-mcp-servers' - alt: Pip connects a small server device as glowing icons rise from it. - caption: Add more servers - bubble: - lines: - - Browse the registry and - - add servers in seconds. - w: 560 - tx: 560 - ty: 300 - terminal: - - '> /mcp search # browse and add servers' - - '# add a markdown server, documentation server, Playwright server, etc.' - - img: ch06-workflow.webp - link: '#multi-server-workflows' - alt: Pip thinks beside a laptop with glowing icons while Professor Quill looks on. - caption: Many servers, one workflow - bubbles: - - lines: - - Files, docs, and GitHub - - - all in one chat. - w: 520 - tx: 460 - ty: 220 - - lines: - - Many servers, - - one smooth flow. - w: 440 - tx: 1090 - ty: 560 - terminal: - - '> Read the docs, then open a pull request' - quiz: - prompt: Which MCP server is built into Copilot CLI with no setup required? - options: - - The GitHub server - - A database server - - None - every server needs setup - answer: 0 - correct: Right - the GitHub MCP server is built in and ready to use. - incorrect: The GitHub server is built in - you can use it without any setup. - - img: ch06-next.webp - link: false - alt: Pip waves goodbye beside Professor Quill, who carries a trophy, while walking toward a glowing arrow. - caption: On to Chapter 07! - bubbles: - - lines: - - 'Next: put it all together -' - - go from an idea to a tested, - - reviewed pull request. - w: 620 - tx: 560 - ty: 220 - - lines: - - The finish line - - - let's bring it home! - w: 460 - tx: 950 - ty: 490 -- badge: Chapter 07 - doc: 07-putting-it-together/README.md - title: Putting It Together - subtitle: Combine everything to go from an idea to a tested, reviewed pull request. - selector: Putting It Together Β· idea to PR - panels: - - img: objectives.webp - link: false - alt: Professor Quill and Pip stand beside a chalkboard showing a checklist of four green checkmarks. - caption: Chapter 07 - Learning Objectives - details: - - "In this chapter you will:" - - "- Combine agents, skills, and MCP together" - - "- Plan, build, and test a feature" - - "- Go from an idea to a merged pull request" - - img: ch07-orchestra.webp - link: '#idea-to-merged-pr-in-one-session' - alt: Pip holds a conductor baton beside glowing tool icons and Professor Quill. - caption: Conduct the orchestra - bubbles: - - lines: - - You are the conductor. - - Copilot is the orchestra. - w: 560 - tx: 400 - ty: 210 - - lines: - - You lead - the - - tools play along. - w: 440 - tx: 900 - ty: 500 - terminal: - - copilot - - '> Summarize this codebase so I can start contributing' - - '> Plan a feature, then build it step by step' - - img: ch07-idea.webp - link: '#the-integration-pattern' - alt: Pip points at a laptop showing a checklist and a glowing lightbulb. - caption: Idea to merged PR - bubble: - lines: - - Start with an idea, end - - with a merged pull request. - w: 560 - tx: 460 - ty: 230 - terminal: - - '> @samples/book-app-project/books.py' - - ' Add a get_unread_books method' - - img: ch07-flow.webp - link: '#best-practices' - alt: Pip raises a fist beside a laptop showing a plan, build, test, and ship workflow. - caption: Plan, build, test, ship - bubble: - lines: - - Plan it, build it, test it, - - then ship it. - w: 520 - tx: 470 - ty: 240 - terminal: - - '> /plan # map it out first' - - '> Build it, add tests, then open a PR' - quiz: - prompt: What's a smart first step before building a larger feature? - options: - - Map it out with /plan - - Open a pull request immediately - - Delete your tests - answer: 0 - correct: Right - /plan maps out the work so Copilot can build it step by step. - incorrect: Start by mapping the work with /plan, then build, test, and ship. - - img: ch07-done.webp - link: false - alt: Pip cheers with arms raised beside a trophy and Professor Quill giving a thumbs up. - caption: You did it! - bubbles: - - lines: - - You made it to the - - end. Amazing work! - w: 480 - tx: 460 - ty: 230 - - lines: - - Now go build - - something great! - w: 470 - tx: 1080 - ty: 580 - terminal: - - 'copilot' - - '> Build something amazing!' - -# --------------------------------------------------------------------------- -# art: project-specific image-generation config (cast, style, brand/logo, -# per-panel logo placement, recolor rules). Consumed by the art tools -# (gen2.js, relogo.js, recolor.js, render_logo.js); the site engine ignores it. -# Swap these for a new project to retheme the whole comic - no script edits. -# --------------------------------------------------------------------------- -art: - style: Polished modern flat cartoon illustration with broad all-ages appeal (charming to both kids and adults), bold clean black outlines, smooth flat cell-shaded coloring, warm color palette of orange and teal with cream accents, simple uncluttered solid pastel background, gentle soft shadows, high-quality friendly webcomic style. Single panel. Keep the characters in the central band of the frame with generous empty space across the TOP for a caption and speech bubbles and clear space across the BOTTOM strip for a terminal bar; do not crop the characters' heads. ABSOLUTELY NO text, no words, no letters, no numbers, no captions and no speech bubbles anywhere in the image β€” illustration only. - scene_suffix: Clean composition with proper margins so every character is fully visible and not cropped. - size: 1536x1024 - cast: - pip: "Pip is a friendly, clever cartoon fox who reads as a capable young-ADULT developer, NOT a baby or toddler: a confident upright stance with slightly taller, athletic grown-up proportions and a calmer mature face, bright orange fur, a cream-colored belly and muzzle, a big fluffy white-tipped tail, warm intelligent dark eyes, small triangular ears with black tips, wearing a cozy plain teal hoodie with absolutely NO markings, NO logo, NO emblem, NO symbol and NO text on it, and a pair of ordinary dark charcoal-gray denim jeans (long trousers) that fully cover his hips and legs, with his natural orange fox feet/paws showing below the jeans hems. Pip is always fully clothed with the hoodie on top and the dark jeans on the bottom (never bare-legged, never wearing only underwear). Pip is confident, expressive and approachable." - quill: "Professor Quill is a wise, friendly owl mentor who is clearly SHORTER and SMALLER than Pip, his head only reaching about Pip's shoulder or chest height: a small round compact body, soft brown and cream feathers, large round amber eyes behind small round spectacles, gentle tufted eyebrows, a calm knowing smile, wearing a cozy teal knitted vest with a small bow tie. Quill is scholarly, warm and patient like a seasoned senior engineer. Quill must be noticeably smaller in height than Pip." - presets: - pip: - characters: - - pip - join: Pip is the only character in the scene. - both: - characters: - - pip - - quill - join: Both characters are drawn in the exact same art style, line weight and cell-shading; Pip is clearly the taller one and Quill the shorter one. diff --git a/docs/index.html b/docs/index.html deleted file mode 100644 index c8cadba9..00000000 --- a/docs/index.html +++ /dev/null @@ -1,243 +0,0 @@ - - - - - - -GitHub Copilot - Visual Quickstart - - - - - - - - - -
-
-
Learn with Pip and Professor Quill - pick a chapter below to get started!
- Hi, I'm Pip! Ready to learnabout GitHub Copilot CLI?Greetings! I'm Professor Quill.I explain the "why" behind each step. -
-
Get Started!
-
-

Your Learning Quest Begins

-

Complete chapters to light up the map, earn medals, build a daily streak, and unlock your certificate.

-
-
    -
  1. Chapter 00Quick Start
    2. -
  2. Chapter 01First Steps
    3. -
  3. Chapter 02Context and Conversations
    4. -
  4. Chapter 03Development Workflows
    5. -
  5. Chapter 04Agents and Custom Instructions
    6. -
  6. Chapter 05Skills
    7. -
  7. Chapter 06MCP Servers
    8. -
  8. Chapter 07Putting It Together
    9. -
-
-

Finish all chapters to unlock your certificate of completion!

-
-
- - - - - - - - diff --git a/package.json b/package.json index 4eea90b3..10eff8eb 100644 --- a/package.json +++ b/package.json @@ -9,8 +9,6 @@ "generate:vhs": "node .github/scripts/generate-demos.js", "verify:gifs": "node .github/scripts/verify-gifs.js", "copy:content-engine": "node .github/scripts/copy-content-engine-files.js", - "build:visual-quickstart": "node .github/scripts/build-visual-quickstart.js", - "watch:visual-quickstart": "node .github/scripts/watch-visual-quickstart.js", "generate:demos": "npm run create:tapes && npm run generate:vhs && npm run verify:gifs", "release": "npm run generate:demos", "release:ci": "npm run generate:headers"