clawdis-canvas
About
This skill enables developers to programmatically control the Clawdis Canvas panel via CLI for presenting HTML/JS interfaces and A2UI surfaces. Key capabilities include rendering content, evaluating JavaScript, capturing snapshots, and managing gateway-hosted A2UI applications with action bridging. Use it to automate UI testing, visualization, and interaction workflows within the Clawdis environment.
Quick Install
Claude Code
Recommended/plugin add https://github.com/steipete/clawdisgit clone https://github.com/steipete/clawdis.git ~/.claude/skills/clawdis-canvasCopy and paste this command in Claude Code to install this skill
Documentation
Clawdis Canvas
Use Canvas to render HTML/JS or A2UI surfaces and capture snapshots.
Core commands
- Present:
clawdis canvas present [--node <id>] [--target <path>] - Hide:
clawdis canvas hide - Eval JS:
clawdis canvas eval --js "..." - Snapshot:
clawdis canvas snapshot
A2UI
- Push JSONL:
clawdis canvas a2ui push --jsonl /path/to/file.jsonl - Reset:
clawdis canvas a2ui reset
Notes
- Keep HTML under
~/clawd/canvaswhen targeting remote nodes. - Use snapshot after renders to verify UI state.
- Treat A2UI as gateway-hosted at
http(s)://<gateway-host>:18789/__clawdis__/a2ui/. - Rely on
canvas a2ui push/resetto auto-navigate the Canvas to the gateway-hosted A2UI page. - Expect A2UI to fail if the Gateway does not advertise
canvasHostUrlor is unreachable:A2UI_HOST_NOT_CONFIGUREDA2UI_HOST_UNAVAILABLE
A2UI quick flow
- Ensure the Gateway is running and reachable from the node.
- Build JSONL with v0.8 server→client messages (
beginRendering,surfaceUpdate,dataModelUpdate,deleteSurface).- Do not use v0.9
createSurface(unsupported).
- Do not use v0.9
- Push JSONL and (optionally) snapshot the result.
Example JSONL (v0.8)
cat > /tmp/a2ui-v0.8.jsonl <<'EOF'
{"surfaceUpdate":{"surfaceId":"main","components":[{"id":"root","component":{"Column":{"children":{"explicitList":["title","content"]}}}},{"id":"title","component":{"Text":{"text":{"literalString":"A2UI (v0.8)"},"usageHint":"h1"}}},{"id":"content","component":{"Text":{"text":{"literalString":"If you can read this, A2UI is live."},"usageHint":"body"}}}]}}
{"beginRendering":{"surfaceId":"main","root":"root"}}
EOF
clawdis canvas a2ui push --jsonl /tmp/a2ui-v0.8.jsonl --node <id>
Action callbacks (A2UI → agent)
- A2UI user actions (buttons, etc.) are bridged from the WebView back to the node via
clawdisCanvasA2UIAction. - Handle them on the agent side as
CANVAS_A2UImessages (node → gateway → agent).
GitHub Repository
Related Skills
content-collections
MetaThis skill provides a production-tested setup for Content Collections, a TypeScript-first tool that transforms Markdown/MDX files into type-safe data collections with Zod validation. Use it when building blogs, documentation sites, or content-heavy Vite + React applications to ensure type safety and automatic content validation. It covers everything from Vite plugin configuration and MDX compilation to deployment optimization and schema validation.
creating-opencode-plugins
MetaThis skill provides the structure and API specifications for creating OpenCode plugins that hook into 25+ event types like commands, files, and LSP operations. It offers implementation patterns for JavaScript/TypeScript modules that intercept and extend the AI assistant's lifecycle. Use it when you need to build event-driven plugins for monitoring, custom handling, or extending OpenCode's capabilities.
langchain
MetaLangChain is a framework for building LLM applications using agents, chains, and RAG pipelines. It supports multiple LLM providers, offers 500+ integrations, and includes features like tool calling and memory management. Use it for rapid prototyping and deploying production systems like chatbots, autonomous agents, and question-answering services.
cloudflare-turnstile
MetaThis skill provides comprehensive guidance for implementing Cloudflare Turnstile as a CAPTCHA-alternative bot protection system. It covers integration for forms, login pages, API endpoints, and frameworks like React/Next.js/Hono, while handling invisible challenges that maintain user experience. Use it when migrating from reCAPTCHA, debugging error codes, or implementing token validation and E2E tests.
