visual-knowledge

Generates a self-contained HTML page with Mermaid diagrams mapping unfamiliar codebases.

Updated Jul 17, 2026
One-click install
npx skills add https://github.com/unnxt30/skills --skill visual-knowledge-unnxt30
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-knowledge
Source: https://github.com/unnxt30/skills/tree/main/visual-knowledge
Command: npx skills add https://github.com/unnxt30/skills --skill visual-knowledge-unnxt30

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Onboarding to an unfamiliar feature, branch, or pipeline usually means reading scattered code and producing a long terminal markdown dump that nobody keeps. This Skill turns that exploration into a single durable, clickable HTML page with verified diagrams. ## Core Features & Use Cases - Parallel codebase exploration: Fans out read-only agents per module cluster to map callers, core engines, and supporting modules in the project's own vocabulary. - Fact-sheet verification: Every claim, count, and module name is cited to a git command or file:line before any HTML is written; unverifiable items are marked uncertain. - Visual deliverable: Produces one self-contained HTML page with a project recap, an anchor diagram of the complete flow, and one zoomable Mermaid diagram per important module. - Use Case: A teammate asks how a feature branch works end to end; you run this Skill and hand them a rendered recap page with diagrams, a decision log, KPIs, and a glossary instead of a chat transcript. ## Quick Start Ask the agent to map this feature branch visually as an end-to-end recap page with diagrams.

Frequently Asked Questions about visual-knowledge

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a visual architecture map of an unfamiliar codebase?

Run this Skill to fan out parallel read-only agents across module clusters, verify every claim against the code, then render one self-contained HTML page with an anchor diagram and per-module Mermaid diagrams.

How to document a feature branch for teammate handoff?

Use this Skill to produce a durable HTML recap page containing the current-state mental model, complete-flow anchor diagram, decision log, KPIs, and glossary, written to ~/.agent/diagrams/ and opened in the browser.

Does the visual recap verify its claims against the actual code?

Yes. Before writing any HTML, the workflow builds a fact sheet where every count, module name, and behavior is cited to a git command or file:line. Anything unconfirmable is marked uncertain, and stale comments are reported as findings.

When should I not use a visual codebase recap page?

Skip it for single-file questions, quick fact lookups, or areas already well documented. The Skill is designed for multi-module features, branches, or pipelines where a full mental model is needed.

Why are the diagrams split into multiple small Mermaid diagrams?

Each module diagram is kept under roughly eight nodes to stay readable. One anchor diagram shows the complete flow, while modules with real decisions get their own zoomable diagram and pure data-plumbing is folded into cards.