Dev Log
The main site, session by session
Every World keeps its own log too. This one is the main site's: the meta layer, the domain model, and the tooling that holds the whole experiment together.
Giving the project a memory: the Dev Log and focus-mode
View-Source exists to answer one question: how much taste can an agent fake before it stops working? The premise is a hub site into a growing set of standalone design experiments, called Worlds — a creative studio, a hardware conglomerate, one company played straight across six eras of web design history. Each World contains Projects, and every Project is deliberately sealed off from every other one: no shared CSS, no shared components, no shared design system, so nothing can quietly default to the same safe, average-looking output agents tend to converge on. The only thing allowed to leak across that isolation is the Escape Hatch, a single consistent widget that gets a visitor back out of an otherwise-sealed Project. Everything above that isolation boundary — the root home page and the World pages — is the meta layer: one small, consistent shell that frames the experiment without ever touching a Project’s own design.
That’s the visual philosophy: radical isolation everywhere except one narrow, deliberate seam. The docs philosophy mirrors it, just applied to decisions instead of pixels.
CONTEXT.mdis the living glossary — the vocabulary (World, Project, Page, UI Kit, Escape Hatch, and now Dev Log and Log Entry) gets sharpened and rewritten the moment it’s fuzzy, not left to drift. ADRs exist for the decisions that are hard to reverse and would be surprising without context — why Projects don’t share styling, why the Dev Log lives on the World rather than the Project, why some ADRs will eventually live in per-World subfolders instead of one global list.docs/voice-and-tone.mdanddocs/coding-conventions.mdare the standing references for copy and code, so quality doesn’t depend on which session happens to be doing the writing.Today’s work was building the piece that was still missing: a memory for the project itself. The idea started as “a dev-log style blog” and got sharpened through a long back-and-forth into something more specific. A Dev Log belongs to a World (the main site counts as a special case of one, without being folded into
worlds.tsas a fake World). Each Log Entry optionally names the Project it concerned, since not everything is about one Project. Entries are flat Markdown files, one per World folder, named by date and a title slug,draft: truewhile a session is live andfalseonce it’s wrapped, with anextFocusfield that’s deliberately exempt from the site’s voice-and-tone rules because its whole job is unambiguous handoff, not a good read.The first pass at populating this got corrected twice, and both corrections mattered. The first backfill fragmented today’s work into one entry per commit, nested each in its own folder named
index.md— technically what had been agreed on paper, but in practice it read like a changelog, not a journal, and buried the actual filename behind a generic one. The fix was flat files named by the real slug, and consolidating fragments into entries that actually tell a story: what a session was trying to do, what got decided and why, where it ended up.The bigger addition was
focus-mode, a new skill modeled on a pattern already proven on other projects: orient into one World at the start of a session by readingCONTEXT.md, that World’s own record, the coding and voice conventions, its relevant ADRs, and its most recent Log Entry’snextFocus— then keep a live draft of the new entry updated as the session goes, because relying on conversation memory to reconstruct a session afterward has already been tried and found wanting. On a wrap-up cue, it finalizes that entry, cross-references anything it names, summarizes the session, and makes one commit. It stops there deliberately — pushing, opening a PR, and merging stay manual, a line drawn the same way this whole environment already treats anything hard to reverse.With the Dev Log actually able to hold real content, the last stretch of the session made it visible: a content collection wired up over
src/content/log/, a/log/page rendering the main site’s entries in full, and a new third row on the root home page’s project panel — a smaller horizontal strip of Dev Log cards sitting under the World gallery. Getting that strip’s look right took a correction of its own: the first instinct was to lean on the same dashed, half-opacity treatment already used for theTBDplaceholder cards next to Mint Panther Corp, but that reads as empty, which is the opposite of what a written, readable entry should feel like. It ended up with a solid surface and a plain border instead — related to the meta layer’s tool aesthetic, but legible as something finished, not something waiting to happen.By the end of the day the loop closes: the meta layer exists, the Dev Log exists and can hold a real narrative, and this entry — written by hand, the way
focus-modewill eventually do it automatically — is the proof it works.Decisions
- The Dev Log’s schema, storage shape, and lifecycle are documented once, in
docs/dev-log-conventions.md, rather than duplicated across the skill and the ADRs. - World-specific ADRs will live in
docs/adr/<world-slug>/going forward, sofocus-modecan scope its ADR read instead of reading every ADR in the repo regardless of relevance. focus-modeis a new, purpose-built skill rather than an extension of the existing generichandoffskill, which stays project-agnostic and OS-temp-dir-scoped on purpose.- The main site’s top nav now points at the Dev Log alone, replacing the previous per-World links — a deliberate simplification that leaves World/Project browsing without a nav home for now, picked up as next focus.
- The Dev Log teaser strip on the home page uses a solid surface and plain border, not the dashed/half-opacity treatment used for
TBDplaceholders — it needed to read as complete and readable, not empty.
Next focus: Build the remaining routes: /[world]/log/ list pages, individual entry permalinks under /log/ (cards currently deep-link to an anchor on the one list page), and a secondary nav for browsing Worlds/Projects now that the main nav points only at the Dev Log.
- The Dev Log’s schema, storage shape, and lifecycle are documented once, in
Standing up the site: from empty repo to a working meta layer
Today started from nothing: an empty repo and an idea — a hub site into a growing set of standalone design experiments, each one pushed toward a distinct, non-average aesthetic instead of the generic middle-of-the-road output agents tend to converge on. The goal for the day was to get from that idea to a working front door for the whole experiment.
We began with the boring but necessary part: bootstrapped Astro, wired up TypeScript, dropped in a placeholder home page and favicon. Right behind that came the agent tooling itself — a library of reusable skills (
ask-matt,code-review,diagnosing-bugs,codebase-design,grilling,domain-modeling, and others) under.agents/skills/, and the dev server set to open automatically, so every session after this one would start faster.With the scaffolding in place, the real design work started: writing down the domain model.
CONTEXT.mdgot its first pass at the vocabulary that would end up governing everything else — World, Project, Page, UI Kit, Escape Hatch. Alongside it came the first real architectural call of the project, recorded as ADR 0001: every Project is visually isolated from every other Project and from the meta layer, no shared CSS or components, with exactly one deliberate exception, the Escape Hatch, a consistent, tool-like widget so a visitor dropped into an isolated Project still has a way back out. That single decision shaped everything that followed — it’s the reason the meta layer (root home + World pages) is allowed to share a design system while Projects never are.From there we specced the main site itself: a dark identity rail beside a light content panel, a slim nav bar, a footer band of linked cards — one small, consistent shell for the root home and every World page, never reused inside a Project. We built it out:
MetaLayout, the hero components (HeroSplit,HeroPanel,HeroRail), the gallery components (GalleryBand,GalleryCard,GalleryEmpty), andworlds.tsseeding the first three Worlds — Cosmic Strawberry, Web Design Eras, Mint Panther Corp — each with an empty project list, since none of them have a built Project yet.CLAUDE.mdwent in too, pointing any agent that picks this up atCONTEXT.mdand the ADRs first.The rest of the day was refinement: richer gallery states (
GalleryCardPlaceholder,GalleryFeature) for when a World has no Projects yet,docs/coding-conventions.mdanddocs/voice-and-tone.mdwritten down so code style and visitor-facing copy have a standing reference instead of living in one person’s head, and finally a pair of tool-like components —BarcodeandWorldDial— that lean into the “this reads as tooling, not part of any Project’s design” instinct the Escape Hatch already established.By the end of the day the meta layer was real: a root home, a World page template, three seeded Worlds, and zero built Projects yet. What’s missing is a way to remember any of this happened once the conversation that built it is gone — which is exactly what came next.
Decisions
- Astro as the framework for the whole site.
- Projects share no CSS, layout, or components with each other or the meta layer; the Escape Hatch is the one shared, deliberately non-diegetic exception.
- Root home and World pages share one layout shell and one stylesheet, never imported by any Project.
- Worlds can exist with an empty project list; the gallery renders an explicit empty/placeholder state rather than hiding the World.
Next focus: Design and build the Dev Log feature: a per-World session log, plus a focus-mode skill for session orientation and wrap-up.