html-mind-map

这段内容是审核时保存的快照。外部来源才是完整且最新的版本。

---
name: html-mind-map
description: Create branching, draggable HTML mind maps and concept maps for capturing brainstorms, mapping knowledge structures, exploring debugging hypotheses, or organizing nested ideas. Always include a Submit button (calls `submitToClaude`) to send the captured structure back to the agent for next steps. Use whenever the user wants to capture, organize, or explore branching ideas, hypotheses, knowledge structures, or any tree/graph-shaped thinking — especially when they say "brainstorm", "map out", "explore", or "what if".
metadata:
  version: "1.2.1"
---

# HTML Mind Map & Concept Map

Some thinking is tree-shaped or graph-shaped: brainstorming variations of an idea, mapping a knowledge domain, working through "what if X is the cause" debugging trees, or organizing nested concepts. A mind map externalizes that structure so the user can see it, rearrange it, and hand it back to the agent for the next step.

## Pre-flight — run BEFORE writing the artifact

This skill produces an interactive artifact. **Invoke the `html-skills-listen` skill from this plugin first** (Skill tool: `html-skills:html-skills-listen`). It sets up a per-session local receiver and arms a `Monitor` so user submissions arrive as session notifications instead of as copy-paste round-trips. It's idempotent — invoke every time you fire this skill.

Capture the URL it returns. If it returned one, inject it as `window.__CLAUDE_SUBMIT_URL__` in the HTML you're about to write. If it reported web/sandbox mode (no URL returned), generate the HTML *without* `__CLAUDE_SUBMIT_URL__` set — `submitToClaude` will fall back to clipboard mode automatically.

Skipping this step costs the user a copy-paste round-trip on every submit. Invoking the skill is cheap and idempotent.


## When to use this skill

- "Brainstorm / map out / explore X"
- "What are all the possibilities for Y"
- "Help me think through the causes of Z"
- "Organize these ideas / concepts / hypotheses"
- "Build me a concept map for X"
- Any explanation that branches recursively

## Output requirements

Nodes draggable. New nodes addable inline. Connections between nodes (most often a tree, sometimes a graph). Always include an export button that produces a structured representation of the map — JSON tree, indented outline, or natural-language summary.

The map starts populated with whatever the user provided as starting nodes; the user expands from there.

## HTML output foundation

These defaults apply to **every** artifact this skill produces, on top of the requirements above. If a rule above conflicts with this list, the rule above wins; otherwise these are non-negotiable.

- **Output a real `.html` file the user opens in a browser — never inline-render in chat.** Every artifact this skill produces is a file on disk (`<topic>-<kind>.html`), not an HTML block embedded in the agent's chat surface (claude.ai artifact/canvas widgets, fenced ```html``` blocks, custom rendered iframes, etc.). Inline rendering strips features, themes unpredictably against the surrounding chat (often unreadable in dark mode), and lacks the stable origin and clipboard/network access the submit handler needs. Always write the file. The file itself must be self-contained: no build step, no external runtime, inline CSS and JS. Google Fonts via `<link>` is fine; otherwise nothing loaded from npm or a CDN unless this skill explicitly calls for it.
- **Mobile-responsive.** Collapse cleanly to a single column under ~700px so the artifact opens on a phone — including during incidents, commutes, and link-shares to non-laptop reviewers.
- **No `localStorage` / `sessionStorage` / `IndexedDB`.** Claude.ai artifacts can't use browser storage. State lives in JS memory; the export / copy button is the persistence layer.
- **Real semantic HTML, not screenshots.** Code goes in `<pre><code>` (selectable, copyable). Tabular data goes in `<table>`. Diagrams are inline `<svg>` with real `<g>` and `<path>` elements, not em