nicobailon · jccidc · Apr 10, 2026 · Apr 11, 2026 · Apr 11, 2026 · Apr 11, 2026
diff --git a/.claude-plugin/marketplace.json b/.claude-plugin/marketplace.json
@@ -1,23 +1,23 @@
 {
-  "name": "visual-explainer-marketplace",
+  "name": "my-visual-explainer-marketplace",
   "owner": {
-    "name": "nicobailon"
+    "name": "jccidc"
   },
   "metadata": {
-    "description": "Plugin distribution for visual-explainer",
+    "description": "Plugin distribution for my-visual-explainer",
     "version": "1.0.0",
     "pluginRoot": "./plugins"
   },
   "plugins": [
     {
-      "name": "visual-explainer",
-      "source": "./plugins/visual-explainer",
+      "name": "my-visual-explainer",
+      "source": "./plugins/my-visual-explainer",
       "description": "Generate beautiful HTML pages for diagrams, diff reviews, plan reviews, slides, and data tables",
-      "version": "0.5.1",
+      "version": "0.7.1",
       "author": {
-        "name": "nicobailon"
+        "name": "jccidc"
       },
-      "repository": "https://github.com/nicobailon/visual-explainer",
+      "repository": "https://github.com/jccidc/my-visual-explainer",
       "license": "MIT",
       "keywords": ["diagrams", "html", "visualization", "diff-review", "slides"],
       "category": "visualization",

diff --git a/.claude-plugin/plugin.json b/.claude-plugin/plugin.json
@@ -1,5 +1,5 @@
 {
-  "name": "visual-explainer-marketplace",
-  "description": "Plugin distribution for visual-explainer",
+  "name": "my-visual-explainer-marketplace",
+  "description": "Plugin distribution for my-visual-explainer",
   "version": "1.0.0"
 }
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 .DS_Store
+.claude/settings.local.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,50 @@
 # Changelog
 
+## [0.7.1] - 2026-04-17
+
+### Bug Fixes
+- Fixed theme switcher, background selector, and share dropdowns becoming unclickable when the initial Mermaid render throws a parse error. Root cause: the module script used a bare top-level `await mermaid.render(...)`, so any parse failure (unsupported node shape, unescaped entity, malformed subgraph) rejected the promise and halted the rest of the module before the dropdown handlers were wired. All three interactive controls appeared but had no click handlers attached.
+- `templates/theme-switcher-demo.html`: wrapped the initial Mermaid render, `ThemeSwitcher.init()`, and `BG_PATTERNS[0].apply()` in try/catch blocks. If the diagram fails to render, the canvas now shows a small "render failed — check console" message and the toolbar still works.
+- `SKILL.md`: added guidance in the Interactive Controls section to always wrap the initial Mermaid render in try/catch and not rely on top-level await for UI wiring.
+
+## [0.7.0] - 2026-04-10
+
+### Theme Switcher
+- Runtime palette and font switching via dropdown — 11 curated presets: Teal Slate, Terracotta Sage, Editorial Rose, Deep Navy Gold, Amber Emerald, Dracula, Nord, Catppuccin Mocha, Solarized Light, Rose Pine Dawn, GitHub Light
+- Each preset defines full light and dark palettes with all CSS custom properties (bg, surface, border, text, accent, node colors, status colors)
+- Google Fonts hot-reload via `<link>` element swap — fonts change instantly without page refresh
+- Mermaid diagrams re-render automatically on theme change with updated `themeVariables`
+- Light/dark mode toggle button alongside preset dropdown
+- Random initial preset on page load for variety
+- New `theme-switcher-demo.html` template showcasing all components with live switching
+- Keyboard accessible: Escape closes dropdown, Tab navigation through options
+
+### Share Button
+- In-page share dropdown: Copy HTML, Download .html
+- Copy/download strips all interactive chrome (theme switcher, share button, background selector) and bakes current theme into the HTML — recipients see exactly what you see
+- Toast notification confirms each action
+
+### Background Switcher
+- Runtime background pattern selector with 15 options: Dot Grid, Hex Grid, Diagonal Lines, Cross Hatch, Radial Glow, Dual Glow, Blueprint Grid, Noise Texture, Honeycomb, Isometric, Topography, Parchment, Sketchbook, Graph Paper, Linen
+- Patterns use CSS custom properties and mode-aware opacity (stronger in light mode)
+- Background re-applies automatically on theme switch
+
+### Windows Support
+- Added Windows `start` command to browser-open instructions in SKILL.md
+
+### Accessibility
+- Color contrast guidance (WCAG 2.1 AA ratios)
+- Focus-visible keyboard indicators
+- ARIA landmarks guidance (nav, main, article)
+- Screen reader considerations for Mermaid diagrams, status indicators, images, tables
+
+### Removed
+- Print/PDF export (page breaks, PDF save, print preview) — CSS print layout was unreliable across browsers. May revisit with a different approach.
+
+### Bug Fixes
+- Synced `marketplace.json` version from 0.5.1 to 0.6.3 (was stale)
+- Added Claude Code skill paths to `share.sh` (previously only checked Pi paths)
+
 ## [0.6.3] - 2026-03-09
 
 ### Documentation

diff --git a/README.md b/README.md
@@ -1,8 +1,8 @@
 <p>
-  <img src="banner.png" alt="visual-explainer" width="1100">
+  <img src="banner.png" alt="my-visual-explainer" width="1100">
 </p>
 
-# visual-explainer
+# my-visual-explainer
 
 **An agent skill that turns complex terminal output into styled HTML pages you actually want to read.**
 
@@ -18,6 +18,40 @@ Ask your agent to explain a system architecture, review a diff, or compare requi
 
 https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec
 
+## What's New in v0.7.0
+
+### Theme Engine
+
+Every generated page now includes a runtime theme engine. Switch palettes, toggle light/dark, swap background patterns, and export clean HTML — all without a page refresh.
+
+![Overview](docs/screenshots/overview.png)
+
+### 11 Theme Presets
+
+Full light and dark palettes with Google Fonts hot-reload. Mermaid diagrams re-render automatically on every theme change.
+
+![Theme presets](docs/screenshots/theme-presets.png)
+
+### 16 Background Patterns
+
+Dot grid, hex grid, blueprint, isometric, parchment, sketchbook, and more. All mode-aware — stronger opacity in light mode, subtler in dark.
+
+![Background patterns](docs/screenshots/background-patterns.png)
+
+### Share Button
+
+Copy clean HTML to clipboard or download as `.html`. The export strips all interactive chrome (theme switcher, share button, background selector) and bakes the active theme into the CSS — recipients see exactly what you see.
+
+### Test Coverage
+
+Full manual test matrix covering all presets, patterns, modes, share functions, responsive behavior, and keyboard accessibility.
+
+![Test matrix](docs/screenshots/test-matrix.png)
+
+### Files Changed
+
+![Files changed](docs/screenshots/files-changed.png)
+
 ## Why
 
 Every coding agent defaults to ASCII art when you ask for a diagram. Box-drawing characters, monospace alignment hacks, text arrows. It works for trivial cases, but anything beyond a 3-box flowchart turns into an unreadable mess.
@@ -30,51 +64,51 @@ This skill fixes that. Real typography, dark/light themes, interactive Mermaid d
 
 **Claude Code (marketplace):**
 ```shell
-/plugin marketplace add nicobailon/visual-explainer
-/plugin install visual-explainer@visual-explainer-marketplace
+/plugin marketplace add jccidc/my-visual-explainer
+/plugin install my-visual-explainer@my-visual-explainer-marketplace
 ```
 
-Note: Claude Code plugins namespace commands as `/visual-explainer:command-name`.
+Note: Claude Code plugins namespace commands as `/my-visual-explainer:command-name`.
 
 **Pi:**
 ```bash
-curl -fsSL https://raw.githubusercontent.com/nicobailon/visual-explainer/main/install-pi.sh | bash
+curl -fsSL https://raw.githubusercontent.com/jccidc/my-visual-explainer/main/install-pi.sh | bash
 ```
 
 Or clone and run:
 ```bash
-git clone --depth 1 https://github.com/nicobailon/visual-explainer.git
-cd visual-explainer && ./install-pi.sh
+git clone --depth 1 https://github.com/jccidc/my-visual-explainer.git
+cd my-visual-explainer && ./install-pi.sh
 ```
 
 **OpenAI Codex:**
 ```bash
-git clone --depth 1 https://github.com/nicobailon/visual-explainer.git /tmp/visual-explainer
+git clone --depth 1 https://github.com/jccidc/my-visual-explainer.git /tmp/my-visual-explainer
 
 # Install skill
-cp -r /tmp/visual-explainer/plugins/visual-explainer ~/.agents/skills/visual-explainer
+cp -r /tmp/my-visual-explainer/plugins/my-visual-explainer ~/.agents/skills/my-visual-explainer
 
 # Optional: Install slash commands (deprecated, but works)
 mkdir -p ~/.codex/prompts
-cp /tmp/visual-explainer/plugins/visual-explainer/commands/*.md ~/.codex/prompts/
+cp /tmp/my-visual-explainer/plugins/my-visual-explainer/commands/*.md ~/.codex/prompts/
 
-rm -rf /tmp/visual-explainer
+rm -rf /tmp/my-visual-explainer
 ```
 
-Invoke with `$visual-explainer` or let Codex activate it implicitly. With prompts installed, use `/prompts:diff-review`, `/prompts:plan-review`, etc.
+Invoke with `$my-visual-explainer` or let Codex activate it implicitly. With prompts installed, use `/prompts:diff-review`, `/prompts:plan-review`, etc.
 
 ## Commands
 
-| Command | What it does |
-|---------|-------------|
-| `/generate-web-diagram` | Generate an HTML diagram for any topic |
-| `/generate-visual-plan` | Generate a visual implementation plan for a feature or extension |
-| `/generate-slides` | Generate a magazine-quality slide deck |
-| `/diff-review` | Visual diff review with architecture comparison and code review |
-| `/plan-review` | Compare a plan against the codebase with risk assessment |
-| `/project-recap` | Mental model snapshot for context-switching back to a project |
-| `/fact-check` | Verify accuracy of a document against actual code |
-| `/share` | Deploy an HTML page to Vercel and get a live URL |
+| Command                 | What it does                                                          |
+|-------------------------|-----------------------------------------------------------------------|
+| `/generate-web-diagram` | Generate an HTML diagram for any topic                                |
+| `/generate-visual-plan` | Generate a visual implementation plan for a feature or extension      |
+| `/generate-slides`      | Generate a magazine-quality slide deck                                |
+| `/diff-review`          | Visual diff review with architecture comparison and code review       |
+| `/plan-review`          | Compare a plan against the codebase with risk assessment              |
+| `/project-recap`        | Mental model snapshot for context-switching back to a project         |
+| `/fact-check`           | Verify accuracy of a document against actual code                     |
+| `/share`                | Deploy an HTML page to Vercel and get a live URL                      |
 
 The agent also kicks in automatically when it's about to dump a complex table in the terminal (4+ rows or 3+ columns) — it renders HTML instead.
 
@@ -96,7 +130,7 @@ https://github.com/user-attachments/assets/342d3558-5fcf-4fb2-bc03-f0dd5b9e35dc
 ├── plugin.json           ← marketplace identity
 └── marketplace.json      ← plugin catalog
 plugins/
-└── visual-explainer/
+└── my-visual-explainer/
     ├── .claude-plugin/
     │   └── plugin.json   ← plugin manifest
     ├── SKILL.md           ← workflow + design principles
@@ -110,7 +144,8 @@ plugins/
     │   ├── architecture.html
     │   ├── mermaid-flowchart.html
     │   ├── data-table.html
-    │   └── slide-deck.html
+    │   ├── slide-deck.html
+    │   └── theme-switcher-demo.html
     └── scripts/
         └── share.sh       ← deploy HTML to Vercel for sharing
 ```
@@ -122,7 +157,6 @@ The skill routes to the right approach automatically: Mermaid for flowcharts and
 ## Limitations
 
 - Requires a browser to view
-- Switching OS theme requires a page refresh for Mermaid SVGs
 - Results vary by model capability
 
 ## Credits

diff --git a/docs/screenshots/background-patterns.png b/docs/screenshots/background-patterns.png
diff --git a/docs/screenshots/files-changed.png b/docs/screenshots/files-changed.png
diff --git a/docs/screenshots/known-issues.png b/docs/screenshots/known-issues.png
diff --git a/docs/screenshots/overview.png b/docs/screenshots/overview.png
diff --git a/docs/screenshots/test-matrix.png b/docs/screenshots/test-matrix.png
diff --git a/docs/screenshots/theme-presets.png b/docs/screenshots/theme-presets.png
diff --git a/install-pi.sh b/install-pi.sh
@@ -1,16 +1,16 @@
 #!/bin/bash
-# install-pi.sh - Install visual-explainer for Pi
+# install-pi.sh - Install my-visual-explainer for Pi
 
 set -e
 
-SKILL_DIR="$HOME/.pi/agent/skills/visual-explainer"
+SKILL_DIR="$HOME/.pi/agent/skills/my-visual-explainer"
 PROMPTS_DIR="$HOME/.pi/agent/prompts"
 
 # Check if we're in the repo or need to clone
-if [ ! -f "plugins/visual-explainer/SKILL.md" ]; then
-    echo "Cloning visual-explainer..."
+if [ ! -f "plugins/my-visual-explainer/SKILL.md" ]; then
+    echo "Cloning my-visual-explainer..."
     TEMP_DIR=$(mktemp -d)
-    git clone --depth 1 https://github.com/nicobailon/visual-explainer.git "$TEMP_DIR"
+    git clone --depth 1 https://github.com/jccidc/my-visual-explainer.git "$TEMP_DIR"
     cd "$TEMP_DIR"
     CLEANUP=true
 else
@@ -20,7 +20,7 @@ fi
 # Copy skill
 echo "Installing skill to $SKILL_DIR..."
 rm -rf "$SKILL_DIR"
-cp -r plugins/visual-explainer "$SKILL_DIR"
+cp -r plugins/my-visual-explainer "$SKILL_DIR"
 
 # Replace {{skill_dir}} with actual path
 echo "Patching paths..."
@@ -41,7 +41,7 @@ if [ "$CLEANUP" = true ]; then
 fi
 
 echo ""
-echo "Done! Restart pi to use visual-explainer."
+echo "Done! Restart pi to use my-visual-explainer."
 echo ""
 echo "Commands available:"
 echo "  /diff-review, /plan-review, /project-recap, /fact-check"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "visual-explainer",
-  "version": "0.6.3",
+  "name": "my-visual-explainer",
+  "version": "0.7.1",
   "description": "Agent skill that generates beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",
   "keywords": [
     "claude-code-plugin",

diff --git a/...sual-explainer/.claude-plugin/plugin.json → ...sual-explainer/.claude-plugin/plugin.json b/...sual-explainer/.claude-plugin/plugin.json → ...sual-explainer/.claude-plugin/plugin.json
@@ -1,10 +1,10 @@
 {
-  "name": "visual-explainer",
+  "name": "my-visual-explainer",
   "description": "Generate beautiful HTML pages for diagrams, diff reviews, plan reviews, and data tables",
-  "version": "0.6.3",
+  "version": "0.7.1",
   "author": {
-    "name": "nicobailon"
+    "name": "jccidc"
   },
-  "repository": "https://github.com/nicobailon/visual-explainer",
+  "repository": "https://github.com/jccidc/my-visual-explainer",
   "license": "MIT"
 }
diff --git a/plugins/visual-explainer/SKILL.md → plugins/my-visual-explainer/SKILL.md b/plugins/visual-explainer/SKILL.md → plugins/my-visual-explainer/SKILL.md
@@ -1,11 +1,11 @@
 ---
-name: visual-explainer
+name: my-visual-explainer
 description: Generate beautiful, self-contained HTML pages that visually explain systems, code changes, plans, and data. Use when the user asks for a diagram, architecture overview, diff review, plan review, project recap, comparison table, or any visual explanation of technical concepts. Also use proactively when you are about to render a complex ASCII table (4+ rows or 3+ columns) — present it as a styled HTML page instead.
 license: MIT
 compatibility: Requires a browser to view generated HTML files. Optional surf-cli for AI image generation.
 metadata:
-  author: nicobailon
-  version: "0.6.3"
+  author: jccidc
+  version: "0.7.0"
 ---
 
 # Visual Explainer
@@ -16,7 +16,7 @@ Generate self-contained HTML files for technical diagrams, visualizations, and d
 
 ## Available Commands
 
-Detailed prompt templates in `./commands/`. In Pi, these are slash commands (`/diff-review`). In Claude Code, namespaced (`/visual-explainer:diff-review`). In Codex, use `/prompts:diff-review` (if installed to `~/.codex/prompts/`) or invoke `$visual-explainer` and describe the workflow.
+Detailed prompt templates in `./commands/`. In Pi, these are slash commands (`/diff-review`). In Claude Code, namespaced (`/my-visual-explainer:diff-review`). In Codex, use `/prompts:diff-review` (if installed to `~/.codex/prompts/`) or invoke `$my-visual-explainer` and describe the workflow.
 
 | Command | What it does |
 |---------|-------------|
@@ -189,13 +189,38 @@ Put your primary aesthetic in `:root` and the alternate in the media query:
 
 Keep animations purposeful: entrance reveals, hover feedback, and user-initiated interactions. Nothing should glow or pulse on its own.
 
-### 4. Deliver
+### 4. Interactive Controls (Required)
+
+**Every generated page must include the theme switcher toolbar.** Read the Theme Switcher, Share Button, and Background Switcher sections in `./references/css-patterns.md` for the full implementation. Read `./templates/theme-switcher-demo.html` as the canonical reference — it contains the complete working implementation with all presets, patterns, and share functionality.
+
+The toolbar goes in `<body>` as the first element (fixed top-right) and includes:
+1. **Light/dark mode toggle** — sun/moon button
+2. **Theme preset dropdown** — all 11 presets with font hot-reload and Mermaid re-render
+3. **Background pattern dropdown** — all 15+ patterns, mode-aware
+4. **Share dropdown** — Copy HTML (strips chrome, bakes theme) and Download .html
+
+**Implementation checklist:**
+- `<link id="theme-fonts">` in `<head>` (the engine swaps this href on preset change)
+- All 11 `THEME_PRESETS` with full light/dark palettes
+- All background patterns with `patLine()`, `patDot()`, `patLineBold()` helpers
+- `ThemeSwitcher` IIFE with `init()`, `setPreset()`, `toggleMode()`, `rerenderMermaid()`
+- `SharePage` IIFE with `copyHTML()`, `download()` — `getCleanHTML()` strips the toolbar and bakes CSS variables
+- Background menu populated dynamically from `BG_PATTERNS` array
+- `currentBgIndex` tracking + re-apply on theme change
+- Default preset: random (vary each generation). Default background: Dot Grid. Default mode: detect from `prefers-color-scheme`.
+
+**Do not abbreviate or subset the presets/patterns.** Copy them from the demo template. Missing presets or truncated pattern functions are bugs.
+
+**Wrap the initial Mermaid render in try/catch.** The theme/share/background dropdowns live inside the same `<script type="module">` as the Mermaid bootstrap. A bare top-level `await mermaid.render(...)` will reject on any parse error (unsupported node shape, unescaped entity, malformed subgraph) and halt the rest of the module — leaving every dropdown unwired. Follow the demo template: wrap the initial `await` in `try/catch`, and also wrap `ThemeSwitcher.init()` and `BG_PATTERNS[0].apply()` so one broken piece never breaks the whole toolbar.
+
+### 5. Deliver
 
 **Output location:** Write to `~/.agent/diagrams/`. Use a descriptive filename based on content: `modem-architecture.html`, `pipeline-flow.html`, `schema-overview.html`. The directory persists across sessions.
 
 **Open in browser:**
 - macOS: `open ~/.agent/diagrams/filename.html`
 - Linux: `xdg-open ~/.agent/diagrams/filename.html`
+- Windows: `start ~/.agent/diagrams/filename.html`
 
 **Tell the user** the file path so they can re-open or share it.
 

diff --git a/.../visual-explainer/commands/diff-review.md → ...-visual-explainer/commands/diff-review.md b/.../visual-explainer/commands/diff-review.md → ...-visual-explainer/commands/diff-review.md
@@ -1,9 +1,9 @@
 ---
 description: Generate a visual HTML diff review — before/after architecture comparison with code review analysis
 ---
-Load the visual-explainer skill, then generate a comprehensive visual diff review as a self-contained HTML page.
+Load the my-visual-explainer skill, then generate a comprehensive visual diff review as a self-contained HTML page.
 
-Follow the visual-explainer skill workflow. Read the reference template, CSS patterns, and mermaid theming references before generating. Use a GitHub-diff-inspired aesthetic with red/green before/after panels, but vary fonts and palette from previous diagrams.
+Follow the my-visual-explainer skill workflow. Read the reference template, CSS patterns, and mermaid theming references before generating. Use a GitHub-diff-inspired aesthetic with red/green before/after panels, but vary fonts and palette from previous diagrams.
 
 **Scope detection** — determine what to diff based on `$1`:
 - Branch name (e.g. `main`, `develop`): working tree vs that branch

diff --git a/...s/visual-explainer/commands/fact-check.md → ...y-visual-explainer/commands/fact-check.md b/...s/visual-explainer/commands/fact-check.md → ...y-visual-explainer/commands/fact-check.md
@@ -1,7 +1,7 @@
 ---
 description: Verify the factual accuracy of a document against the actual codebase, correct inaccuracies in place
 ---
-Load the visual-explainer skill, then verify the factual accuracy of a document that makes claims about a codebase. Read the file, extract every verifiable claim, check each against the actual code and git history, correct inaccuracies in place, and add a verification summary.
+Load the my-visual-explainer skill, then verify the factual accuracy of a document that makes claims about a codebase. Read the file, extract every verifiable claim, check each against the actual code and git history, correct inaccuracies in place, and add a verification summary.
 
 For HTML files: read `./references/css-patterns.md` to match the existing page's styling when inserting the verification summary.