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..345702fd 100644 --- a/.github/uvs.csv +++ b/.github/uvs.csv @@ -116,3 +116,24 @@ "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 +"07/13",478 +"07/14",497 +"07/15",426 +"07/16",407 +"07/17",474 +"07/18",213 +"07/19",238 diff --git a/.github/views.csv b/.github/views.csv index 3ed062f9..4f566887 100644 --- a/.github/views.csv +++ b/.github/views.csv @@ -115,3 +115,24 @@ "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 +"07/13",981 +"07/14",980 +"07/15",924 +"07/16",822 +"07/17",1162 +"07/18",485 +"07/19",596 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..13afdafe 100644 --- a/01-setup-and-first-steps/README.md +++ b/01-setup-and-first-steps/README.md @@ -325,7 +325,7 @@ Step 4: Test the flow Proceed with implementation? [Y/n] ``` -**Key insight**: Plan mode lets you review and modify the approach before any code is written. Once a plan is complete, you can even tell Copilot CLI to save it to a file for later reference. For example, "Save this plan to `mark_as_read_plan.md`" would create a markdown file with the plan details. +**Key insight**: Plan mode lets you review and modify the approach before any code is written. While in plan mode, Copilot CLI is **read-only** and will not edit any files or run commands that change your workspace until you approve and move to implementation. This keeps you safely in the "thinking" stage until you're ready. Once a plan is complete, you can even tell Copilot CLI to save it to a file for later reference. For example, "Save this plan to `mark_as_read_plan.md`" would create a markdown file with the plan details. > πŸ’‘ **Want something more complex?** Try: `/plan Add search and filter capabilities to the book app`. Plan mode scales from simple features to full applications. @@ -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..a286a570 100644 --- a/04-agents-custom-instructions/README.md +++ b/04-agents-custom-instructions/README.md @@ -107,6 +107,7 @@ What about the Task Agent? It works behind the scenes to manage and track what i | βœ… **Success** | Brief summary (e.g., "All 247 tests passed", "Build succeeded") | | ❌ **Failure** | Full output with stack traces, compiler errors, and detailed logs | +> πŸ’‘ **Multi-turn subagents**: Subagents (background tasks launched by agents) support follow-up messages. While an agent is running in the background, you can open `/tasks` to view it and send follow-up instructions. You don't have to wait for it to finish before guiding it further. Think of it like being able to tap your assistant on the shoulder mid-task to give extra direction. > πŸ“š **Official Documentation**: [GitHub Copilot CLI Agents](https://docs.github.com/copilot/how-tos/use-copilot-agents/use-copilot-cli#use-custom-agents) @@ -486,6 +487,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/05-skills/README.md b/05-skills/README.md index 7036d2c7..80e5bad0 100644 --- a/05-skills/README.md +++ b/05-skills/README.md @@ -532,10 +532,10 @@ Once you're in an interactive Copilot session, use `/skills` (or its shortcut `/ # From the terminal (no interactive session needed): copilot skill list -Available skills: +Project skills: - security-audit: Security-focused code review checking OWASP Top 10 - generate-tests: Generate comprehensive unit tests with edge cases -- code-checklist: Team code quality checklist +- code-checklist: Team code quality checklist (disabled) ... # Or from inside a Copilot session: @@ -543,10 +543,10 @@ copilot > /skills list -Available skills: +Project skills: - security-audit: Security-focused code review checking OWASP Top 10 - generate-tests: Generate comprehensive unit tests with edge cases -- code-checklist: Team code quality checklist +- code-checklist: Team code quality checklist (disabled) ... > /skills info security-audit @@ -557,6 +557,8 @@ Location: .github/skills/security-audit/SKILL.md Description: Security-focused code review checking OWASP Top 10 vulnerabilities ``` +> πŸ’‘ **Disabled skills**: Skills marked as `(disabled)` are installed but not currently active. They won't be triggered by prompts until re-enabled. This can happen if a skill's `SKILL.md` file has a configuration issue, or if the skill was explicitly disabled. You can enable/disable skills by running `/skills`. + ---
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"