System Atlas Skill

An atlas is one data file (data.mjs) that renders two views: an interactive isometric map (a single self-contained atlas.html, hover to read, click to pin, go inside for steps, moving data packets you can inspect, chapters that reveal the system a few structures at a time), and a generated text twin (SYSTEM.md) with the decisions table, every structure, the flows, and the open questions by ID. The data file is the only thing anyone edits; both views rebuild from it. It sits beside a hand-written glossary (CONTEXT.md) and ADRs.

Does: interactive architecture maps with progressive disclosure, question tracking across feedback rounds, a generated text twin, and a repeatable update loop. Doesn't: static one-off diagrams (use the architecture-diagram or excalidraw skill), finished systems that only need a README, or a single diagram for a PR.

When to Use

Use whenever someone wants to discuss, design, review, or explain an architecture visually, "make an atlas", "map the system", "make the architecture explorable", "visualize the codebase/agent/pipeline so we can talk about it", "a diagram I can click around", "walk me through how it fits together", or when an architecture discussion is producing a pile of open questions that need tracking across feedback rounds. Also use it to update an existing atlas after decisions change. Best when the system is new enough that vocabulary, decisions, and questions are still moving and there will be more than one feedback round.

Prerequisites

• Node.js (any recent version; the build uses only node:fs, node:path, node:url, no npm install needed).
• A static server for verification (npx serve or python3 -m http.server).

How to Run