# Week 4: Context engineering
> The agent's working memory as a designed resource — and, on the web side, the ceiling of static: neal.fun / pudding.cool-style interactive pages
# 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](https://code.claude.com/docs/en/context-window))
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
```text
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 33k
```
all 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
---
## compaction
near the limit (or on `/compact`) the history is replaced by a summary of it
**re-loaded**: system prompt, root `CLAUDE.md`, skills, up to five files it read
or edited
([docs](https://code.claude.com/docs/en/context-window#what-survives-compaction))
**summarised away**: everything else you said, and what it tried
so write a `plan.md`, `/clear`, then `@plan.md`
---
## 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
([skills docs](https://code.claude.com/docs/en/skills))
---
# **words**; what do they even mean?
---
## skills
```markdown
---
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](https://github.com/comp4020-agentic-coding-studio/core) 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
---
## the cohort's own marketplace
[contrib](https://github.com/comp4020-agentic-coding-studio/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](https://github.com/comp4020-agentic-coding-studio/template-static/compare/edb42c2...b43d91c))
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](https://www.infralovers.com/blog/2026-03-19-context-engineering-weniger-kontext/)
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](https://code.claude.com/docs/en/memory))
---
## your own numbers
every session you run goes through
[strproxy](https://benswift.me/blog/2026/04/22/comp4020-token-management-by-proxy/),
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](https://benswift.me/blog/2026/08/19/fifty-five-billion-tokens/)
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](https://ordinaryabundance.com/) 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
---
## state in the URL
```js
// 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
```html
care notes
full sun, any soil, ignore it
```
```js
document.querySelector("#care").open;
// true — the markup is the state
```
no store to keep in sync: the element's `open` attribute holds the state
---
## state in a store
```js
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?
---
## 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 ``)
**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
---
## 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](https://comp.anu.edu.au/courses/comp4020-agentic-coding-studio/topics/assessment/#marking-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](https://developer.mozilla.org/en-US/docs/Web/API/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
---
# See you in the studio
Source: \
Licence: [CC-BY-NC-SA-4.0](https://creativecommons.org/licenses/by-nc-sa/4.0/)\
Cite as: Swift, B. (2026). _COMP4020/COMP8020 Agentic Coding Studio_ [Course materials]. ANU School of Computing. https://doi.org/10.5281/zenodo.21395760