Lesson 9.2 · 50 minThe section 1 habits in Codex

What you will have

The student has run one plan, build and review loop in Codex, has the Playwright browser MCP server connected to Codex, and holds a table that gives the Codex equivalent of every Claude Code feature used in sections 0 and 1, including the ones that have none.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 3 — The brief and project memory: lessons 1.1 and 1.2

I want to check what you loaded before we work.

List the instruction files you read at the start of this session, in order,
and say in one sentence what each one told you.

Done means I can compare your list with my project. Do not change anything.

Part 4 — Plan first: lesson 1.3

/plan Purpose: I want a short "Services" section on about-me.html so a visitor
sees what Brightside Cleaning offers.

Context: The page is one file with its styling inside it. The services are
Regular clean, Deep clean and End-of-tenancy clean, each with one sentence.
Put the section above the Contact section.

Done looks like: the section shows three services in the page's existing
style, and nothing is cut off in a narrow, phone-width window.

Constraints: edit only about-me.html. No prices. No JavaScript.

Give me a plan first: what you will change, in what order, how I can check
it, and anything you are unsure about.

One change to the plan: add a fourth line under the three services, "Not sure
which one you need? Ask us." Mark this item "(changed by me)". Show me the
updated plan.

Part 6 — Extensions: lesson 1.6

Purpose: I want you to look at my page in a real browser and tell me what a
visitor sees.

Context: A local web server is already running for this folder at the address
http://localhost:3000. The page is about-me.html. Use the Playwright browser
tools.

Done looks like: you open the page, save a screenshot as
screenshots/about-me.png, and describe in five sentences what is visible.

Constraints: create no file other than the screenshot and change none.
Describe only what the browser shows.

Do along

Do these steps on your own project, pausing the video where a step says so.

1. Pause after Part 4. Start codex in your project and set Read Only with /permissions.
2. Send the /plan brief from Part 4. Adapt: your own three services.
3. Read the plan. Ask for one change, marked "(changed by me)".
4. Tell Codex to implement the plan. Read and approve the edit.
5. Pause after Part 5. Run /diff, then /review on the uncommitted changes. Reload the page.
6. Pause after Part 6. Exit Codex. Run codex mcp add playwright -- npx -y @playwright/mcp@latest, then codex mcp list.
7. In a second terminal, run npx --yes serve . in the project folder and note the address it prints.
8. Start codex, check /mcp, and send the browser prompt from Part 6 with your address.
9. Compare the screenshot with the description. Ask Codex to add .playwright-mcp/ to .gitignore.
10. Stop the web server with Ctrl+C. Ask Codex to commit ("Bonus 9.2: services section, browser connected") and push.

Check your work

1. Open about-me.html in the browser. Expected: the Services section, including the item you added to the plan.
2. Run codex mcp list. Expected: a playwright line.
3. Open screenshots/about-me.png. Expected: a picture of your page; every sentence of Codex's description is visible in it.
4. Without the table, name the Codex equivalent of plan mode, Manual mode, /context and /rewind. Expected: /plan; /permissions → Read Only; none, ask which files were loaded; none, use Git.
5. Run git status. Expected: nothing to commit.

Common problems

• Codex started editing without showing a plan. → The request was sent without /plan. → Stop it, restore the file with git restore about-me.html, and send the brief again after /plan.
• Codex says it has no browser tools. → The session started before the server was added. → Exit, start codex again, check /mcp.
• The browser cannot open the page. → The web server is not running, or the address differs. → Run npx --yes serve . yourself and give Codex the address it prints.
• A skill you created is not offered. → It is in .claude/skills/, or the session is older than the skill. → Move it to .agents/skills/<name>/SKILL.md and start a new session.

Homework

About 30 minutes, after the lesson, on your own. Nothing later in the course depends on it.

1. The loop again, on your own change. Choose one more small addition to your page that your business needs (the area you serve, a short "About us"). Write the four-part brief yourself and send it after /plan. Change the plan once, have it implemented, then run /diff and /review. Ask Codex to commit and push, without a tag. Deliverable: the commit. Done when: the addition shows on the page and you can say which item of the plan was yours.
2. Undo with Git, on purpose. With git status clean, ask Codex for a change you do not want, such as a red main heading. Approve it and look at /diff. Then run git restore about-me.html in your own terminal and reload the page. Deliverable: the restored page. Done when: the page looks as before and git status reports nothing to commit.
3. A second look through the browser. Start the web server yourself as in Part 6. Reuse the browser prompt, but ask Codex to check the change from task 1 in a narrow, phone-width window and save screenshots/about-me-narrow.png. Compare its description with the picture. Commit the screenshot, without a tag. Deliverable: the screenshot. Done when: every sentence of the description is visible in it, or you have written down which sentence was not.