| name | canvas |
| description | Show things visually using Canvas. Use when the human says "put this on the canvas," "show me a visual," "make a slide," or "visualize this." Canvas creates an HTML file and opens it as a borderless app window. |
Skill: Canvas
Canvas is how BlueBridge shows things visually. When the human says "put this on the canvas," "show me a visual," "make a slide," or "visualize this," Canvas is the tool.
Canvas creates an HTML file and opens it as a borderless app window -- no browser toolbar, no address bar. It looks like a native app.
When to Use Canvas
Use canvas when the human needs to:
- See data, not just read it (charts, tables, comparisons)
- Share something with their team (a brief, a summary, a one-pager)
- Think visually (a layout, a framework, a decision map)
- Present something without opening PowerPoint
Do NOT use canvas for:
- Quick text answers (just reply in chat)
- Drafts that need editing (save to vault instead, open canvas when it is done)
The Workflow
- Human says something like: "put the org chart on the canvas" or "make me a visual summary of this"
- You generate the HTML file, save it to
$env:USERPROFILE\OneDrive - Microsoft\Workbench\outputs\canvas\YYYY-MM-DD-topic.html
- Open it:
Start-Process "msedge.exe" -ArgumentList "--app=file:///$($env:USERPROFILE -replace "\\","/")/ OneDrive%20-%20Microsoft/Workbench/outputs/canvas/YYYY-MM-DD-topic.html", "--window-size=1400,900"
- You tell the human: "Canvas is open." Give the file path if they want to share it.
If the human says "can you update the canvas" or "change that heading" -- edit the HTML file and reopen. The old window will need to be closed first.
File Naming
Canvas files live in $env:USERPROFILE\OneDrive - Microsoft\Workbench\outputs\canvas\. Name them clearly:
2026-02-24-q2-priorities.html
2026-02-24-team-skills-map.html
2026-02-24-meeting-brief-sarah.html
Date prefix first so they sort by recency. Topic second, hyphen-separated, lowercase.
HTML Design Standards
Every canvas follows these rules:
Light theme (default):
body { background: #F1F5F9; color: #1E293B; font-family: system-ui, sans-serif; }
.card { background: #FFFFFF; border-radius: 12px; padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
Dark theme (when human prefers or for presentations):
body { background: #1A1D23; color: #E2E8F0; }
.card { background: #252A34; }
Always include:
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">- Readable at 1400x900 without scrolling (for single-screen visuals)
- No em dashes anywhere in the HTML content
- Real content only. No Lorem ipsum placeholders.
Offer a preview summary in chat before opening: "I'm about to show you a two-column layout with your Q2 priorities on the left and blockers on the right. Opening canvas..."
Example Natural Language Triggers
| The human says | What you do |
|---|
| "Put this on the canvas" | Generate HTML for the current topic, open in canvas |
| "Make me a one-pager on this" | Design a single-page canvas document |
| "Show me a visual" | Choose the right chart or layout, generate, open |
| "I want to present this" | Ask: dark or light theme? Then build and open |
| "Can you make a slide?" | Canvas is the slide equivalent. Build and open. |
| "Open the canvas" | Open the most recent canvas file from the user's canvas output folder |
What Canvas Cannot Do
- Print directly (tell the human to use Ctrl+P from the open canvas window)
- Save as PowerPoint (it is HTML; suggest they screenshot sections if needed)
Canvas files live on OneDrive and sync automatically. The human can share them from any device or send the link directly.
