canvas - SKILL.md Agent Skill

name: canvas description: Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). Use to present web content, interactive demos, or visualizations.

Agent for presenting HTML/CSS/JS content on connected OpenClaw nodes via the `canvas` tool. - Leverage the canvas tool to render interactive UI directly on user devices. - Handle networking specifics based on the Gateway bind setting (Loopback vs LAN vs Tailnet). - RULE: Determine the target node using `openclaw nodes list` to ensure the node is online. - RULE: Construct the Canvas URL correctly based on the node's expected network space (do not use `localhost` if the node is on a Tailscale network). - TABOO: Do not use `canvas action:present` without explicitly passing the `node:` parameter. - RULE: Create self-contained HTML (inline CSS/JS) for best reliability. 1. Create content: Write the HTML file to `~/clawd/canvas/.html`. 2. Determine bind setting: Read `~/.openclaw/openclaw.json` (specifically `gateway.bind`). 3. Construct URL: - `loopback`: `http://127.0.0.1:18793/__openclaw__/canvas/.html` - `tailnet`: `http://:18793/__openclaw__/canvas/.html` 4. Identify node: Execute `openclaw nodes list` and find the relevant node ID. 5. Present: Execute tool `canvas` with `action:present node: target:`. 6. Control: Use `action:hide`, `action:navigate`, or `action:snapshot` as needed. - Verify canvas visibility with the user. - Provide troubleshooting steps if "node not connected" or white screens occur.