[alexengrig]

Add the Framework page: the whole system design interview, step by step, on
one running example, a notification service. It covers how the interview
runs, defending a decision, the opening, functional and non-functional
requirements, estimates in two passes, API and entities with the data and
control planes, data flow, high-level design, the key part and choosing
technologies, resources, cost, and operations as optional steps, deep dives,
and the wrap-up. Each step says when to take it, what to ask, what stays on
the board, and how long it takes.

The page is published while still in work: the sidebar marks it WIP.

Add board diagrams, which show the design as a candidate draws it on a
whiteboard. The board-diagrams skill in .agents/skills/board-diagrams/
renders a scene from src/diagrams/board/<page>.mjs to a static SVG with
rough.js (vendored, MIT) and checks the layout. The high-level design grows
one scenario at a time in steps; the key part and the design after the deep
dive show the whole board with what matters in focus. The steps before the
design leave board text in the board font. The skill's DECISIONS.md records
the rules and why; WRITING.md gets a first Board diagrams section.

Add glossary entries for the data plane and the control plane, and mark the
page written in the article map.

Validation:

• bun run build passes (18 pages).
• Every view of all 13 diagrams checked in light and dark themes, at desktop
  and phone widths. The skill's checks pass: no overlaps, no line through a
  shape or a text, nothing outside the board.
• The WIP badge checked in the sidebar in both themes and on a phone.

Open: the raw Markdown export drops diagrams, so board text is missing
there (recorded in the skill's DECISIONS.md).

🤖 Generated with Claude Code