canvas-a2ui

The saved excerpt is a snapshot from review. The external source remains the complete and most current version.

---
name: canvas-a2ui
description: Agent-to-UI visual workspace with HTML5 Canvas manipulation. Create, draw, screenshot, and interact with visual content programmatically. Enables agents to generate diagrams, charts, visualizations, and interactive visual content with A2UI-style communication.
version: 1.0.0
author: PopeBot (inspired by OpenClaw A2UI)
tags: ["canvas", "visual", "a2ui", "drawing", "screenshot", "visualization"]
requires:
  bins: ["node"]
  env: []
---

# Canvas A2UI - Visual Workspace for Agents

A powerful visual workspace skill inspired by OpenClaw's Canvas/A2UI system. Enables PopeBot agents to create, manipulate, and capture visual content using HTML5 Canvas with a headless browser backend.

## Purpose

Use Canvas A2UI when you need to:
- **Generate diagrams** - Flowcharts, architecture diagrams, mind maps
- **Create visualizations** - Charts, graphs, data visualizations
- **Draw mockups** - UI wireframes, layout designs
- **Annotate images** - Add labels, arrows, highlights to screenshots
- **Interactive visuals** - Clickable areas, tooltips, animations
- **Visual reports** - Combine text, charts, and graphics
- **Educational content** - Step-by-step visual explanations

## Architecture

```
┌─────────────────────────────────────────────────────────────────┐
│                      Canvas A2UI System                          │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌──────────┐    ┌──────────┐    ┌──────────────────────────┐   │
│  │   Agent  │───>│   A2UI   │───>│   Headless Browser      │   │
│  │  Request │    │ Protocol │    │   (Puppeteer/Playwright) │   │
│  └──────────┘    └──────────┘    └─────────────┬────────────┘   │
│                                                 │                │
│                                                 ▼                │
│                           ┌──────────────────────────┐           │
│                           │     HTML5 Canvas        │            │
│                           │  ┌────────────────┐     │            │
│                           │  │  Drawing API   │     │            │
│                           │  │  • Shapes      │     │            │
│                           │  │  • Text        │     │            │
│                           │  │  • Images      │     │            │
│                           │  │  • Charts      │     │            │
│                           │  │  • Annotations │     │            │
│                           │  └────────────────┘     │            │
│                           │  ┌────────────────┐     │            │
│                           │  │  Screenshot   │     │            │
│                           │  │  Export (PNG)  │     │            │
│                           │  └────────────────┘     │            │
│                           └──────────────────────────┘           │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
```

## A2UI Protocol Commands

The Agent-to-UI protocol defines how agents communicate with the canvas:

| Command | Description | Example |
|---------|-------------|---------|
| `push` | Send drawing commands to canvas | Draw shapes, text, images |
| `reset` | Clear canvas to blank state | Start fresh |
| `eval` | Execute JavaScript on canvas | Custom drawing logic |
| `snapshot` | Capture canvas as PNG | Save/export result |
| `query` | Get canvas state info | Dimensions, layers |
| `config` | Set canvas properties | Size, background |

## Setup

```bash
cd /job/.pi/skills/canvas-a2ui
npm install
```

This installs Puppeteer for headless browser automation.

## Tools Added

### `canvas_create`

Create a new canvas instance with specified dimensions and configuration.

```javascript
canvas_create({
  name: "architecture-diagram",
  width: 1200,
  height: 800,
  backgroundColor: "#ffffff",
  deviceS