Welcome

--:--recording — let's go

Week 4

Context engineering

the agent’s context is finite

the skill is knowing what to leave out

what changed this week?

qwen 3.8 27B (local models are getting good)

today’s beats

the context window (or just context) is a budget, and you spend it

a skill is context loaded on demand

where a page’s state lives

you shipped it

assignment 1 went in at noon on Monday, and the retro crits have run

so today starts on two of this week’s picks — one for its concept, the other for its mechanic

demo: can it hold both at once?

then we leave it running and talk about context

context: the agent’s working memory

the window is a budget

everything the model reads — your prompts, CLAUDE.md, tool descriptions, every earlier turn and tool result — is the context

each model has a hard limit (e.g. 1M tokens)

(the name is the field’s, from mid-2025: Karpathy’s “filling the context window with just the right information for the next step”)

you’ll feel it ‘lose track’ well before that, so “it still fits” is the wrong test

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
168kin the window
2.7Minput billed — 420k with the cache warm
$1.76spent so far
harness$0.22re-sent history$0.63new tokens$0.92

what to include?

too little: it guesses at a convention your repo already settles

too much: unrelated history and every test crowd out the part you asked about

practice makes perfect?

the key tension

in agentic coding

one task per session

keep going while the workstream is coherent; /clear when the job changes

a failed approach in the window can inform the next attempt — four of them bias the fifth towards the same error

/resume to re-load the context from a previous session (sometimes)

why re-sending is affordable

after the first turn the prefix is cached, so each re-send of it reads back at a tenth of the input price

writing it costs 2x once, reading it back 0.1x every turn after

an hour: the idle window before it expires, and the next turn pays to write the whole thing again

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
168kin the window
2.7Minput billed — 498k with caching
$2.25spent so far
+$0.49the hour-long gap
harness$0.31re-sent history$1.03new tokens$0.92

Claude Code cheatsheet

/clear starts a fresh conversation in the same directory — CLAUDE.md stays, everything else goes

/resume reopens an earlier session, context and all

@filename.md pulls a whole file into the context

/model and /effort are the two cost levers

when the window fills

long sessions get ‘compacted’: the harness summarises what happened so far and carries the summary forward

it summarises the transcript naively (by default)

write out a plan.md, /clear, and point the new session at that with @plan.md

skills vs claude files

CLAUDE.md: read every turn, so it pays rent every turn

a skill: one line of description until something makes it relevant, then it loads in full

words; what do they even mean?

what a skill is

a directory with a SKILL.md in it: a name, a description, and the instructions for doing one thing properly — plus any script, template or reference it needs

the description is the only part read at start-up

or invoke it by name: /comp4020:preflight (the comp4020 plugin name optional)

you’ve been using four of them

/start clones the week’s repo and turns the spec’s checkable lines into tests; /preflight checks the work is pushed and matches the brief

/ship flips the repo public and verifies the URL serves; /handbook answers dates and policy off the live site

a procedure you don’t need in every session, but don’t want to type in every time you need it

I wrote those skills, but…

the plugin source is public — read it back as the mechanism it is

no magic in there: each one is a procedure written down, in files you could have typed

and the next one doesn’t have to come from me

a skill is a folder of markdown

a SKILL.md plus whatever it needs — plain files, no compiler, no registry

claude is very good at writing them: write it from the session where you kept correcting it, because the corrections are the procedure

when a correction becomes a skill

if you’re repeating yourself — especially across multiple projects — it might be time for a skill

same judgement as wiring in a sensor last week: you add it because the work kept failing that way

the cohort’s own marketplace

contrib is a second marketplace: skills contributed by you, reviewed before merge, worth nothing toward your grade

a skill that saved you an hour will save someone else an hour

/plugin marketplace add comp4020-agentic-coding-studio/contrib

stay safe out there

comp4020/8020 template cleanup

a sensor you added is heaps better than one you inherited — so the C4 starter ships with less in it (the diff)

when your agent keeps making the same mistake, that’s the cue: add the linter, write the rule into CLAUDE.md, pull the procedure out into a skill

the checks the course needs — secrets, links, evidence — stay wired in

three hundred lines of wishes

oldmate cut his own CLAUDE.md files down after an agent broke a rule that was written there explicitly

the loop that grows the file: the model errs, you add a rule, the mistake recurs, the file grows

your own numbers

every session you run goes through strproxy, so we can see how we’re all going with context management

three weeks of use — what do we see?

(totals and anonymous rankings — no names anywhere)

Ben uses… 55B tokens and counting

my own sessions counted up

96% of those tokens are cache reads, writing new code is 0.55% of the total

