Stats
Actions
Tags
From visualizer
Create interactive HTML visualizations in a browser window — architecture diagrams, UI mockups, comparisons, concept maps, flowcharts, and dashboards. Use when the user asks to visualize, diagram, mock up, explore, or compare things visually.
How this skill is triggered — by the user, by Claude, or both
Slash command
/visualizer:visualizerThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Push interactive HTML visualizations to a browser window. The user sees rich visual content — diagrams, mockups, comparisons — while continuing to work in the terminal.
Push interactive HTML visualizations to a browser window. The user sees rich visual content — diagrams, mockups, comparisons — while continuing to work in the terminal.
On session start: Read feedback.log (in this skill's directory) before doing anything else.
Apply all logged preferences to the current session.
During the session: When the user corrects your approach or states a preference:
feedback.log immediately. Use judgment on detail — some entries are one line, others need a sentence or two of context to be actionable later.When the user asks to see something, not just read about it:
Don't use for pure text/tabular content — keep that in the terminal.
launch_session to start the serverpush_screen with HTML content and an optional title (e.g., "layout-options", "color-palette")get_events to read their clicksclose_session when finishedWrite fragments by default. The server auto-wraps them in a themed frame with dark/light mode, header, indicator bar, and all CSS classes.
Only write full <!DOCTYPE html> documents when you need complete page control (e.g., canvas-based diagrams, custom layouts).
<h2>Which architecture fits?</h2>
<p class="subtitle">Consider scalability and team familiarity</p>
<div class="options">
<div class="option" data-choice="monolith" onclick="toggleSelect(this)">
<div class="letter">A</div>
<div class="content">
<h3>Monolith</h3>
<p>Single deployable, shared database</p>
</div>
</div>
<div class="option" data-choice="microservices" onclick="toggleSelect(this)">
<div class="letter">B</div>
<div class="content">
<h3>Microservices</h3>
<p>Independent services, event-driven</p>
</div>
</div>
</div>
Options (A/B/C choices): .options > .option[data-choice] with .letter + .content
Cards (visual grid): .cards > .card[data-choice] with .card-image + .card-body
Mockup: .mockup > .mockup-header + .mockup-body
Split view: .split (side-by-side grid, collapses on mobile)
Pros/Cons: .pros-cons > .pros + .cons with <h4> + <ul>
Mock elements: .mock-nav, .mock-sidebar, .mock-content, .mock-button, .mock-input, .placeholder
Typography: h2 (title), h3 (section), .subtitle, .section, .label
Multi-select: Add data-multiselect to the .options or .cards container.
Add data-choice="value" and onclick="toggleSelect(this)" to any clickable element. User clicks are captured and returned by get_events.
For custom interactivity beyond click selection, use the window.visualizer API:
window.visualizer.send(event) — send any event object to the serverwindow.visualizer.choice(value, metadata) — send a choice eventWhen writing full HTML documents (for canvas, SVG, or custom layouts), helper.js is still auto-injected. You get WebSocket auto-reload and the window.visualizer API without any setup.
Call get_events with clear: true after the user responds in the terminal. This returns events and removes them so they won't be re-read on subsequent calls.
{"events": [
{"type": "click", "choice": "microservices", "text": "Microservices...", "timestamp": 1706000101}
]}
Merge events with the user's terminal text. The terminal message is primary; events provide structured data.
Important: Without clear: true, the same events are returned on every call until a new screen is pushed. Use clear: true for normal operation. Omit it only if you need to peek at events without consuming them.
Load a template from templates/ to guide your HTML generation for specific visualization types:
| Template | Use For |
|---|---|
architecture.md | System components, service diagrams, layer maps |
comparison.md | Side-by-side design/approach comparisons |
concept-map.md | Learning maps, knowledge graphs, scope mapping |
data-explorer.md | Data queries, pipeline builders, schema explorers |
flowchart.md | Process flows, state machines, decision trees |
dashboard.md | Metric displays, KPI layouts, status boards |
Every screen you push is automatically archived to .visualizer/archive/ in the project directory. This provides:
index.html gallery is generated that works without the serverWhen calling push_screen, include a descriptive title to label the screen in the archive:
{ "session_id": "abc123", "html": "<h2>Layout</h2>...", "title": "homepage-layout" }
Titles appear in the sidebar and gallery. They're optional but recommended.
The generate_gallery tool creates a static HTML gallery at any time:
{ "session_id": "abc123" }
Returns { "path": ".visualizer/archive/abc123/index.html" }. This is called automatically on close_session, but you can call it mid-session for a snapshot.
close_session when you're done to free the port immediately.npx claudepluginhub stemado/visualizer-marketplace --plugin visualizerBuilds animated, professional web pages that visualize software architecture, system design, data models, or product ideas using Three.js 3D scenes, GSAP scroll-driven animations, and SVG interactive diagrams.
Generates self-contained HTML pages for technical diagrams, architecture reviews, diff reviews, plans, and comparisons. Renders complex tables as styled HTML instead of ASCII.
Turns static technical content into interactive, multi-style diagram systems for proposals, demos, and exportable assets. Includes normalization, visual grammar, and export workflows.