Skip to content
bits
Build the front end with agents · Lesson 1 of 11 · 15 min

Your coding agent

Desk: best at a computer, with a terminal

Verified claude-code 2.1.317

Start from c-09 on GitHub. Starting here, or behind? Get the code at that tag:

Shell
git clone https://github.com/ryanyogan/klippy
cd klippy
git checkout c-09
Tutor:

In this course you direct a coding agent, Claude Code, to build Klippy's web app. Your job changes: less typing, more briefing and reviewing. If you're joining here, start from tag c-09 (the box above clones it), then run pnpm install.

Tutor:

1. Install Claude Code

From Claude Code's setup page (macOS, Linux, WSL):

Shell
curl -fsSL https://claude.ai/install.sh | bash

Windows has its own line on the setup page. Then start it in your repo:

Shell
cd klippy
claude

It asks you to sign in the first time; the setup page says which accounts work.

Tutor:

2. What it reads first

Every session starts from nothing. Claude Code reads a short file of project instructions before your first message, so you don't repeat yourself each time. It reads CLAUDE.md, or AGENTS.md when there's no CLAUDE.md. (Have both? Put @AGENTS.md at the top of CLAUDE.md.)

Keep it short: only what the agent can't learn quickly from the code. Every line is read every session, so every line spends context.

Tutor:

3. Write it together

Paste this into Claude Code:

Plain text
Goal: write AGENTS.md for this repo, so every future session starts knowing how Klippy is built and checked.
Read README.md, package.json, apps/agent/package.json and apps/agent/wrangler.jsonc first. Don't read every file.
Constraints:
- Under 60 lines. Only what you can't learn quickly from the code: layout, commands, rules, "done means".
- Rules to include: read installed docs for agents/ai/remix; exact pinned versions; tests never call a real model;
  secrets only in .dev.vars and wrangler secret put; budget routes keep token, rate limit and input cap.
- Create only AGENTS.md. Don't change any other file.
Plan first: show me the outline, then wait for my go-ahead.
Done when the file exists and `wc -l AGENTS.md` is under 60.
Report the line count and anything you left out on purpose.

Every prompt in this course has the same five parts. Here's why each is there:

  • Goal, with the reason. "So every future session starts knowing…" lets the agent make the calls you didn't list.

  • Where to look. Four files, not the whole repo: context is a budget.

  • Constraints. A size cap, the rules you care about, one file only.

  • Plan first. A wrong outline costs a sentence to fix. A wrong file costs a review.

  • Done when, and a report. A check it runs itself, and what it ran and saw. Never "it should work".

Tutor:

4. What to expect

One new file. Ours is 30 lines: Layout, Commands, Rules, Done means. The rules are the part that matters most:

## Rules
- Read the installed docs before using an API you aren't sure of (`node_modules/<pkg>/docs` or README).
`agents`, `ai` and `remix` change fast; don't trust memory for them.
- Pin exact versions (no `^`). Check a new version with `npm view <pkg> version` the day you add it.
- Tests never call a real model or the real internet: mock `../src/model` and `fetch`.
- Secrets live in `.dev.vars` (gitignored) and `wrangler secret put`. Never write a real key into a file.
- Every route that spends model budget keeps its token check, its rate limit and its input cap.
- Keep changes small: one lesson, one change. Ask before adding a dependency.
## Done means
`pnpm typecheck` and `pnpm test` pass, and you've said what you ran and what you saw.
Plain textUTF-8at d-01
Tutor:

The agent may offer /init instead. That's a fine start, but /init writes a long file from the code: cut it down to what the code can't tell you.

How we made ours. Our AGENTS.md was written by an agent against this prompt, not recorded from a fresh Claude Code run. Your file will differ. The check below is a real run.

Tutor:

5. Review it

Read the file before you keep it:

  • Under 60 lines, and every line is something you'd otherwise say again in each session.

  • The commands exist (pnpm typecheck, pnpm test). Run one to be sure.

  • No secret, token or account id.

  • Reject: a list of every source file, generic advice ("write clean code"), or rules you don't follow.

If it missed, say so plainly, and quote the miss:

Plain text
You listed every file in apps/agent/src. Remove the file list; keep only the four folders and what each holds.
Plain text
You wrote `npm run test`. This repo uses pnpm: change the commands to `pnpm …` and run `pnpm test` once to check.
Tutor:

6. Check it loaded

Ask a question only the file can answer, with no room to read files:

recorded output
claude -p "Without reading any files, answer from your project instructions only: what must be true before you say a change is done, and where do secrets go? Two short lines." --max-turns 1
Done means `pnpm typecheck` and `pnpm test` both pass, and I've said what I ran and what I saw.
Secrets go in `.dev.vars` (gitignored) for local use and in `wrangler secret put` for deployed Workers, and a real key is never written into a file.
Tutor:

Both answers are your file's wording. --max-turns 1 leaves no room for a tool call, so they came from the instructions loaded at start.

quick check+20 neurons
Tutor:

Why keep AGENTS.md short?

    Pick one option

    Pick one, then Check.