Help us improve
Share bugs, ideas, or general feedback.
From html-skills
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".
npx claudepluginhub f-labs-io/agent-html-skills --plugin html-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/html-skills:html-mind-mapThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
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.
Creates and manages mind maps on ProcessOn: node operations, styling, themes, real-time collaboration, sharing, and export to PNG/SVG/PDF.
Generates Mermaid mindmap diagrams as 2-3 nonlinear outline options for article structures, knowledge domains, and idea mapping after brainstorming raw material.
Create shareable HTML visual artifacts from markdown, plans, architecture docs, brainstorms, and other structured content. Prefer browser-viewable HTML first when it will materially improve clarity or sharing; otherwise fall back to terminal rendering. Triggers: visualize, mindmap, mind map, show me the structure, draw a map, make this clear, make this visual.
Share bugs, ideas, or general feedback.
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.
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.
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.
.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.localStorage / sessionStorage / IndexedDB. Claude.ai artifacts can't use browser storage. State lives in JS memory; the export / copy button is the persistence layer.<pre><code> (selectable, copyable). Tabular data goes in <table>. Diagrams are inline <svg> with real <g> and <path> elements, not embedded PNGs. The reader should be able to copy any value, line, or label out of the artifact.textContent for text and document.createElement + appendChild for structure. Never set innerHTML from a string that includes a variable, user input, computed value, or imported data — it's an XSS vector and many agent harnesses (including Claude Code) block it via security hooks. Static literal markup inline in your script is fine.:root so the whole artifact can be re-skinned in one place — and so design decisions are visible, not buried in 40 inline declarations.Cmd/Ctrl+P should produce something usable: backgrounds that carry meaning print, content doesn't get clipped, dark themes have a sane print fallback.<topic>-<kind>.html) so multiple artifacts on one project compose into a readable folder, not a pile of output.html collisions.This skill produces an interactive artifact whose value is in what the user submits back. There are exactly two delivery modes:
| Mode | Setup | Use when |
|---|---|---|
| Server (default in local Claude Code) | Run /html-skills:listen once per session — it prints a per-session URL like http://127.0.0.1:<ephemeral-port>/. Inject window.__CLAUDE_SUBMIT_URL__ = '<that URL>' into each artifact. Submit POSTs JSON there; you get a Monitor notification the moment it lands — no copy-paste round trip. | You are in a local Claude Code session with shell access. This is almost always you when there's a real terminal. |
| Clipboard (fallback) | None. Inline submit-handler.js and call submitToClaude(payload). Submit copies JSON; user pastes back. | /html-skills:listen reported it can't run (cloud / web / sandboxed harness), or the harness has no Monitor-equivalent. Always works, but every submit costs the user a paste. |
One decision rule: before producing the first interactive artifact in a session, run /html-skills:listen. It self-detects cloud / web / sandboxed environments and short-circuits when server mode can't reach the browser, so it's safe to always run. If it reports active, inject window.__CLAUDE_SUBMIT_URL__ in every artifact you generate this session. If it short-circuited, drop to clipboard mode and don't retry. Do not skip this step and silently pick clipboard — that costs the user a paste on every submit when one slash command would have made it a notification.
Server mode automatically falls through to clipboard if the POST fails for any reason, so the user is never stuck.
Every interactive artifact must inline $CLAUDE_PLUGIN_ROOT/assets/submit-handler.js inside a <script> block, and wire its submit / export button to call submitToClaude(payload):
<button id="submit">Submit to Claude</button>
<script>
// …contents of $CLAUDE_PLUGIN_ROOT/assets/submit-handler.js pasted here…
</script>
<script>
// OPTIONAL — only set when in server mode. Absence = clipboard mode.
// window.__CLAUDE_SUBMIT_URL__ = 'http://127.0.0.1:<port-from-/html-skills:listen>/';
document.getElementById('submit').addEventListener('click', async () => {
await submitToClaude({
skill: 'html-<this-skill-name>',
kind: '<artifact-kind>', // e.g. "kanban-result", "mind-map-tree", "matrix-verdict"
data: collectStateAsPlainObject(),
version: 1,
});
});
</script>
Both modes carry the same JSON:
{
"skill": "html-mind-map",
"kind": "mind-map-tree",
"data": { /* skill-specific structure */ },
"version": 1
}
data is whatever the skill's existing export produces. The other fields are routing.
sendPrompt(), postMessage to the parent frame, magic global functions you saw work in some other context). The contract is two modes: POST to __CLAUDE_SUBMIT_URL__ if set, otherwise clipboard. The artifact lives at a file:// or localhost: origin and the chat surface isn't reachable from there. Don't guess at a third path — clipboard always works.submitToClaude(payload). The user clicks once, JSON copies, they paste back at the next chat turn — that's the whole flow..html file. See the foundation rule — always write the file.submitToClaude(payload), which copies the JSON envelope. If you want the user's eventual chat message to read like a prompt with context, generate that prompt server-side from the JSON envelope after they paste — don't fork the export into two affordances on the page. The user shouldn't have to choose which button does what.navigator.clipboard.writeText(...) directly from any button handler. The plugin exposes two helpers — submitToClaude for the structured submission and copyToClipboard(text, opts) for any other clipboard write (a "copy this URL" button, a "copy CSS" button, etc.). Both share the same async-API → execCommand → inline-banner fallback chain, so they never strand the user with "can't copy". Direct navigator.clipboard.writeText calls bypass the fallbacks and break in the same Safari file:// / iframe-Permissions-Policy contexts the helpers were built for./html-skills:listen and going straight to clipboard mode in a local Claude Code session. The user has to copy-paste every submit when one slash command would have made it a Monitor notification. Always run /html-skills:listen first; it self-detects when to short-circuit, so there's no "but what if I'm in the wrong environment" — running it is the right call regardless./html-skills:listen exists. Use the slash command in Claude Code; only use the manual recipe in non-Claude-Code harnesses./html-skills:stop when the task is done.Tree shape, root in the center, ideas radiate. New ideas added by clicking a parent + "+". Loose — branches don't need to be balanced. Color-coded by category if useful (e.g., features in blue, risks in red, questions in yellow).
Export: an indented outline, ready to paste back as a prompt.
For organizing a domain. Hierarchical tree, often with cross-links between distant nodes (a true graph, not a pure tree). Nodes have short titles; click to see longer description in a side panel. Useful for mapping an unfamiliar codebase, an API surface, or a topic.
Export: JSON tree, suitable for feeding to a documentation generator.
For "what could be causing X". Root is the symptom. Children are hypotheses. Each hypothesis has children for evidence (✓ supports, ✗ refutes), tests to run, and sub-hypotheses. Branches that get refuted are visually pruned but kept for record.
Export: a structured debugging journal with the surviving hypotheses + evidence.
For walking through a multi-step decision. Root is the question. Branches are options. Each option's children are sub-questions, consequences, or further options. Often used for runbook-style "if X, do Y" content.
Export: a flowchart-like markdown or an actual runbook outline.
For when relationships aren't strictly hierarchical (e.g., "this concept relates to that one in two different ways"). Nodes connect with labeled edges. Force-directed layout. Useful for showing systems of interacting ideas.
Export: an adjacency list or DOT graph.
Tab to add child, Enter to add sibling, Delete to remove (Workflowy-like)For tree-shaped maps:
For graph-shaped maps:
Pick a default and let the user toggle if it matters.
Avoid the corporate-mindmap aesthetic (rainbow gradients, clip art, MS Office vibes). Better defaults:
The map's purpose informs the style. Brainstorms benefit from a softer feel; debugging trees benefit from technical clarity.
The export is what makes the map useful beyond the session. Offer multiple shapes:
Indented outline (most universal):
- Caching strategies
- In-memory LRU
- + simple
- − doesn't survive restarts
- Redis
- + persistent
- − ops cost
JSON tree (for programmatic use):
{ "title": "Caching strategies", "children": [...] }
Natural-language prompt (for handing back to the agent):
Here's the map I built. The root is "caching strategies" with three approaches…
Help me brainstorm names for our new internal AI tool. Build me a mind map starting with three branches: "literal & functional", "evocative & poetic", "playful & weird". Pre-fill each branch with 3–4 starter names. Let me add more, color-mark favorites, and export the final list as a prompt I can hand back.
Output: HTML file with a radial mind map, three colored branches with 3–4 starter nodes each, drag-to-reposition, click-plus-to-add-child, double-click-to-edit, right-click for color/delete/favorite, and a Submit-to-Claude button.
Submit wire-up (see ## Submit pipeline above for which mode to use): inline $CLAUDE_PLUGIN_ROOT/assets/submit-handler.js, then call:
submitToClaude({
skill: 'html-mind-map',
kind: 'mind-map-tree',
data: {
root: 'naming the AI tool',
branches: [
{ label: 'literal & functional', color: 'blue', favorites: ['Tabby', 'Atlas'], all: [...] },
{ label: 'evocative & poetic', color: 'amber', favorites: ['Glimpse'], all: [...] },
{ label: 'playful & weird', color: 'green', favorites: [], all: [...] },
],
},
version: 1,
});