A searchable map of my agent skills
One search, and a wall of tangled lines collapses into one readable idea.
Built 2026-06-11 · Filmed 2026-09-26
Over the last year I built a library of agent skills: small procedures an agent can run for me, from research to code review to publishing a page. It outgrew my head, so I built a page that draws it as a graph, with every skill as a node and every real relationship as an edge.
What you're watching
It opens on the full tangle: 268 nodes, over a thousand edges, genuinely unreadable as a whole. That chaos is shown on purpose, once, as the "before". Typing a skill's name and hitting enter collapses the graph to just that node and its real connections, with a short description of what it does. Moving the pointer down the list of connections pans the camera to each related node and back, without a single click. The page reacts to being read, not just to being clicked.
The node the clip lands on first is the one that generated this very video: a tool that turns a live web page into demo footage. Following its connections hops to the graph viewer itself, then to a curated "story" view that re-lays out a 9-node slice of the whole graph three different ways, live, in place: force-directed, a pipeline, clustered by theme.
Nothing here is hand-drawn. The graph, the descriptions and the relationships all come straight from the skills' own metadata. The map stays accurate as the library keeps changing. The viewer itself is built on Cytoscape.js with a force-directed layout engine, and supports several redaction profiles of the same underlying data. A public view strips internal detail; this "showcase" profile adds back just enough narrative to explain the system without exposing anything private. Same data, three cuts.
What doesn't come across on video: this graph is live documentation. Every time I add or change a skill, the map regenerates from the current state of the library. It's never manually redrawn, and it's never stale for long.