thinking-canvas
A live, browser-based HTML/SVG canvas for visualizing thinking as it happens. Write a file, run one command, browser reloads. No ceremony, no templates — pick the visual form that serves the thinking.
When to Use
Activate when any of these apply:
- User asks to visualize, draw, sketch, diagram, compare, or map something
- Mid-design or mid-architecture conversation is becoming abstract
- You judge that showing beats describing at this moment
- A decision point in another skill would clarify with a visual
No permission from another skill needed. No "which diagram type?" — pick and render. User corrects in plain text.
Infrastructure
Zero npm dependencies. Pure Node built-ins.
node <skill-path>/scripts/canvas.cjs render --topic "<short-topic>"
What it does (idempotent):
- Computes
TOPIC_DIR = $(pwd)/docs/brainstorm/<slug> and creates it
- Starts a detached background server if none is running (random free port, lockfile)
- If server exists: reuses it, broadcasts reload to all open browsers
- Prints JSON:
{"url":"http://localhost:NNNNN","port":NNNNN,"topic_dir":"/abs/path"}
Server exits automatically after 30 minutes idle. No stop command needed.
Render Workflow
Each turn that needs a canvas update:
- Check Node — verify
node is available (node --version); if not, tell the user and stop
- Read context — scan current directory for
theme.ts, colors.css, _variables.scss, or any brand tokens. If found, lift exact hex/px values into the HTML. If none exist, use references/design-system.md defaults.
- Decide — choose the visual form: mindmap / dependency graph / decision tree / flowchart / state machine / sequence diagram / architecture stack / bento grid / comparison matrix / timeline / custom. When in doubt: show both a static overview and an animated highlight of the key insight.
- Write — overwrite
$TOPIC_DIR/visual.html with the complete HTML document (self-contained, inline CSS/JS, CDN fonts in <head>)
- Render —
node <skill-path>/scripts/canvas.cjs render --topic <topic>
- Tell — on first render: give the URL + what visual form you chose; on subsequent: describe only what changed
HTML must be self-contained. Inline all CSS (<style>) and JS (<script>). Load fonts or CDN libs in <head>. The disk file is the shareable artifact — the server injects the live-reload script at serve time, never on disk.
Visual Form
Pick the form that serves the thinking. There is no fixed list of supported types.
Common forms: mindmap, dependency graph, decision tree, flowchart, state machine, sequence diagram, architecture stack, bento grid, comparison matrix, UI mockup split, timeline, custom-invented form.
When animation would help: read references/svg-animations.md for SVG/CSS/SMIL techniques — path drawing, stagger, morphing, motion paths, gradient shifts, breathing effects.
Design
Read references/design-system.md before generating HTML. These rules are non-negotiable — not suggestions.
Quick reference (full rules in the file):
- Font:
Satoshi, Cabinet Grotesk, or Geist via CDN. Never Inter.
- Color: Max 1 accent. Saturation < 80%. Never
#000000. Never AI-purple/neon gradients.
- Layout: Asymmetric over centered. Min
2rem container padding. No 3-equal-card rows.
- Motion: Animate
transform and opacity only. Always include prefers-reduced-motion guard.
- No emoji anywhere in rendered content.
Polish tier: rapid iteration → clarity over beauty. Share-ready → full design-system.md pass.
Boundaries
- Render SVG/HTML directly — do not wrap Mermaid
- Always overwrite
visual.html — never create visual-1.html, visual-2.html
- Do not write the live-reload
<script> into the disk file
- Do not ask the user which diagram type — decide and render
- Do not couple to brainstorming, idea-refine, or any other skill's runtime
- Do not implement annotation storage, real-time collaboration, or version snapshots
1---2name: thinking-canvas3description: Use when the user needs to visualize in-flight thinking — design exploration, architecture sketching, comparing approaches, mapping concepts, or any moment when showing beats describing. Creates a live, browser-based HTML/SVG canvas with instant reload. Trigger when the user says "draw", "visualize", "show me", "diagram", "canvas", "sketch", "compare visually", "画", "可视化", "图", "流程图", "架构图", "思维导图", or when a conversation grows abstract and a visual would unblock it. Also trigger proactively when brainstorming, idea-refine, or planning reaches a decision point that a visual would clarify.4---56# thinking-canvas78A live, browser-based HTML/SVG canvas for visualizing thinking as it happens. Write a file, run one command, browser reloads. No ceremony, no templates — pick the visual form that serves the thinking.910## When to Use1112Activate when any of these apply:1314- User asks to visualize, draw, sketch, diagram, compare, or map something15- Mid-design or mid-architecture conversation is becoming abstract16- You judge that *showing* beats describing at this moment17- A decision point in another skill would clarify with a visual1819No permission from another skill needed. No "which diagram type?" — pick and render. User corrects in plain text.2021## Infrastructure2223Zero npm dependencies. Pure Node built-ins.2425```bash26node <skill-path>/scripts/canvas.cjs render --topic "<short-topic>"27```2829What it does (idempotent):30311. Computes `TOPIC_DIR = $(pwd)/docs/brainstorm/<slug>` and creates it322. Starts a detached background server if none is running (random free port, lockfile)333. If server exists: reuses it, broadcasts reload to all open browsers344. Prints JSON: `{"url":"http://localhost:NNNNN","port":NNNNN,"topic_dir":"/abs/path"}`3536Server exits automatically after 30 minutes idle. No stop command needed.3738## Render Workflow3940Each turn that needs a canvas update:41421. **Check Node** — verify `node` is available (`node --version`); if not, tell the user and stop432. **Read context** — scan current directory for `theme.ts`, `colors.css`, `_variables.scss`, or any brand tokens. If found, lift exact hex/px values into the HTML. If none exist, use `references/design-system.md` defaults.443. **Decide** — choose the visual form: mindmap / dependency graph / decision tree / flowchart / state machine / sequence diagram / architecture stack / bento grid / comparison matrix / timeline / custom. When in doubt: show both a static overview *and* an animated highlight of the key insight.454. **Write** — overwrite `$TOPIC_DIR/visual.html` with the complete HTML document (self-contained, inline CSS/JS, CDN fonts in `<head>`)465. **Render** — `node <skill-path>/scripts/canvas.cjs render --topic <topic>`476. **Tell** — on first render: give the URL + what visual form you chose; on subsequent: describe only what changed4849**HTML must be self-contained.** Inline all CSS (`<style>`) and JS (`<script>`). Load fonts or CDN libs in `<head>`. The disk file is the shareable artifact — the server injects the live-reload script at serve time, never on disk.5051## Visual Form5253Pick the form that serves the thinking. There is no fixed list of supported types.5455Common forms: mindmap, dependency graph, decision tree, flowchart, state machine, sequence diagram, architecture stack, bento grid, comparison matrix, UI mockup split, timeline, custom-invented form.5657When animation would help: read `references/svg-animations.md` for SVG/CSS/SMIL techniques — path drawing, stagger, morphing, motion paths, gradient shifts, breathing effects.5859## Design6061Read `references/design-system.md` before generating HTML. These rules are non-negotiable — not suggestions.6263Quick reference (full rules in the file):6465- **Font:** `Satoshi`, `Cabinet Grotesk`, or `Geist` via CDN. **Never `Inter`.**66- **Color:** Max 1 accent. Saturation < 80%. Never `#000000`. Never AI-purple/neon gradients.67- **Layout:** Asymmetric over centered. Min `2rem` container padding. No 3-equal-card rows.68- **Motion:** Animate `transform` and `opacity` only. Always include `prefers-reduced-motion` guard.69- **No emoji** anywhere in rendered content.7071Polish tier: rapid iteration → clarity over beauty. Share-ready → full `design-system.md` pass.7273## Boundaries7475- Render SVG/HTML directly — do not wrap Mermaid76- Always overwrite `visual.html` — never create `visual-1.html`, `visual-2.html`77- Do not write the live-reload `<script>` into the disk file78- Do not ask the user which diagram type — decide and render79- Do not couple to brainstorming, idea-refine, or any other skill's runtime80- Do not implement annotation storage, real-time collaboration, or version snapshots
geekjourneyx