Stats
Actions
Tags
'%20stop-opacity%3D'0.16'%2F%3E%3Cstop%20offset%3D'1'%20stop-color%3D'rgb(200%2C90%2C60)'%20stop-opacity%3D'0.03'%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D'320'%20height%3D'200'%20fill%3D'url(%23g)'%2F%3E%3Ccircle%20cx%3D'250'%20cy%3D'56'%20r%3D'92'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.06'%2F%3E%3Ccircle%20cx%3D'64'%20cy%3D'172'%20r%3D'58'%20fill%3D'rgb(200%2C90%2C60)'%20fill-opacity%3D'0.05'%2F%3E%3C%2Fsvg%3E)
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-plugin --plugin visualizer2plugins reuse this skill
First indexed Mar 24, 2026
Builds 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.
Generates interactive click-through architecture diagrams as self-contained HTML files with animated data flows, mode toggles, and dark/light themes. Use when you need to visualize system design, service maps, data flows, or pipelines for workshops, onboarding, or planning.