Guide · Agent skill
How to use the Visualize agent skill to map anything
Updated · written with AI from the project's own documentation and checked against our catalogue data
Visualize is an agent skill that asks your AI agent to read something you point it at and show you how it works, in two forms: a short text summary in the terminal and a designed HTML page where every fact is labelled with where it came from. It suits developers taking over a codebase, hobbyists laying out a physical setup, and anyone who wants an idea or process explained visually with sources. After this guide you will know what the skill does, how to install it, how to trigger it with plain requests, and what it needs to run.
Visualize Anything as a Mapdanielmiessler/LifeOS · MIT Download the skill Quick start
- 1Download and unzip. Download the Visualize ZIP from this page and unzip it, keeping the folder structure intact.
- 2Place the folder. Move the Visualize folder into ~/.claude/skills/ for personal use, or into a project's .claude/skills/ folder.
- 3Install Bun. Install Bun, the TypeScript runtime the tool scripts need.
- 4Confirm the tools. Check that the Tools folder is present and run the schema command to see the model shape.
- 5Ask in plain words. Ask the agent to visualize a named target, such as a project, a plan or an idea.
- 6Check the output. Read the console summary, then open the HTML page and verify key facts against the cited sources.
What an agent skill is and what Visualize makes the agent do
An agent skill is a folder of instructions and optional tools that an AI agent loads when a request matches it. Visualize is one such skill. Its description says it visualizes anything at all, including a codebase, a physical setup, a timeline, a process, finances, a comparison, a concept, a URL or a dataset, and that it never declines.
The skill routes each request to one of three paths. Code gets a system map of its parts and flows. A physical plan such as a gear setup, room or purchase list gets a to-scale top-down drawing with the cost split and open decisions. Anything else, such as an idea or a comparison, becomes one hand-built concept page with a short console summary.
- Console output: a short text summary of what the thing is and the one thing worth acting on.
- HTML page: a designed page saved next to the code, or in the directory you choose.
- Source labels: each fact is tagged as a file line, a verbatim plan quote, a URL, computed, the principal's words, or general knowledge.
Install the Visualize skill from the ZIP or the Claude apps
Download the Visualize ZIP from this directory page, then unzip it. For a personal install, place the Visualize folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder instead.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills.
The skill is a folder, not a single file, so keep the internal structure intact. The file list includes SKILL.md, Setup.md, the Intents folder and the Tools folder.
- Personal install: ~/.claude/skills/Visualize/
- Project install: .claude/skills/Visualize/ inside your project
- Claude apps: Settings → Capabilities → Skills, then upload
Install Bun and check the tool scripts
The tool scripts run on Bun, the TypeScript runtime. Install Bun before using the skill, since the console map and the page are produced by these scripts rather than written by hand.
The skill's Tools folder holds Bake.ts and VisualizePlan.ts. The SKILL.md text also refers to Tools/Visualize.ts for the code route, but that file is not in this download's file list, so confirm it is present after unzipping. To print the model shape the code route expects, run the command below from the skill's location.
- Bun is required to run the tools.
- Bake.ts needs the Interceptor skill's VerifyViewport test tool for its headless browser check.
- An optional PREFERENCES.md file in your customizations folder can set the page ground for concept pages.
bun ~/.claude/skills/Visualize/Tools/Visualize.ts --schemaHow to trigger Visualize with natural requests
You do not need special syntax. The skill responds to plain requests that include the word visualize or a similar phrase such as map it, draw it, lay it out, or how does X work. Name the thing you want shown, and the agent picks the route.
Be specific about the subject. A request to visualize the monitoring layer of a service gives the agent a clear target. A request to show your drum kit plan goes to the physical plan route, which expects a plan document to read from.
- visualize the monitoring layer
- visualize my drum kit plan
- map this system
- how does this architecture work
- visualize the three options we just compared
- /visualize path/to/project/ISA.md
Output options and flags
By default you get the console output and the page in the --root directory. Phrases like console only or no HTML map to a flag, and you can ask for the page to go elsewhere. The same flags apply to the code and plan renderers, and --check validates the output without writing anything.
- --no-html: console output only
- --out-dir <dir>: save the page to that directory
- --width <n>: console width, default 100
- --check: validate without writing
Safety, network and what the skill writes
The skill runs scripts on your machine but does not use the network. The subject is only read. The only writes are the generated page and, for a plan, the plan model saved under your customizations folder. The skill notes that no secret value should land on any page.
The map is an aid to understanding, not proof of correctness. The skill itself says a human must check it against the code, so do not rely on it alone for sensitive systems.
- Scripts: yes. Network: no.
- Writes: the HTML page, and plan models under your USER customizations Plans folder.
- Share hosts that serve HTML under a sandbox policy block scripts, so upload the baked copy the skill produces.
What people use it for
- Understanding an inherited codebase by mapping its parts and main flow before changing anything.
- Planning a studio, drum kit or room layout as a to-scale drawing with a full order and cost split.
- Explaining a process, timeline or comparison as a designed page with each fact sourced.
- Mapping a system from its ISA document so the page sits next to the source it describes.
Frequently asked questions
Is the Visualize agent skill free?
The source material for this page does not state a price or licence terms beyond the licence listed for the item, which is MIT. Check the repository licence before redistributing it.
What do I need to run the Visualize skill?
You need Bun to run the tool scripts. Bake.ts also needs the Interceptor skill's VerifyViewport test tool for its headless browser check. An optional PREFERENCES.md file can set page settings.
How do I install Visualize in Claude?
Download the ZIP from this page and unzip it into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder. You can also upload it in the Claude apps under Settings → Capabilities → Skills.
Does Visualize send my code or data over the network?
The skill is listed as not using the network. It runs local scripts and only reads the subject, writing the page and, for plans, a plan model.
Is Visualize the right tool for a decorative illustration or a hand-drawn sketch?
No. A standalone decorative illustration or header image is handled by a different skill called Art, and hand-drawn sketches are handled by Excalidraw.
Why does my uploaded HTML page appear blank or as source code?
Some share hosts serve HTML under a sandbox policy that blocks scripts, and their preview shows HTML as source. Upload the baked copy that has no scripts and share that link.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Visualize suits developers who need to understand a system they did not build, and hobbyists who want a sourced, to-scale view of a physical plan. It is a comprehension aid, so anyone working on sensitive systems should check its map against the code. If you only want a decorative image or a hand-drawn sketch, pick Art or Excalidraw instead.
Download the skill