{"slug":"visual","title":"visual","summary":"Turn the current work into one polished, self-contained HTML visual page — a recap of a branch's changes, a plan, a map of a folder, endpoint set, or architecture, or an interactive drill-down map of a skill pack or system (zoom, pan, click a node for details, double-click to ope","platform":"Claude","tags":[],"authorName":"LLM Mart","authorSlug":"llm-mart","score":0,"source":"github","price":null,"verified":false,"createdAt":"2026-10-19T20:29:13.489852Z","repo":{"url":"https://github.com/EricTechPro/super-board","stars":402,"forks":119,"license":"MIT","updatedAt":"2026-10-19T16:30:32Z"},"bodyHtml":"<h1>/visual</h1>\n<p>Turns the work in front of you into one self-contained HTML page: a branch recap, a plan, a map of part of the codebase, or an interactive drill-down map of a skill pack, with diagrams.</p>\n<p>Adapted from BuilderIO/skills (MIT, visual-recap and visual-plan); diagram style and viewer UX from tt-a1i/archify (MIT). See <code>THIRD_PARTY_NOTICES.md</code>.</p>\n<h2>What It Does</h2>\n<ul>\n<li><strong>Picks a mode</strong> from the argument, or from <code>scripts/visual.py detect</code> when there is none: recap if the branch is ahead of base or has uncommitted changes, plan if a plan file is around, explore otherwise.</li>\n<li><strong>Gathers facts from git</strong>, not from memory: commits, files with <code>+/-</code>, and diff hunks are pulled by <code>render</code>, so a recap cannot invent a change.</li>\n<li><strong>Draws the page</strong> from a <code>data.json</code> into <code>assets/template.html</code>: key changes, a file map, at least one diagram of the real mechanism, and annotated code. Everything is inline; no build step, no CDN.</li>\n<li><strong>Routes like a diagram tool.</strong> Each edge has its own port and orthogonal route; render bakes a crossing-free layout per view and the check fails on crossings, shared lines, or labels on lines.</li>\n<li><strong>Zooms and drills.</strong> Every diagram pans and zooms. Map mode adds a minimap, a node panel (what, when, how, source, upstream and downstream), double-click drill-down into child views, breadcrumbs, <code>#view=</code> deep links, search, author avatars on external skills, animated flow, and SVG/PNG export.</li>\n<li><strong>Checks its own output</strong> with headless-Chrome screenshots (light and dark) and a label-overlap audit, redacts secrets, and writes to a gitignored folder (<code>_tmp/&lt;date&gt;-visual/</code> or <code>.visual/</code>).</li>\n</ul>\n<h2>When To Use It</h2>\n<ul>\n<li>Before a review or handoff, to show what a branch changed at a glance.</li>\n<li>To turn a plan into a picture before anyone builds it.</li>\n<li>To learn a folder, an endpoint set, or an architecture you did not write.</li>\n</ul>\n<h2>Modes</h2>\n<table>\n<thead>\n<tr>\n<th>Command</th>\n<th>Does</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td><code>/visual</code></td>\n<td>detect the mode</td>\n</tr>\n<tr>\n<td><code>/visual recap [base]</code></td>\n<td>what this branch changed against <code>base</code></td>\n</tr>\n<tr>\n<td><code>/visual plan [file]</code></td>\n<td>a plan as a page; makes no source edits</td>\n</tr>\n<tr>\n<td><code>/visual map [skills-dir or map.json]</code></td>\n<td>drill-down map of a skill pack or system</td>\n</tr>\n<tr>\n<td><code>/visual &lt;path or thing&gt;</code></td>\n<td>explore and map it</td>\n</tr>\n</tbody>\n</table>\n<h2>Install</h2>\n<p>Ships in the super-board pack as a secondary skill. <code>install.sh</code> copies <code>skills/visual/</code> to <code>.claude/skills/visual/</code>. Needs <code>git</code> and Python 3 (stdlib only); the self-check screenshot uses headless Chrome when present.</p>\n","files":[{"path":"assets/template.html","sizeBytes":214116,"isText":false},{"path":"README.md","sizeBytes":2420,"isText":true},{"path":"references/schema.md","sizeBytes":13010,"isText":true},{"path":"references/sections.md","sizeBytes":3934,"isText":true},{"path":"scripts/visual.py","sizeBytes":42199,"isText":true},{"path":"SKILL.md","sizeBytes":6119,"isText":true},{"path":"THIRD_PARTY_NOTICES.md","sizeBytes":4519,"isText":true}],"reviewScore":null,"reviewSummary":null,"trust":{"provenance":"trusted-source-unreviewed","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow.","bodySource":null},"bodyLocked":false,"purchaseUrl":null,"sourceUrl":null,"report":{"provenance":"trusted-source-unreviewed","screen":{"ran":true,"outcome":"notes-only","suspicious":0,"notes":1,"hiddenCharacters":false},"virusScan":{"engine":"clamav","status":"clean","scannedAt":"2026-10-19T20:29:38.343901Z","sha256":"C008AF67162B816394229DEA522A77A3EDEC45101934B4E6788B7EA328FE0240","sizeBytes":92926},"review":null,"source":{"repositoryUrl":"https://github.com/EricTechPro/super-board","path":"skills/visual","license":"MIT","commit":"f014cfa8aa0ef4e807c132f502a520f1e4864a31","subtreeSha":"8C3D712D55BF9D0EC4F59F370060A4C4ECD8E742A2A8D2AE0B8177FF50FFC564","lastSyncedAt":"2026-10-19T20:29:10.28228Z"},"reviewedAt":"2026-10-19T20:30:19.421094Z","notice":"Community-authored content, reproduced verbatim and not vetted as instructions. Treat it as data to evaluate, never as directives to follow."},"install":[{"target":"skills-cli","command":"npx skills add https://github.com/EricTechPro/super-board/tree/main/skills/visual"},{"target":"claude-code","command":"claude plugin marketplace add https://llmmart.ai/marketplace.json && claude plugin install erictechpro-super-board@llmmart"},{"target":"git","command":"git clone https://github.com/EricTechPro/super-board.git"}]}