Every diagram on this site comes from one library. The look comes from the figures in OpenAI's Habitat post. The bones are my old hand-laid SVG primitives and what archify taught me about typed, validated figures. uipack is the mix, with the frame, the motion and the hover added. Below, six of its presets drawn with my own projects. Code on GitHub.
Figures
Each one is a preset fed with a small spec. Hover a node to see the flow it belongs to; hover a legend entry to see every packet of that kind. Pause and Replay drive the whole SVG timeline.
Figure 01 · Agent loop · groundplane
Tools answer, the boundary decides
Tool results land as typed facts. The model fills fields inside a boundary, and six deterministic checks pass the output or raise on the first unsupported claim.
Request
Tool call
Tool result
Verdict
fig. 1 — groundplane. Hover the agent or a tool: the flow it belongs to lights up, the rest dims.
Figure 02 · Sync loop · skillpack
Edit where you use it, push back where it lives
The skills repo is a git subtree inside my store. A SessionStart hook merges what moved upstream; a Stop hook pushes local edits back. The plugin marketplace reads the same repo one way.
merge at start
push at stop
fig. 2 — skillpack. The pull and push are two connectors; each carries one head and one packet direction.
Figure 03 · Skill lifecycle · skillforge
A skill earns its place, then flows back
A skill is written in skillpack, scored in skillforge against a run with no skill at all, frozen as a revision, installed where I work, and patched from feedback the same session.
Candidate
Passes baseline
Feedback
fig. 3 — skillforge. The dashed edge is feedback. It runs against the loop on purpose.
Figure 04 · Service map · fieldpack
Three local-first tools, one install
deckforge, skillforge and proofpack are pinned as submodules under one umbrella with a shared setup, doctor and cross-product verification. Everything runs on the laptop.
Request
Response
fig. 4 — fieldpack. A bus on each side of the platform. Stubs carry no heads, the junction dot marks the join.
Figure 05 · Pipeline · this site
Every change waits on the browser suite
Copy goes through unslop, the build runs ESLint and Next, and nothing reaches Vercel until the Playwright suite has moved a packet, paused it and checked the geometry.
Inline
Queued
fig. 5 — this site. The queue is the browser suite; a change sits there until every case passes.
Figure 06 · Before and after · the connector rule
One head per line, the reply rides back
The first cut drew a head at both ends of every stub and let packets sit on them. Now a connector carries one arrowhead in the request direction, the response is a reversed packet on the same points, and nothing touches a border.
Unchanged
Changed
fig. 6 — the rule the earlier figures broke. The changed stages and their inbound edges are in accent.
Assets
Every part, icon, motion token, background and mark is catalogued with a rendered preview and a copy action, so I can find what I have before I draw it again. The browser is at /assets, unlisted on purpose.
Install
Not on npm yet, so it installs from GitHub with dist/ committed: npm install github:ong6/uipack. The README on GitHub has the parts, the connector rule, the hover API and the presets.