MCP HubMCP Hub
スキル一覧に戻る

clawdis-canvas

steipete
更新日 Yesterday
98 閲覧
468
45
468
GitHubで表示
デザインdesign

について

このスキルは、開発者がCLI経由でClawdis Canvasパネルをプログラム制御し、HTML/JSインターフェースやA2UIサーフェスを表示できるようにします。主な機能には、コンテンツのレンダリング、JavaScriptの評価、スナップショットの取得、アクションブリッジを備えたゲートウェイホスト型A2UIアプリケーションの管理が含まれます。Clawdis環境内でのUIテスト、視覚化、インタラクションワークフローの自動化にご利用ください。

クイックインストール

Claude Code

推奨
プラグインコマンド推奨
/plugin add https://github.com/steipete/clawdis
Git クローン代替
git 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/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 リポジトリ

steipete/clawdis
パス: skills/clawdis-canvas
relaywhatsapp

関連スキル

content-collections

メタ

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.

スキルを見る

creating-opencode-plugins

メタ

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.

スキルを見る

polymarket

メタ

This skill enables developers to build applications with the Polymarket prediction markets platform, including API integration for trading and market data. It also provides real-time data streaming via WebSocket to monitor live trades and market activity. Use it for implementing trading strategies or creating tools that process live market updates.

スキルを見る

cloudflare-turnstile

メタ

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.

スキルを見る