VisualExplainer
Turns complex terminal output into styled, interactive HTML pages. Visual is default — prose is accent. For Mermaid diagrams: use this skill for interactive HTML with zoom/pan; use Media/Art for static image exports (PNG/SVG for slides or docs).
Quality References (load on demand)
Before generating HTML output, consult these checklists:
- Performance:
${SKILLS_HOME}/Utilities/References/performance-checklist.md — Core Web Vitals, bundle budgets, image optimization, rendering best practices
- Accessibility:
${SKILLS_HOME}/Utilities/References/accessibility-checklist.md — WCAG 2.1 AA, keyboard nav, screen reader support, color contrast, ARIA patterns
Proactive table rendering. When you're about to present tabular data as an ASCII box-drawing table (4+ rows or 3+ columns), generate an HTML page instead. Don't wait for the user to ask — render it as HTML automatically and tell them the file path.
Customization
Before executing, check for user customizations at:
${PAI_USER_DIR}/SKILLCUSTOMIZATIONS/VisualExplainer/
If this directory exists, load and apply any PREFERENCES.md. If not, proceed with defaults.
Workflow Routing
| Workflow |
Trigger |
File |
| GenerateWebDiagram |
"diagram", "flowchart", "visualize architecture" |
Workflows/GenerateWebDiagram.md |
| GenerateVisualPlan |
"visual plan", "implementation plan", "feature spec" |
Workflows/GenerateVisualPlan.md |
| GenerateSlides |
"slides", "slide deck", "presentation" |
Workflows/GenerateSlides.md |
| DiffReview |
"diff review", "review this diff", "visual code review" |
Workflows/DiffReview.md |
| PlanReview |
"review plan", "plan assessment", "plan coverage" |
Workflows/PlanReview.md |
| ProjectRecap |
"project recap", "recap", "re-entry context" |
Workflows/ProjectRecap.md |
| FactCheck |
"fact check", "verify claims", "check document" |
Workflows/FactCheck.md |
| ShareDiagram |
"share diagram", "deploy diagram", "publish HTML" |
Workflows/ShareDiagram.md |
| InteractiveBrainstorm |
"brainstorm visually", "show design options", "interactive mockup", "visual companion" |
BrainstormServer/ (see below) |
Examples
Example 1: Architecture diagram
User: "Generate a diagram of the authentication flow"
→ Invokes GenerateWebDiagram workflow
→ Reads CssPatterns.md + Libraries.md for rendering approach
→ Generates Mermaid flowchart with zoom/pan controls
→ Opens ${AGENT_HOME}/diagrams/auth-flow.html in browser
Example 2: Diff review
User: "Give me a visual diff review of the last commit"
→ Invokes DiffReview workflow
→ Gathers git diff, file stats, API surface changes
→ Generates 9-section HTML report with KPI dashboard
→ Opens in browser with architecture diagrams and code analysis
Example 3: Slide deck
User: "Turn this research into slides"
→ Invokes GenerateSlides workflow
→ Plans narrative arc, selects slide types
→ Generates deck with keyboard/touch navigation
→ Opens presentation in browser
InteractiveBrainstorm Workflow
Live visual brainstorming via a zero-dependency Node.js server. Claude writes HTML fragments with data-choice attributes, the user sees them in a browser and clicks choices, Claude reads those choices on the next turn.
Steps:
- Start server:
bash BrainstormServer/start-server.sh --project-dir $(pwd)
- Write HTML fragments with
data-choice attributes to the session directory (from the JSON output)
- Share the URL with the user (e.g.
http://127.0.0.1:3333)
- Read choices from
.events file in the session directory on next turn
- Stop server when done:
bash BrainstormServer/stop-server.sh <session-dir>
Example fragment:
<h2>Which layout do you prefer?</h2>
<div class="choice-grid">
<div data-choice="sidebar">Sidebar navigation with collapsible sections</div>
<div data-choice="topnav">Top navigation bar with dropdown menus</div>
<div data-choice="tabs">Tabbed interface with persistent state</div>
</div>
See BrainstormServer/RATIONALE.md for architecture details.
Quick Reference
Output: ${AGENT_HOME}/diagrams/{descriptive-name}.html (opens in browser)
Renderers: Mermaid.js (diagrams), CSS Grid (cards), Chart.js (metrics), HTML table (data)
Themes: Light + dark via CSS custom properties
Anti-slop: No Inter/violet, no neon dashboards, no gradient mesh
Context files (load on demand):
CssPatterns.md — Layout, theming, animations, overflow protectionLibraries.md — CDN links, Mermaid theming, 13 font pairingsSlidePatterns.md — Slide engine, 10 types, presetsResponsiveNav.md — Sticky TOC, scroll-spyAntiPatterns.md — AI slop detection, forbidden patternsQualityChecklist.md — Squint/swap/theme/overflow/zoom checksMasterReference.md — Full SKILL.md from original visual-explainer (workflow, diagram types, aesthetics)
1---2name: visualexplainer3description: Generate self-contained HTML pages for diagrams, diff reviews, slide decks, data tables, and visual plans. USE WHEN generate diagram, visual explanation, diff review, code review visualization, generate slides, slide deck, visual plan, project recap visualization, fact check report, web diagram, architecture diagram, flowchart HTML, data table visualization, visual documentation, render as HTML instead of ASCII, or share diagram. Replaces ASCII tables and text diagrams with interactive browser-rendered HTML.4---56# VisualExplainer78Turns complex terminal output into styled, interactive HTML pages. Visual is default — prose is accent. For Mermaid diagrams: use this skill for interactive HTML with zoom/pan; use Media/Art for static image exports (PNG/SVG for slides or docs).910## Quality References (load on demand)1112Before generating HTML output, consult these checklists:13- **Performance:** `${SKILLS_HOME}/Utilities/References/performance-checklist.md` — Core Web Vitals, bundle budgets, image optimization, rendering best practices14- **Accessibility:** `${SKILLS_HOME}/Utilities/References/accessibility-checklist.md` — WCAG 2.1 AA, keyboard nav, screen reader support, color contrast, ARIA patterns1516**Proactive table rendering.** When you're about to present tabular data as an ASCII box-drawing table (4+ rows or 3+ columns), generate an HTML page instead. Don't wait for the user to ask — render it as HTML automatically and tell them the file path.1718## Customization1920**Before executing, check for user customizations at:**21`${PAI_USER_DIR}/SKILLCUSTOMIZATIONS/VisualExplainer/`2223If this directory exists, load and apply any PREFERENCES.md. If not, proceed with defaults.2425<!-- ## Voice Notification2627**When executing a workflow, do BOTH:**28291. **Send voice notification**:30 ```bash31 curl -s -X POST http://localhost:8888/notify \32 -H "Content-Type: application/json" \33 -d '{"message": "Running the WORKFLOWNAME workflow in the VisualExplainer skill to ACTION"}' \34 > /dev/null 2>&1 &35 ```36372. **Output text notification**:38 ```39 Running the **WorkflowName** workflow in the **VisualExplainer** skill to ACTION...40 ```41-->4243## Workflow Routing4445| Workflow | Trigger | File |46|----------|---------|------|47| **GenerateWebDiagram** | "diagram", "flowchart", "visualize architecture" | `Workflows/GenerateWebDiagram.md` |48| **GenerateVisualPlan** | "visual plan", "implementation plan", "feature spec" | `Workflows/GenerateVisualPlan.md` |49| **GenerateSlides** | "slides", "slide deck", "presentation" | `Workflows/GenerateSlides.md` |50| **DiffReview** | "diff review", "review this diff", "visual code review" | `Workflows/DiffReview.md` |51| **PlanReview** | "review plan", "plan assessment", "plan coverage" | `Workflows/PlanReview.md` |52| **ProjectRecap** | "project recap", "recap", "re-entry context" | `Workflows/ProjectRecap.md` |53| **FactCheck** | "fact check", "verify claims", "check document" | `Workflows/FactCheck.md` |54| **ShareDiagram** | "share diagram", "deploy diagram", "publish HTML" | `Workflows/ShareDiagram.md` |55| **InteractiveBrainstorm** | "brainstorm visually", "show design options", "interactive mockup", "visual companion" | `BrainstormServer/` (see below) |5657## Examples5859**Example 1: Architecture diagram**60```61User: "Generate a diagram of the authentication flow"62→ Invokes GenerateWebDiagram workflow63→ Reads CssPatterns.md + Libraries.md for rendering approach64→ Generates Mermaid flowchart with zoom/pan controls65→ Opens ${AGENT_HOME}/diagrams/auth-flow.html in browser66```6768**Example 2: Diff review**69```70User: "Give me a visual diff review of the last commit"71→ Invokes DiffReview workflow72→ Gathers git diff, file stats, API surface changes73→ Generates 9-section HTML report with KPI dashboard74→ Opens in browser with architecture diagrams and code analysis75```7677**Example 3: Slide deck**78```79User: "Turn this research into slides"80→ Invokes GenerateSlides workflow81→ Plans narrative arc, selects slide types82→ Generates deck with keyboard/touch navigation83→ Opens presentation in browser84```8586## InteractiveBrainstorm Workflow8788Live visual brainstorming via a zero-dependency Node.js server. Claude writes HTML fragments with `data-choice` attributes, the user sees them in a browser and clicks choices, Claude reads those choices on the next turn.8990**Steps:**911. Start server: `bash BrainstormServer/start-server.sh --project-dir $(pwd)`922. Write HTML fragments with `data-choice` attributes to the session directory (from the JSON output)933. Share the URL with the user (e.g. `http://127.0.0.1:3333`)944. Read choices from `.events` file in the session directory on next turn955. Stop server when done: `bash BrainstormServer/stop-server.sh <session-dir>`9697**Example fragment:**98```html99<h2>Which layout do you prefer?</h2>100<div class="choice-grid">101 <div data-choice="sidebar">Sidebar navigation with collapsible sections</div>102 <div data-choice="topnav">Top navigation bar with dropdown menus</div>103 <div data-choice="tabs">Tabbed interface with persistent state</div>104</div>105```106107See `BrainstormServer/RATIONALE.md` for architecture details.108109## Quick Reference110111**Output:** `${AGENT_HOME}/diagrams/{descriptive-name}.html` (opens in browser)112**Renderers:** Mermaid.js (diagrams), CSS Grid (cards), Chart.js (metrics), HTML table (data)113**Themes:** Light + dark via CSS custom properties114**Anti-slop:** No Inter/violet, no neon dashboards, no gradient mesh115116**Context files (load on demand):**117- `CssPatterns.md` — Layout, theming, animations, overflow protection118- `Libraries.md` — CDN links, Mermaid theming, 13 font pairings119- `SlidePatterns.md` — Slide engine, 10 types, presets120- `ResponsiveNav.md` — Sticky TOC, scroll-spy121- `AntiPatterns.md` — AI slop detection, forbidden patterns122- `QualityChecklist.md` — Squint/swap/theme/overflow/zoom checks123- `MasterReference.md` — Full SKILL.md from original visual-explainer (workflow, diagram types, aesthetics)
mj-deving