Welcome#
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#
the context window is everything the model reads on a turn: system prompt,
tool definitions, CLAUDE.md, skill descriptions, then the conversation so far
(Claude Code docs)
each model has a hard limit (e.g. 1M tokens), but early instructions slip well before it
(the name is the field’s, from mid-2025: Karpathy’s “filling the context window with just the right information for the next step”)
/context, before the first prompt#
Model: claude-opus-5-5 Tokens: 10.1k / 1m (1%)
System prompt 1.5k
System tools (deferred) 8.1k
Memory files 1.9k ~/.claude/CLAUDE.md
Skills 6.6k one description per skill
Free space 956.9k
Autocompact buffer 33kall of that is re-sent on every turn; your messages and tool results pile on top
(Ben’s setup in an empty directory, Claude Code 2.1.305, trimmed and annotated; run it in yours)
what to include?#
too little: it guesses at a convention your repo already follows
too much: unrelated history and every test file crowd out the part you asked about
the levers for that trade-off: /clear, caching, compaction, skills
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)
prompt caching#
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 is billed for writing the whole thing again
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
skills vs claude files#
CLAUDE.md: loaded every session, so it costs tokens every turn
a skill: its description is loaded every session; the rest of the file only when it’s invoked
words; what do they even mean?#
skills#
---
name: preflight
description:
Checks that a COMP4020/COMP8020 student's work is actually submittable before
a crit or assignment deadline … Use before a submission, or when the user asks
"am I ready to submit" …
allowed-tools: Bash, Read, WebFetch, Glob, Grep
---
# COMP4020 submission preflight
Catch the things that cost marks for no good reason …a directory with a SKILL.md: frontmatter the agent matches against, then the
procedure (plus any scripts or templates it needs)
it runs when the agent matches the description, or when you type
/comp4020:preflight
skill loading#
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 looks up
dates and policy on 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: comp4020/skills/preflight/SKILL.md is the file on the last slide
plain markdown — no compiler, no registry — so the next one doesn’t have to come from me
claude is very good at writing them: do it from the session where you kept correcting it, because the corrections are the procedure
corrections as skills#
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
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
Claude Code’s docs say the same: target under 200 lines, because “longer files consume more context and reduce adherence” (memory docs)
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#
rich static sites#
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
client-side state#
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
Lomandra grass
spiky tussock, basically indestructible
Correa shrub
native fuchsia — bells right through winter
Banksia shrub
nectar candles, birds all over it
Sheoak tree
drooping she-oak, whispers in the wind
<details id="lomandra"> <details id="correa"> <details id="banksia"> <details id="sheoak">
{ favourites: [] } 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 stateno store to keep in sync: the element’s open attribute holds the state
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?#
- which section you're reading #pruning — shareable, back-button-able
- the filter you picked ?filter=shrubs
- an expanded card <details open> — the markup is the state
- a favourites list small, cheap to lose
- search-as-you-type results derived — recompute any time
- a three-step form, half done now losing it costs the user
- a shopping cart must survive navigation
- undo history every past state, retained
- live prices, syncing the 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 HTML is the content; the URL and DOM carry the state
(e.g. a filter in ?filter=shrubs, an open <details>)
app-shaped: a store owns the state and the page is re-rendered from it (e.g. a drawing tool, a game, a cart)
a usable criterion: if reload or a shared link must restore the state, put it in the URL; if the state can’t be expressed as markup and a URL, you’re app-shaped
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
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 make the first sound obvious
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 page is rendered from the store, 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