about $50k at list prices, or $285k without the cache (USD)

wait, it’s all context engineering?

always has been

yes, and…

how does it get pushed further? weird ideas welcome

Web

what static can really do

Ordinary Abundance is the one doing the rounds right now — scroll through an apartment, and every object has a history

you’ve already built a small version of it with ass1

today: find the core interaction, then find the state behind it

where the state lives

client-side state has three homes: the URL, the DOM, and a small store in your JavaScript

one interaction’s state is usually spread across all three

the URL is the part a visitor can share and the back button can reach, so what goes there is a design decision

the URLbush.example
Lomandragrass

spiky tussock, basically indestructible

Correashrub

native fuchsia — bells right through winter

Banksiashrub

nectar candles, birds all over it

Sheoaktree

drooping she-oak, whispers in the wind

the DOM reset on every load
<details id="lomandra">
<details id="correa">
<details id="banksia">
<details id="sheoak">
the store gone on a fresh visit
{ favourites: [] }
share the link, or reload — what carries?

state in the URL

// read it
const filter = new URL(location).searchParams.get("filter") ?? "all";

// write it — no reload, and the back button still works
const url = new URL(location);
url.searchParams.set("filter", "shrubs");
history.pushState({}, "", url);

shareable, bookmarkable, back-button-able — for free

state in the DOM

<details id="care" open>
  <summary>care notes</summary>
  <p>full sun, any soil, ignore it</p>
</details>
document.querySelector("#care").open; // true — the markup is the state

no store to keep in sync: the element itself remembers

state in a store

const store = { favourites: new Set() };

function render() {
  for (const el of document.querySelectorAll("[data-fav]")) {
    const on = store.favourites.has(el.dataset.fav);
    el.classList.toggle("is-fav", on);
  }
}

yours to manage: gone on reload, unless you write it somewhere (localStorage, or back into the URL)

how much state until it’s an app?

the URL
  • which section you're reading#pruning — shareable, back-button-able
  • the filter you picked?filter=shrubs
the DOM
  • an expanded card<details open> — the markup is the state
the store
  • a favourites listsmall, cheap to lose
  • search-as-you-type resultsderived — recompute any time
  • a three-step form, half donenow losing it costs the user
  • a shopping cartmust survive navigation
  • undo historyevery past state, retained
  • live prices, syncingthe server's state, mirrored

app-shaped: the store owns the page now, and the DOM is its render target

from web pages to web apps

content-shaped: the page is the content, and the URL and DOM carry most of the state — everything the field guide just did

app-shaped: a client that owns the state in its store and renders the page from it

the course default is content-shaped; the judgement we’re after is picking the other fork against a criterion you can say out loud

after the mid-sem break

we’ll build full-stack apps

yes, and…

how does it get pushed further? weird ideas welcome

the existential bit

if the procedure is a file you wrote, and the agent follows it better than you ever did, where does your expertise live now?

this week’s answer: in knowing which correction was worth writing down

assignment 1 is in

the deadline has passed — marking is under way

marks and feedback: back to you by Friday 28 August, ahead of the census date

it’s marked against the rubric on the assessment page

your starter repo ships less

gone: the linters, the deployment plumbing in spec/, the course-API call in the evidence check

what’s left gives you feedback while you build — pnpm check is typecheck, build and tests

og:image for ‘social cards’ (for HoF gallery at least)

(nothing about marking changed: same invariants, same evidence bundle)

C4: an instrument

turn the browser into a musical instrument — something a stranger can pick up and play

the Web Audio API does the synthesis (all client-side)

the bar is playability, and “instrument” is interpreted as broadly as you like: if a person acts and the page sounds, it counts

your pod plays it before you say a word, so the opening screen has to invite the first sound

deadline radar

Monday/Wednesday: C4 live at its URL two hours before your session, with the reflection in the repo

Friday 28 August: assignment 1 marks and feedback, before the 31 August census date

/comp4020:radar reads every cutoff off the course site, so it can’t go stale

don’t forget about mobile

tl;dr

everything the agent has read is competing for its attention, and you need to manage it

CLAUDE.md for what’s always true, a skill for what’s sometimes needed

a page’s state lives in the URL, the DOM and a store; when the store owns the page, it’s an app

ask your agent

ask until you can explain these back:

  • the window: what’s in your context right now, and which of it is noise
  • sessions: when to continue, when to clear, when to resume a named one
  • standing and optional: what belongs in CLAUDE.md, and what a skill you installed can do
  • where state lives: which of your page’s state is in the URL, the DOM, and a store — and what a fresh visit keeps

See you in the studio