kb-visualize
starsforks
How to install kb-visualize?
stjbrown/agent-knowledge/kb-visualize
$npx -y skills add stjbrown/agent-knowledge --skill kb-visualizeRender a knowledge bundle as an interactive graph — native UI where the host supports it, otherwise a self-contained HTML artifact.
SKILL.md
| 1 | # kb-visualize — see the bundle as a graph |
| 2 | |
| 3 | Render a [bundle](../kb/SKILL.md) as an interactive **force-directed graph** of its concepts, so a |
| 4 | human can see its shape — hubs, clusters, orphans, and how concepts connect. You author the view from |
| 5 | a deterministic graph model, so it can adapt to the request (a whole-bundle map, or a subgraph around |
| 6 | one concept); it is not a fixed template. |
| 7 | |
| 8 | ## 1. Extract the graph model |
| 9 | |
| 10 | Run the bundled extractor against the target bundle (default `knowledge/`): |
| 11 | |
| 12 | ``` |
| 13 | python3 "${CLAUDE_SKILL_DIR}/scripts/graph.py" <bundle-dir> |
| 14 | ``` |
| 15 | |
| 16 | It prints JSON: `nodes` (each with `id`, `type`, `title`, `description`, `tags`, `resource`, |
| 17 | `status`, `body`, `links`, `cited_by`), the distinct `types`, and `edges`. Backlinks (`cited_by`) and |
| 18 | edges are already computed from the cross-links in concept bodies. If the user scoped the request to |
| 19 | one concept/area, filter the model to that node plus its neighbors. |
| 20 | |
| 21 | **Completion criterion:** you have the graph model, and (if scoped) filtered it to the requested |
| 22 | subgraph. |
| 23 | |
| 24 | ## 2. Choose the output form by host capability |
| 25 | |
| 26 | - **Host renders interactive UI** (e.g. Claude Desktop, Codex Desktop, an MCP-Apps host): render the |
| 27 | graph **as native UI** so it's live in the conversation. |
| 28 | - **Host is text/artifact only** (e.g. Claude Code, a terminal): write a **self-contained HTML file** |
| 29 | (single file, no backend, CDN libs only) next to the bundle or as an artifact, and give the user |
| 30 | the path. |
| 31 | |
| 32 | If unsure whether the host renders UI, default to the HTML file — it works everywhere. |
| 33 | |
| 34 | **Completion criterion:** the output form matches the host's capability. |
| 35 | |
| 36 | ## 3. Render the view |
| 37 | |
| 38 | Whichever form, the view must show (mirroring a conformant OKF viewer): |
| 39 | |
| 40 | - A **force-directed graph**: one node per concept, **colored by `type`**, directed **edges** from |
| 41 | each cross-link. A layout the user can switch (e.g. cose / concentric / breadth-first / grid) is a |
| 42 | plus. |
| 43 | - A **detail panel** for the selected node: its frontmatter (`description`, `resource` as a link, |
| 44 | `tags`) and its rendered markdown `body`, with internal concept links rewired to **navigate within |
| 45 | the view** (select that node) rather than following a file path. |
| 46 | - A **"Cited by"** list per node, from `cited_by` (the reverse link graph). |
| 47 | - A **search box** (matches title, id, tags) and a **type filter**. |
| 48 | |
| 49 | For the HTML form, a proven stack is Cytoscape.js (graph) + marked (markdown) from a CDN, with the |
| 50 | graph model inlined as a JSON literal so the file is self-contained and nothing leaves the page. All |
| 51 | node data is already in the model from step 1 — do not re-read the bundle. |
| 52 | |
| 53 | **Completion criterion:** the rendered view shows the graph (colored by type), a working detail panel |
| 54 | with in-view link navigation, backlinks, search, and type filter. |
| 55 | |
| 56 | ## 4. Deliver |
| 57 | |
| 58 | Hand over the result: for UI, the live view; for HTML, the file path (and note it can be committed |
| 59 | next to the bundle, shared as an artifact, or hosted on any static file server). This is a read-only |
| 60 | consumer — it never modifies the bundle, so no log entry. |
| 61 | |
| 62 | **Completion criterion:** the user has the view or its path. |
People who liked this also viewed
6 picksType
- azure-aiUse for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector searSkillsJul 2026
- just-scrapeSearch, scrape, crawl, extract structured data, and monitor web pages via the ScrapeGraph AI CLI. Use when the user asks to search the web, scrape a webpage, grab content from a URL, extract JSON fromSkillsJul 2026
- firecrawlCLI and Agent Skill for Firecrawl - Add scrape, search, and browsing capabilities to your AI agentsSkillsJul 2026
- firecrawl-searchWeb search with full page content extraction. Use this skill whenever the user asks to search the web, find articles, research a topic, look something up, find recent news, discover sources, or says "SkillsJul 2026
- firecrawl-agentAI-powered autonomous data extraction that navigates complex sites and returns structured JSON. Use this skill when the user wants structured data from websites, needs to extract pricing tiers, producSkillsJul 2026
- firecrawl-mapDiscover and list all URLs on a website, with optional search filtering. Use this skill when the user wants to find a specific page on a large site, list all URLs, see the site structure, find where sSkillsJul 2026
