Lesson 1.6 · 45 minExtending Claude: skills, MCP servers and subagents

What you will have

Claude Code is connected to a browser through the Playwright MCP server and has reported on the mini-site from a real browser session. The student can say what a skill, an MCP server and a subagent are, and how to decide whether to install one.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 2 — Skills: packaged instructions

Purpose: I run the same review after every task and want it as a skill I can call with one command.

Context: My checklist is docs/review-checklist.md. Project skills live in .claude/skills/<skill-name>/SKILL.md.

Done looks like: A skill named review-changes that lists the files changed since the last commit, explains each change in plain language and answers my five checklist questions.

Constraints: Create only that file. The skill reports; it never changes project files.

Part 3 — MCP servers: connecting a browser

Purpose: I want you to look at the mini-site in a real browser and tell me what a visitor sees.

Context: The site is in practice/mini-site/. The browser tools cannot open files directly, so start a local web server for that folder with `npx --yes serve practice/mini-site`, keep it running in the background, and use the address it prints. Use the Playwright browser tools.

Done looks like: You open the Home page, take a screenshot saved as practice/mini-site/screenshots/home.png, and describe in five or six plain sentences what is visible: the headline, the navigation items, the main link, the footer text.

Constraints: Create no file other than the screenshot and change none. Describe only what the browser shows. Stop the web server when you are done.

Add .playwright-mcp/ to .gitignore so those files are never committed. Create .gitignore if it does not exist. Change nothing else.

Part 4 — Subagents: a helper with its own memory

Use a subagent to read every file under practice/ and report back a short table: folder, what it contains, and which opening hours it shows, if any. Do not change any file.

Do along

Pause after Part 3 and do steps 1 to 6; do step 7 when the video ends. The skill from Part 2 and the subagent from Part 4 come in the homework.

1. Pause after Part 3. Exit Claude Code. In the terminal, in your project folder, run:

claude mcp add playwright -- npx -y @playwright/mcp@latest

1. Run claude mcp list. Wait until playwright shows as connected.
2. Start claude. Run /mcp and find playwright in the list.
3. Send the browser prompt from Part 3. Approve the browser actions if asked.
4. Open practice/mini-site/screenshots/home.png and compare Claude's description with it. Then ask one follow-up of your own, such as which prices the Services page shows.
5. Send the .gitignore prompt from Part 3.
6. After Part 5. Type checkpoint please. After the summary, check that no .playwright-mcp files are listed, then run the checkpoint commands below.

Check your work

1. Run claude mcp list. Expected: a playwright line marked as connected.
2. Open practice/mini-site/screenshots/home.png. Expected: a picture of your Home page.
3. Read Claude's description next to the screenshot. Expected: every statement is visible in the picture, and the address Claude opened begins with http://localhost.
4. Run git status before committing. Expected: the screenshots and .gitignore are listed; nothing from .playwright-mcp/ is.
5. After the checkpoint commands, run git tag. Expected: lesson-1.6 in the list.

Common problems

• claude mcp list shows playwright as failed. → Check node --version (18 or newer) and your connection. Run claude mcp get playwright, copy the issue it shows, and give it to Claude with the cause-first brief from lesson 1.5.
• Claude says it has no browser tools. → The session started before the server was added, or in a different folder. → Start claude again from the project folder and check /mcp.
• Error: access to the "file:" protocol is blocked. → Claude tried to open the HTML file directly. → Say: "Serve the folder with npx --yes serve practice/mini-site and open the localhost address instead."
• The browser does not open, or the error mentions a missing browser. → Install Google Chrome, or remove the server and add it again with --browser msedge at the end of the command.
• .playwright-mcp files appear in git status. → Send the .gitignore prompt, then check again.
• /review-changes is not found. → The skills folder was created during this session. → Run /reload-skills.

Homework

About 30 minutes, after the lesson and after the lesson-1.6 tag. Nothing later depends on it. Notes go in practice/homework/1.6/; at the end, commit with checkpoint please and the message "Homework 1.6" (no tag).

1. Your review as a skill. Send the skill prompt from Part 2, read the SKILL.md it creates, and run /reload-skills. Then ask Claude to create practice/homework/1.6/note.md containing one sentence, and run /review-changes. Done when: the report lists that file and answers your five checklist questions, and the skill itself changed nothing.
2. The other two pages. Reuse the browser prompt from Part 3 for the Services page and the Contact page, with screenshots saved as services.png and contact.png next to home.png. Done when: you have compared each description with its picture sentence by sentence and written any mismatch, or "none", in browser-notes.md.
3. A subagent. Send the subagent prompt from Part 4. Done when: you have checked two rows of the table against the real files and added the result to browser-notes.md.
4. Trust check, without installing. Pick one skill or MCP server you might want for your own business, for example for the calendar or spreadsheet you already use. Read its page and answer the three "before you install" questions in trust-check.md, ending with "install" or "do not install" and why. Do not install it. Done when: three answers and a verdict are written, and each answer says where you found the information.

Save your work

git add -A
git commit -m "Lesson 1.6: browser MCP server connected, mini-site checked in a real browser"
git tag lesson-1.6
git push
git push --tags