diff --git a/.github/agents/core.agent.md b/.github/agents/core.agent.md index 213910a..a4ada2b 100644 --- a/.github/agents/core.agent.md +++ b/.github/agents/core.agent.md @@ -7,8 +7,8 @@ Switch back to the core track. Do the following steps in order: 1. Read the file `tutorial/state.json` 2. Set the `track` field to `"core"` -3. If `currentLesson` is greater than 20, set `currentLesson` to 20 +3. If `currentLesson` is greater than 21, set `currentLesson` to 21 4. Write the updated JSON back to `tutorial/state.json` -5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 20 becomes "20-") +5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 21 becomes "21-") 6. Read that lesson file 7. Present its contents to the user. Mention that they've switched back to the core track. diff --git a/.github/agents/design.agent.md b/.github/agents/design.agent.md index bea8801..ca2df82 100644 --- a/.github/agents/design.agent.md +++ b/.github/agents/design.agent.md @@ -3,12 +3,12 @@ description: "Switch to the Design track" tools: ["read", "edit"] --- -Switch to the Design track (lessons 26-31). Do the following steps in order: +Switch to the Design track (lessons 27-32). Do the following steps in order: 1. Read the file `tutorial/state.json` 2. Set the `track` field to `"design"` -3. If `currentLesson` is less than 26, set `currentLesson` to 26 (otherwise keep it as-is) +3. If `currentLesson` is less than 27, set `currentLesson` to 27 (otherwise keep it as-is) 4. Write the updated JSON back to `tutorial/state.json` -5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 26 becomes "26-") +5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 27 becomes "27-") 6. Read that lesson file 7. Present its contents to the user. Mention that they've switched to the Design track. If the lesson has an Exercise section, make it visually distinct so the user knows exactly what to do next. diff --git a/.github/agents/next.agent.md b/.github/agents/next.agent.md index 52ebe81..f92abc8 100644 --- a/.github/agents/next.agent.md +++ b/.github/agents/next.agent.md @@ -9,7 +9,7 @@ Advance the tutorial to the next lesson. Do the following steps in order: 2. Get the current lesson number from the `currentLesson` field 3. Add the current lesson number to the `completedLessons` array if it is not already there 4. Increment `currentLesson` by 1 -5. Read the `track` field from state (default `"core"` if missing). If `track` is `"qa"`, cap `currentLesson` at 25. If `track` is `"design"`, cap at 31. If `track` is `"core"`, cap at 20. (Set it back to the cap value if it exceeds it.) +5. Read the `track` field from state (default `"core"` if missing). If `track` is `"qa"`, cap `currentLesson` at 26. If `track` is `"design"`, cap at 32. If `track` is `"core"`, cap at 21. (Set it back to the cap value if it exceeds it.) 6. Write the updated JSON back to `tutorial/state.json` 7. Determine the next lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 3 becomes "03-", lesson 7 becomes "07-") 8. Read that lesson file diff --git a/.github/agents/progress.agent.md b/.github/agents/progress.agent.md index 656a498..1119f6a 100644 --- a/.github/agents/progress.agent.md +++ b/.github/agents/progress.agent.md @@ -22,9 +22,10 @@ Show the user their tutorial progress. Do the following: - 14: Session Management - 16: Model Selection & Configuration - 17: CLI Tools & MCP Servers - - 18: Working with Images - - 19: Premium Requests - - 20: Graduation + Bonus + - 18: LSP Servers + - 19: Working with Images + - 20: Premium Requests + - 21: Graduation + Bonus **Developer:** - 5: Code Modification @@ -35,19 +36,19 @@ Show the user their tutorial progress. Do the following: - 15: Programmatic Mode & Automation 4. If `track` is `"qa"`, also show a **QA Track:** section: - - 21: Test Planning from Requirements - - 22: Test Case Design & Coverage Analysis - - 23: Automated Test Generation - - 24: E2E Testing with Playwright - - 25: QA Track Graduation + - 22: Test Planning from Requirements + - 23: Test Case Design & Coverage Analysis + - 24: Automated Test Generation + - 25: E2E Testing with Playwright + - 26: QA Track Graduation If `track` is `"design"`, also show a **Design Track:** section: - - 26: Translating Mockups to Specs - - 27: Accessibility & Design Review - - 28: Design System Instructions - - 29: Designer ↔ Developer Handoff - - 30: Rapid Prototyping - - 31: Design Track Graduation + - 27: Translating Mockups to Specs + - 28: Accessibility & Design Review + - 29: Design System Instructions + - 30: Designer ↔ Developer Handoff + - 31: Rapid Prototyping + - 32: Design Track Graduation If `track` is NOT `"qa"` and NOT `"design"`, show a note instead: "Type /agent qa to start the QA track or /agent design to start the Design track" @@ -56,4 +57,4 @@ Show the user their tutorial progress. Do the following: - `[>]` if it is the `currentLesson` (the one they're on right now) - `[~]` if it is in the `skippedLessons` array - `[ ]` if it hasn't been reached yet -6. Show a summary line. If on the core track: "Progress: N of 20 lessons completed". If on the QA track: "Progress: N of 5 lessons completed". If on the design track: "Progress: N of 6 lessons completed". +6. Show a summary line. If on the core track: "Progress: N of 21 lessons completed". If on the QA track: "Progress: N of 5 lessons completed". If on the design track: "Progress: N of 6 lessons completed". diff --git a/.github/agents/qa.agent.md b/.github/agents/qa.agent.md index 211c46e..7df9252 100644 --- a/.github/agents/qa.agent.md +++ b/.github/agents/qa.agent.md @@ -3,12 +3,12 @@ description: "Switch to the QA track" tools: ["read", "edit"] --- -Switch to the QA track (lessons 21-25). Do the following steps in order: +Switch to the QA track (lessons 22-26). Do the following steps in order: 1. Read the file `tutorial/state.json` 2. Set the `track` field to `"qa"` -3. If `currentLesson` is less than 21, set `currentLesson` to 21 (otherwise keep it as-is) +3. If `currentLesson` is less than 22, set `currentLesson` to 22 (otherwise keep it as-is) 4. Write the updated JSON back to `tutorial/state.json` -5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 21 becomes "21-") +5. Determine the lesson filename: look in `tutorial/lessons/` for the file whose name starts with the zero-padded lesson number (e.g., lesson 22 becomes "22-") 6. Read that lesson file 7. Present its contents to the user. Mention that they've switched to the QA track. If the lesson has an Exercise section, make it visually distinct so the user knows exactly what to do next. diff --git a/.github/agents/skip.agent.md b/.github/agents/skip.agent.md index 6b69daf..20e3ef3 100644 --- a/.github/agents/skip.agent.md +++ b/.github/agents/skip.agent.md @@ -7,7 +7,7 @@ Skip the current exercise and move to the next lesson. Do the following steps: 1. Read `tutorial/state.json` 2. Add the current lesson number to the `skippedLessons` array if not already there -3. Increment `currentLesson` by 1. Read the `track` field (default `"core"` if missing). Cap at 31 if `track` is `"design"`, at 25 if `track` is `"qa"`, or at 20 if `track` is `"core"`. +3. Increment `currentLesson` by 1. Read the `track` field (default `"core"` if missing). Cap at 32 if `track` is `"design"`, at 26 if `track` is `"qa"`, or at 21 if `track` is `"core"`. 4. Write the updated state back to `tutorial/state.json` 5. Read the next lesson file from `tutorial/lessons/` (zero-padded prefix) 6. Present it to the user. Briefly acknowledge the skip in a neutral way — something like "Moving on!" — without making the user feel bad. Everyone learns at their own pace. diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 715752d..ab3eb96 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -18,8 +18,8 @@ You are running as an interactive tutorial guide for GitHub Copilot CLI. Your jo | `hint` | Get a hint for the current exercise | | `skip` | Skip the current exercise | | `progress` | See tutorial progress | -| `qa` | Switch to the QA track (lessons 21-25) | -| `design` | Switch to the Design track (lessons 26-31) | +| `qa` | Switch to the QA track (lessons 22-26) | +| `design` | Switch to the Design track (lessons 27-32) | | `core` | Switch back to the core track | When suggesting navigation to the user, tell them to type `/agent` and select from the list, or say "next" / "next lesson" / "give me a hint" etc. — you should infer which agent to use from natural language. @@ -86,43 +86,34 @@ The tutorial frequently edits `tutorial/state.json` for navigation. If the user The tutorial includes optional specialist tracks for QA engineers and designers. It is controlled by the `track` field in `tutorial/state.json`: -- `"core"` (default) — Lessons 0-20, the standard developer-focused track -- `"qa"` — Lessons 21-25, focused on QA workflows -- `"design"` — Lessons 26-31, focused on design workflows +- `"core"` (default) — Lessons 0-21, the standard developer-focused track +- `"qa"` — Lessons 22-26, focused on QA workflows +- `"design"` — Lessons 27-32, focused on design workflows ### Track Navigation | Say this | Or type this | What it does | |----------|-------------|-------------| -| "switch to QA track" | `/agent qa` | Switch to the QA track (starts at lesson 21) | -| "switch to Design track" | `/agent design` | Switch to the Design track (starts at lesson 26) | +| "switch to QA track" | `/agent qa` | Switch to the QA track (starts at lesson 22) | +| "switch to Design track" | `/agent design` | Switch to the Design track (starts at lesson 27) | | "switch to core track" | `/agent core` | Switch back to the core track | ### QA Lessons -- **21: Test Planning from Requirements** — Analyse a feature request and create a structured test plan -- **22: Test Case Design & Coverage** — Identify coverage gaps and design test cases using QA techniques -- **23: Automated Test Generation** — Turn test cases into running Vitest tests -- **24: E2E Testing with Playwright** — Write Playwright tests for the web UI -- **25: QA Track Graduation** — Recap and bonus challenges +- **22: Test Planning from Requirements** — Analyse a feature request and create a structured test plan +- **23: Test Case Design & Coverage** — Identify coverage gaps and design test cases using QA techniques +- **24: Automated Test Generation** — Turn test cases into running Vitest tests +- **25: E2E Testing with Playwright** — Write Playwright tests for the web UI +- **26: QA Track Graduation** — Recap and bonus challenges ### Design Lessons -- **26: Translating Mockups to Specs** — Use Copilot to turn a visual design into a structured implementation spec -- **27: Accessibility & Design Review** — Audit a UI against WCAG 2.1 AA and create a reusable `a11y` agent -- **28: Design System Instructions** — Encode design system conventions in `copilot-instructions.md` so Copilot enforces them automatically -- **29: Designer ↔ Developer Handoff** — Use the "interview me" pattern to produce a developer-ready handoff spec -- **30: Rapid Prototyping** — Generate a working, interactive HTML prototype from the handoff spec in the same session -- **31: Design Track Graduation** — Recap and bonus challenges - -### Design Lessons - -- **25: Translating Mockups to Specs** — Use Copilot to turn a visual design into a structured implementation spec -- **26: Accessibility & Design Review** — Audit a UI against WCAG 2.1 AA and create a reusable `a11y` agent -- **27: Design System Instructions** — Encode design system conventions in `copilot-instructions.md` so Copilot enforces them automatically -- **28: Designer ↔ Developer Handoff** — Use the "interview me" pattern to produce a developer-ready handoff spec -- **29: Rapid Prototyping** — Generate a working, interactive HTML prototype from the handoff spec in the same session -- **30: Design Track Graduation** — Recap and bonus challenges +- **27: Translating Mockups to Specs** — Use Copilot to turn a visual design into a structured implementation spec +- **28: Accessibility & Design Review** — Audit a UI against WCAG 2.1 AA and create a reusable `a11y` agent +- **29: Design System Instructions** — Encode design system conventions in `copilot-instructions.md` so Copilot enforces them automatically +- **30: Designer ↔ Developer Handoff** — Use the "interview me" pattern to produce a developer-ready handoff spec +- **31: Rapid Prototyping** — Generate a working, interactive HTML prototype from the handoff spec in the same session +- **32: Design Track Graduation** — Recap and bonus challenges The `next`, `skip`, and `progress` agents are track-aware — they respect the active track's lesson range. The hooks work with any lesson number automatically. diff --git a/README.md b/README.md index 651177b..3c0c76b 100644 --- a/README.md +++ b/README.md @@ -31,8 +31,8 @@ You can navigate the tutorial using natural language or the `/agent` command: | "hint" or "give me a hint" | `/agent hint` | Get a hint for the current exercise | | "skip" or "skip this" | `/agent skip` | Skip the current exercise | | "progress" or "show progress" | `/agent progress` | See your tutorial progress | -| "switch to QA track" | `/agent qa` | Switch to the QA track (lessons 21-25) | -| "switch to Design track" | `/agent design` | Switch to the Design track (lessons 26-31) | +| "switch to QA track" | `/agent qa` | Switch to the QA track (lessons 22-26) | +| "switch to Design track" | `/agent design` | Switch to the Design track (lessons 27-32) | | "switch to core track" | `/agent core` | Switch back to the core track | ## Specialist Tracks @@ -41,13 +41,13 @@ The tutorial includes two optional specialist tracks. ### QA Track -The QA track (lessons 21-25) is for QA engineers. It covers test planning, test case design, automated test generation, and E2E testing with Playwright. +The QA track (lessons 22-26) is for QA engineers. It covers test planning, test case design, automated test generation, and E2E testing with Playwright. To start the QA track, say "switch to QA track" or type `/agent qa`. ### Design Track -The Design track (lessons 26-31) is for designers and frontend developers. It covers translating mockups, accessibility reviews, design system instructions, designer-developer handoff, and rapid prototyping. +The Design track (lessons 27-32) is for designers and frontend developers. It covers translating mockups, accessibility reviews, design system instructions, designer-developer handoff, and rapid prototyping. To start the Design track, say "switch to Design track" or type `/agent design`. diff --git a/tutorial/lessons/00-welcome.md b/tutorial/lessons/00-welcome.md index f422dd5..c330215 100644 --- a/tutorial/lessons/00-welcome.md +++ b/tutorial/lessons/00-welcome.md @@ -33,9 +33,10 @@ You can also use `/agent` and select from the list of tutorial agents. 15. **Programmatic Mode** — Run Copilot from scripts and CI/CD 16. **Model Selection** — Choose the right model for each task 17. **CLI Tools & MCP Servers** — Use any CLI tool and structured tool access -18. **Working with Images** — Debug from screenshots and mockups -19. **Premium Requests** — How Copilot billing works and what consumes your allowance -20. **Graduation** — Bonus challenges and where to go next +18. **LSP Servers** — Set up language servers for precise code intelligence +19. **Working with Images** — Debug from screenshots and mockups +20. **Premium Requests** — How Copilot billing works and what consumes your allowance +21. **Graduation** — Bonus challenges and where to go next ## Coming from IDE Copilots? @@ -46,7 +47,7 @@ If you've used GitHub Copilot in VS Code, JetBrains, or other editors, here's ho - **Runs commands** — Copilot executes tests, builds, type-checkers, and git commands, then reads the output and reacts. It's not just suggesting code — it's verifying it works. - **Persistent memory** — `.github/copilot-instructions.md` files store your conventions, architecture decisions, and rules. Copilot reads them every session — no re-explaining. - **Three interaction modes** — **Shift+Tab** cycles between Normal (confirm each edit), Autopilot (apply without asking), and Plan (explore without changing anything). You control how much autonomy Copilot has at any point. -- **Works with images** — drag-and-drop screenshots, mockups, or error dialogs directly into the conversation (details in Lesson 17). +- **Works with images** — drag-and-drop screenshots, mockups, or error dialogs directly into the conversation (details in Lesson 19). - **Multiple models** — Switch between models with the `/model` command mid-session. None of this replaces what you already know — it builds on it. If you've been using Copilot for inline completions, chat, or code explanations, Copilot CLI handles all of those and more. This tutorial shows you what's different. diff --git a/tutorial/lessons/18-lsp-servers.md b/tutorial/lessons/18-lsp-servers.md new file mode 100644 index 0000000..ccb146a --- /dev/null +++ b/tutorial/lessons/18-lsp-servers.md @@ -0,0 +1,136 @@ +# Lesson 18: LSP Servers + +## What You'll Learn + +What Language Server Protocol (LSP) servers are, why configuring one transforms the quality of Copilot's code intelligence, and how to set one up for your project in under five minutes. + +## Concepts + +### What is an LSP Server? + +A Language Server Protocol (LSP) server is a process that understands a specific programming language deeply. It knows the types, the symbol definitions, the references, and the diagnostics for your code — not by reading files as text, but by actually analysing the language. + +Language servers power the "go to definition", "find all references", and inline error highlighting you're used to in your IDE. When you configure one for Copilot CLI, Copilot gains access to those same capabilities as tools it can call during a session. + +### Why does this matter for Copilot CLI? + +Without an LSP server, Copilot reads your code as text. When it needs to find a symbol it falls back to grep-style text search across your files — slower, and prone to false matches (e.g. a variable named `task` appearing in comments, strings, and unrelated files). It's smart enough to infer a lot, but it's still working from patterns rather than facts. + +With an LSP server configured, Copilot can: + +| Capability | What it enables | +|-----------|----------------| +| **Go to definition** | Jump to exactly where a function, type, or variable is defined — across any file | +| **Find all references** | See every place a symbol is used before changing or deleting it | +| **Hover information** | Get type signatures and documentation for any identifier | +| **Diagnostics** | See real compiler errors and warnings, not just inferred problems | + +The difference is most visible on large codebases. When Copilot can navigate your code with the precision of a language server, it makes fewer mistakes when refactoring, catches type errors before writing the fix, and understands the impact of a change before making it. + +### Installing a language server + +Copilot CLI does not bundle language servers — you install them separately, the same way you would for your IDE. + +For TypeScript and JavaScript: + +``` +npm install -g typescript-language-server typescript +``` + +For other languages, install the corresponding server. A few common ones: + +| Language | Install command | +|----------|----------------| +| TypeScript / JavaScript | `npm install -g typescript-language-server typescript` | +| Python | `pip install python-lsp-server` | +| Go | `go install golang.org/x/tools/gopls@latest` | +| Rust | `rustup component add rust-analyzer` | +| Java | [Eclipse JDT LS](https://github.com/eclipse/eclipse.jdt.ls) | + +If the language server fails to start, ask Copilot to help you troubleshoot. Package managers can place binaries and libraries in non-standard locations — for example, with pnpm you may need to create a symlink so that `typescript-language-server` can find the `typescript` package in `node_modules`. Paste the error from `/lsp` into the chat and Copilot can suggest the exact fix for your environment. + +### Configuring the language server + +You can configure LSP servers at two levels: + +**User-level** (applies to all your projects): +Edit `~/.copilot/lsp-config.json` + +**Repository-level** (applies only to this project): +Create `.github/lsp.json` in your repository root + +Both files use the same format. Here is a working configuration for TypeScript: + +```json +{ + "lspServers": { + "typescript": { + "command": "typescript-language-server", + "args": ["--stdio"], + "fileExtensions": { + ".ts": "typescript", + ".tsx": "typescript", + ".js": "javascript", + ".jsx": "javascript" + } + } + } +} +``` + +The `command` field is the executable to run. The `args` field passes `--stdio` so the server communicates over standard input/output. The `fileExtensions` map tells Copilot which language ID to use for each file extension. + +### Checking your configuration + +Run `/lsp` inside a Copilot CLI session to see which LSP servers are configured and whether they started successfully. + +## Exercise + +**Configure the TypeScript language server for the sample app.** + +1. Install the TypeScript language server globally: + + ``` + npm install -g typescript-language-server typescript + ``` + +2. Create a repository-level LSP configuration file at `.github/lsp.json` with the following content: + + ```json + { + "lspServers": { + "typescript": { + "command": "typescript-language-server", + "args": ["--stdio"], + "fileExtensions": { + ".ts": "typescript", + ".tsx": "typescript", + ".js": "javascript", + ".jsx": "javascript" + } + } + } + } + ``` + +3. Ask Copilot to use go-to-definition on the `addTask` function: + + > "Use go-to-definition on the `addTask` function and show me its full implementation." + + Notice how Copilot navigates directly to the definition rather than searching by filename. + +4. Run `/lsp` to confirm the TypeScript server is running. + +## Hints + +1. The `typescript-language-server` package requires `typescript` to be installed too — make sure to install both in step 1. +2. The configuration file goes in `.github/lsp.json` at the root of the repository (next to `.github/copilot-instructions.md`). +3. If Copilot doesn't seem to use the LSP server, restart your session — LSP servers are started when Copilot CLI launches. +4. You can scope LSP configuration to a single project by using `.github/lsp.json` rather than editing the global `~/.copilot/lsp-config.json`. + +## Completion Criteria + +- A file exists at `.github/lsp.json` containing a valid LSP server configuration. +- The TypeScript language server is installed (`typescript-language-server --version` returns a version number). + +When you're done, say **"next"** to continue. diff --git a/tutorial/lessons/18-working-with-images.md b/tutorial/lessons/19-working-with-images.md similarity index 98% rename from tutorial/lessons/18-working-with-images.md rename to tutorial/lessons/19-working-with-images.md index 7376df4..c1cebb2 100644 --- a/tutorial/lessons/18-working-with-images.md +++ b/tutorial/lessons/19-working-with-images.md @@ -1,4 +1,4 @@ -# Lesson 18: Working with Images +# Lesson 19: Working with Images ## What You'll Learn diff --git a/tutorial/lessons/19-billing-and-premium-requests.md b/tutorial/lessons/20-billing-and-premium-requests.md similarity index 99% rename from tutorial/lessons/19-billing-and-premium-requests.md rename to tutorial/lessons/20-billing-and-premium-requests.md index 21276c6..7dd6125 100644 --- a/tutorial/lessons/19-billing-and-premium-requests.md +++ b/tutorial/lessons/20-billing-and-premium-requests.md @@ -1,4 +1,4 @@ -# Lesson 19: Premium Requests +# Lesson 20: Premium Requests ## What You'll Learn diff --git a/tutorial/lessons/20-graduation.md b/tutorial/lessons/21-graduation.md similarity index 99% rename from tutorial/lessons/20-graduation.md rename to tutorial/lessons/21-graduation.md index 3f08544..ec430b5 100644 --- a/tutorial/lessons/20-graduation.md +++ b/tutorial/lessons/21-graduation.md @@ -1,4 +1,4 @@ -# Lesson 20: Graduation +# Lesson 21: Graduation ## You Did It diff --git a/tutorial/lessons/21-test-planning.md b/tutorial/lessons/22-test-planning.md similarity index 98% rename from tutorial/lessons/21-test-planning.md rename to tutorial/lessons/22-test-planning.md index e5a2566..42703c3 100644 --- a/tutorial/lessons/21-test-planning.md +++ b/tutorial/lessons/22-test-planning.md @@ -1,4 +1,4 @@ -# Lesson 21: Test Planning from Requirements +# Lesson 22: Test Planning from Requirements ## What You'll Learn diff --git a/tutorial/lessons/22-test-case-design.md b/tutorial/lessons/23-test-case-design.md similarity index 98% rename from tutorial/lessons/22-test-case-design.md rename to tutorial/lessons/23-test-case-design.md index bec1491..194a801 100644 --- a/tutorial/lessons/22-test-case-design.md +++ b/tutorial/lessons/23-test-case-design.md @@ -1,4 +1,4 @@ -# Lesson 22: Test Case Design & Coverage Analysis +# Lesson 23: Test Case Design & Coverage Analysis ## What You'll Learn diff --git a/tutorial/lessons/23-automated-test-generation.md b/tutorial/lessons/24-automated-test-generation.md similarity index 92% rename from tutorial/lessons/23-automated-test-generation.md rename to tutorial/lessons/24-automated-test-generation.md index 426ae92..27d4469 100644 --- a/tutorial/lessons/23-automated-test-generation.md +++ b/tutorial/lessons/24-automated-test-generation.md @@ -1,4 +1,4 @@ -# Lesson 23: Automated Test Generation +# Lesson 24: Automated Test Generation ## What You'll Learn @@ -13,7 +13,7 @@ A test plan on paper is valuable, but automated tests are what catch regressions 3. **Run and observe** — Execute the tests and read the output carefully 4. **Investigate failures** — When a test fails, it might be a bug in the test OR a bug in the code. Good test cases make this easy to distinguish. -This lesson demonstrates a key QA insight: **well-designed tests find real bugs**. The sample app's `formatTaskList` function has a 0-indexing bug — it numbers tasks starting from 0 instead of 1. If your test cases from Lesson 22 included boundary value tests for list formatting, the automated tests should catch this. +This lesson demonstrates a key QA insight: **well-designed tests find real bugs**. The sample app's `formatTaskList` function has a 0-indexing bug — it numbers tasks starting from 0 instead of 1. If your test cases from Lesson 23 included boundary value tests for list formatting, the automated tests should catch this. ## Exercise @@ -21,13 +21,13 @@ This lesson demonstrates a key QA insight: **well-designed tests find real bugs* Ask Copilot to: -1. Read `@exercises/sample-app/TEST-CASES.md` (the test cases you designed in Lesson 22) +1. Read `@exercises/sample-app/TEST-CASES.md` (the test cases you designed in Lesson 23) 2. Create `exercises/sample-app/tests/formatters.test.ts` with Vitest tests based on those test cases 3. Run `npm test` from the `exercises/sample-app/` directory 4. If tests fail, determine whether the failure is a test bug or a code bug 5. Fix the `formatTaskList` bug in `src/formatters.ts` (it uses 0-based indexing instead of 1-based) and verify all tests pass -If you haven't completed Lesson 22, you can still do this exercise — just ask Copilot to analyse `@exercises/sample-app/src/formatters.ts` and write comprehensive tests for it. +If you haven't completed Lesson 23, you can still do this exercise — just ask Copilot to analyse `@exercises/sample-app/src/formatters.ts` and write comprehensive tests for it. ## Hints diff --git a/tutorial/lessons/24-e2e-testing-playwright.md b/tutorial/lessons/25-e2e-testing-playwright.md similarity index 98% rename from tutorial/lessons/24-e2e-testing-playwright.md rename to tutorial/lessons/25-e2e-testing-playwright.md index 178dd5e..11b96b1 100644 --- a/tutorial/lessons/24-e2e-testing-playwright.md +++ b/tutorial/lessons/25-e2e-testing-playwright.md @@ -1,4 +1,4 @@ -# Lesson 24: E2E Testing with Playwright +# Lesson 25: E2E Testing with Playwright ## What You'll Learn diff --git a/tutorial/lessons/25-qa-track-graduation.md b/tutorial/lessons/26-qa-track-graduation.md similarity index 98% rename from tutorial/lessons/25-qa-track-graduation.md rename to tutorial/lessons/26-qa-track-graduation.md index 442e882..c44dc51 100644 --- a/tutorial/lessons/25-qa-track-graduation.md +++ b/tutorial/lessons/26-qa-track-graduation.md @@ -1,4 +1,4 @@ -# Lesson 25: QA Track Graduation +# Lesson 26: QA Track Graduation ## You Did It diff --git a/tutorial/lessons/26-translating-mockups.md b/tutorial/lessons/27-translating-mockups.md similarity index 98% rename from tutorial/lessons/26-translating-mockups.md rename to tutorial/lessons/27-translating-mockups.md index 201632f..cd68614 100644 --- a/tutorial/lessons/26-translating-mockups.md +++ b/tutorial/lessons/27-translating-mockups.md @@ -1,4 +1,4 @@ -# Lesson 26: Translating Mockups to Specs +# Lesson 27: Translating Mockups to Specs ## What You'll Learn diff --git a/tutorial/lessons/27-accessibility-review.md b/tutorial/lessons/28-accessibility-review.md similarity index 98% rename from tutorial/lessons/27-accessibility-review.md rename to tutorial/lessons/28-accessibility-review.md index 4a63a1a..efb598b 100644 --- a/tutorial/lessons/27-accessibility-review.md +++ b/tutorial/lessons/28-accessibility-review.md @@ -1,4 +1,4 @@ -# Lesson 27: Accessibility & Design Review +# Lesson 28: Accessibility & Design Review ## What You'll Learn diff --git a/tutorial/lessons/28-design-system-instructions.md b/tutorial/lessons/29-design-system-instructions.md similarity index 98% rename from tutorial/lessons/28-design-system-instructions.md rename to tutorial/lessons/29-design-system-instructions.md index 549a5fb..a6790ec 100644 --- a/tutorial/lessons/28-design-system-instructions.md +++ b/tutorial/lessons/29-design-system-instructions.md @@ -1,4 +1,4 @@ -# Lesson 28: Design System Instructions +# Lesson 29: Design System Instructions ## What You'll Learn diff --git a/tutorial/lessons/29-designer-developer-handoff.md b/tutorial/lessons/30-designer-developer-handoff.md similarity index 98% rename from tutorial/lessons/29-designer-developer-handoff.md rename to tutorial/lessons/30-designer-developer-handoff.md index f050786..21d7711 100644 --- a/tutorial/lessons/29-designer-developer-handoff.md +++ b/tutorial/lessons/30-designer-developer-handoff.md @@ -1,4 +1,4 @@ -# Lesson 29: Designer ↔ Developer Handoff +# Lesson 30: Designer ↔ Developer Handoff ## What You'll Learn diff --git a/tutorial/lessons/30-rapid-prototyping.md b/tutorial/lessons/31-rapid-prototyping.md similarity index 94% rename from tutorial/lessons/30-rapid-prototyping.md rename to tutorial/lessons/31-rapid-prototyping.md index 2d81b84..6a35d59 100644 --- a/tutorial/lessons/30-rapid-prototyping.md +++ b/tutorial/lessons/31-rapid-prototyping.md @@ -1,4 +1,4 @@ -# Lesson 30: Rapid Prototyping +# Lesson 31: Rapid Prototyping ## What You'll Learn @@ -12,7 +12,7 @@ This is the output designers on this workflow are expected to produce. Not just A spec tells a developer what to build. A prototype shows them — and shows stakeholders, and shows the designer — whether the idea actually works before any production code is written. -Copilot CLI can generate working HTML, CSS, and JavaScript directly from a spec. That means the handoff document you produced in Lesson 29 is not the end of the process — it is the input to a working prototype you can share immediately. +Copilot CLI can generate working HTML, CSS, and JavaScript directly from a spec. That means the handoff document you produced in Lesson 30 is not the end of the process — it is the input to a working prototype you can share immediately. ### Prototypes are not production code @@ -42,9 +42,9 @@ Self-contained HTML files are ideal for this. Everything — styles, scripts, ma ## Exercise -**Generate a working prototype from your Lesson 29 handoff spec.** +**Generate a working prototype from your Lesson 30 handoff spec.** -First, confirm your `HANDOFF.md` exists from Lesson 29. If you skipped that lesson, create a brief spec now for any feature of the task manager. +First, confirm your `HANDOFF.md` exists from Lesson 30. If you skipped that lesson, create a brief spec now for any feature of the task manager. Then use this prompt: diff --git a/tutorial/lessons/31-design-track-graduation.md b/tutorial/lessons/32-design-track-graduation.md similarity index 97% rename from tutorial/lessons/31-design-track-graduation.md rename to tutorial/lessons/32-design-track-graduation.md index 01cc908..c99e4e2 100644 --- a/tutorial/lessons/31-design-track-graduation.md +++ b/tutorial/lessons/32-design-track-graduation.md @@ -1,4 +1,4 @@ -# Lesson 31: Design Track Graduation +# Lesson 32: Design Track Graduation ## You Did It @@ -35,7 +35,7 @@ Configure a Figma MCP server with `/mcp add` (you will need a Figma API token). ### 4. Cross-Team Spec Review -Share your `HANDOFF.md` from Lesson 29 with a developer colleague. Ask them to review it as if they were about to build it. Note every question they ask. Update the spec to answer those questions. This is the fastest way to improve your handoff quality — real developer feedback, no code written yet. +Share your `HANDOFF.md` from Lesson 30 with a developer colleague. Ask them to review it as if they were about to build it. Note every question they ask. Update the spec to answer those questions. This is the fastest way to improve your handoff quality — real developer feedback, no code written yet. ### 5. Agent Library