Back to Skills

clawdis-canvas

steipete
Updated Today
87 views
468
45
468
View on GitHub
Designdesign

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 CommandRecommended
/plugin add https://github.com/steipete/clawdis
Git CloneAlternative
git clone https://github.com/steipete/clawdis.git ~/.claude/skills/clawdis-canvas

Copy 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/canvas when 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/reset to auto-navigate the Canvas to the gateway-hosted A2UI page.
  • Expect A2UI to fail if the Gateway does not advertise canvasHostUrl or is unreachable:
    • A2UI_HOST_NOT_CONFIGURED
    • A2UI_HOST_UNAVAILABLE

A2UI quick flow

  1. Ensure the Gateway is running and reachable from the node.
  2. Build JSONL with v0.8 server→client messages (beginRendering, surfaceUpdate, dataModelUpdate, deleteSurface).
    • Do not use v0.9 createSurface (unsupported).
  3. 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_A2UI messages (node → gateway → agent).

GitHub Repository

steipete/clawdis
Path: skills/clawdis-canvas
relaywhatsapp

Related Skills

content-collections

Meta

This 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.

View skill

creating-opencode-plugins

Meta

This 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.

View skill

langchain

Meta

LangChain 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.

View skill

cloudflare-turnstile

Meta

This 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.

View skill