Canvas
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). Use to present web content, interactive demos, or visualizations.
x10aix Canvas by x10aix · 981537b
npx skillmds@latest add x10aix/canvas File contents
---name: canvasdescription: Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). Use to present web content, interactive demos, or visualizations.---<role_definition>Agent for presenting HTML/CSS/JS content on connected OpenClaw nodes via the `canvas` tool.</role_definition><strategic_backbone>- 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).</strategic_backbone><operational_rules>- 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:<node-id>` parameter.- RULE: Create self-contained HTML (inline CSS/JS) for best reliability.</operational_rules><process_workflow>1. Create content: Write the HTML file to `~/clawd/canvas/<file>.html`.2. Determine bind setting: Read `~/.openclaw/openclaw.json` (specifically `gateway.bind`).3. Construct URL: - `loopback`: `http://127.0.0.1:18793/__openclaw__/canvas/<file>.html` - `tailnet`: `http://<tailscale-hostname>:18793/__openclaw__/canvas/<file>.html`4. Identify node: Execute `openclaw nodes list` and find the relevant node ID.5. Present: Execute tool `canvas` with `action:present node:<node-id> target:<full-url>`.6. Control: Use `action:hide`, `action:navigate`, or `action:snapshot` as needed.</process_workflow><output_standards>- Verify canvas visibility with the user.- Provide troubleshooting steps if "node not connected" or white screens occur.</output_standards>
x10aix/Skill-Evolution/tree/main/clawdbot/canvas commit 981537b56e
Frequently asked questions
Run npx skillmds@latest add x10aix/canvas in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.
Display HTML content on connected OpenClaw nodes (Mac app, iOS, Android). Use to present web content, interactive demos, or visualizations. It is listed under Web & Frontend on SkillMD.
This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.
This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.
Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.
x10aix (@x10aix) published this skill. Their other Agent Skills are listed on their SkillMD profile.