clawdis-canvas
关于
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.
快速安装
Claude Code
推荐/plugin add https://github.com/steipete/clawdisgit clone https://github.com/steipete/clawdis.git ~/.claude/skills/clawdis-canvas在 Claude Code 中复制并粘贴此命令以安装该技能
技能文档
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 仓库
相关推荐技能
content-collections
元Content Collections 是一个 TypeScript 优先的构建工具,可将本地 Markdown/MDX 文件转换为类型安全的数据集合。它专为构建博客、文档站和内容密集型 Vite+React 应用而设计,提供基于 Zod 的自动模式验证。该工具涵盖从 Vite 插件配置、MDX 编译到生产环境部署的完整工作流。
creating-opencode-plugins
元该Skill为开发者创建OpenCode插件提供指导,涵盖命令、文件、LSP等25+种事件类型。它详细说明了插件结构、事件API规范及JavaScript/TypeScript实现模式,帮助开发者构建事件驱动的模块。适用于需要拦截操作、扩展功能或自定义AI助手行为的插件开发场景。
langchain
元LangChain是一个用于构建LLM应用程序的框架,支持智能体、链和RAG应用开发。它提供多模型提供商支持、500+工具集成、记忆管理和向量检索等核心功能。开发者可用它快速构建聊天机器人、问答系统和自主代理,适用于从原型验证到生产部署的全流程。
Algorithmic Art Generation
元这个Claude Skill帮助开发者使用p5.js创建算法艺术,特别适用于生成式艺术和交互式可视化项目。它支持种子随机性、流场和粒子系统等关键技术,确保艺术作品的重复性和独特性。当讨论生成艺术、算法艺术或计算美学时,该技能会自动激活,指导开发者完成从概念设计到技术实现的全过程。
