canvas

by v1.0.0

Present HTML on connected OpenClaw node canvases, navigate/eval/snapshot, and debug canvas host URLs.

What It Does

Presents web content on connected OpenClaw nodes (Mac, iOS, Android). It sets up a local HTTP server to serve HTML, CSS, and JavaScript files and communicates the URL to the connected nodes for rendering.

When To Use

Use this skill when you need to display web-based content on OpenClaw nodes, such as interactive dashboards, games, visualizations, or any other HTML-based interface. It's especially useful for demos and development due to the live reload feature.

Inputs

Requires HTML, CSS, and JavaScript files placed in the canvas root directory. Also requires a configured OpenClaw environment.

Outputs

Displays the HTML content on connected OpenClaw nodes (Mac, iOS, Android). Returns screenshots via the `snapshot` action.

Limitations

Requires nodes to be connected and have canvas capability. Localhost URLs may not work correctly depending on the gateway bind mode. A2UI JSON push is currently a work in progress.

Installation

Copy to ~/.claude/skills/

View Claude (Anthropic) documentation

Add to .cursor/skills/

View Cursor IDE documentation

Add to Cline skills directory

View Cline documentation

Add to .vscode/skills/

View VS Code documentation

What people say, and where to get help

No ratings yet. If you have used this skill, yours would be the first.

No reviews yet

This skill has not been rated. If you have run it, a short note about what you used it for helps the next person more than any description can.

Related Skills You May Like

Discover more AI agent skills in the same category to enhance your workflow automation.

Have a Skill to Share?

Join the community and help AI agents learn new capabilities. Submit your skill and reach thousands of developers.