Agent skill

Canvas Display

Shows HTML content such as games, dashboards, visualizations and demos on a connected Brigade node's canvas, using a local canvas host server and a node bridge.

MITAuto-check passedFrontend & Design

Install Canvas Display

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI

$ gh skill install spinabot/brigade canvas --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/canvas .claude/skills/canvas && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Paste into Claude Code

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .claude/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/spinabot/brigade/tree/main/skills/canvas

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install spinabot/brigade canvas --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .agents/skills && cp -r skills-src/skills/canvas .agents/skills/canvas && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .agents/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install spinabot/brigade canvas --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/skills/canvas .cursor/skills/canvas && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .cursor/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/spinabot/brigade.git --path skills/canvas

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install spinabot/brigade canvas --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/skills/canvas .gemini/skills/canvas && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .gemini/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install spinabot/brigade canvas

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .github/skills && cp -r skills-src/skills/canvas .github/skills/canvas && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .github/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add spinabot/brigade --skill canvas -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install spinabot/brigade canvas --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/spinabot/brigade.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/skills/canvas .opencode/skills/canvas && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "canvas" agent skill from https://github.com/spinabot/brigade/tree/main/skills/canvas into .opencode/skills/canvas/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "canvas", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: canvas
GitHub stars: 11k
Token cost: ~1.4k tokens
SKILL.md length: 452 words
Files: 1
Skills in repo: 11
Repo updated: Oct 3, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Shows HTML content such as games, dashboards, visualizations and demos on a connected Brigade node's canvas, using a local canvas host server and a node bridge.

Works in 5 steps: Create HTML content → Find your canvas host URL → Find connected nodes → …
Showing a generated HTML dashboard or visualization on a connected device screen
SKILL.md covers Overview, How It Works, Actions and Configuration, plus 4 more sections
Calls jq and curl; reaches peters-mac-studio-1.sheep-coho.ts.net

What it does

With the canvas tool, the agent presents web content on the canvas view of connected Brigade nodes (the Mac app, iOS and Android). A canvas host server serves static HTML, CSS and JavaScript from the configured root directory, a node bridge passes canvas URLs to the nodes, and the node apps render the page in a WebView. The actions are present, hide, navigate, eval for running JavaScript, and snapshot for a screenshot.

Network binding matters. The host binds according to the gateway.bind setting (loopback, lan, tailnet or auto), and when it is bound to a Tailscale interface the nodes receive the Tailscale hostname, which is why localhost URLs fail. Settings live in the Brigade config file, and live reload, on by default, watches the root directory and injects a WebSocket client so connected canvases refresh when files change.

When your agent uses it

Showing a generated HTML dashboard or visualization on a connected device screen
Presenting an interactive demo or small game on a node's canvas
Debugging why a canvas URL does not load on a phone using Tailscale or LAN

Example prompts

“Build a small HTML dashboard of today's tasks and show it on my phone's canvas.”
“Present the snake game I just generated on the connected Mac app.”
“The canvas shows nothing on my iPhone. Check the bind mode and the URL it received.”

Requirements

A Brigade setup with a connected node app on Mac, iOS or Android

Workflow steps

5 steps, taken from the step headings in SKILL.md.

Create HTML content
Find your canvas host URL
Find connected nodes
Present content
Navigate, snapshot, or hide

What it can do on your machine

Read from SKILL.md and the folder at commit 4c2a18f. It shows what the files ask for, not the result of running them.

Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Shell commands in SKILL.md call:
- jq
- curl
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- peters-mac-studio-1.sheep-coho.ts.net
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Canvas Display loads about 1.4k tokens when it runs. Until then it costs about 56 tokens; SKILL.md has 452 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~56
When it runs · the whole SKILL.md, loaded when a task matches: ~1.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from spinabot/brigade at commit 4c2a18f, republished under its MIT licence (© spinabot). 452 words, ~1,425 tokens.

Download SKILL.mdSave it as .claude/skills/canvas/SKILL.md (or your agent's skills folder).

name: canvas
description: Display HTML content — games, visualizations, dashboards, generated HTML, interactive demos — on a connected canvas-capable display surface. Use when you need to present visual or interactive web content on a screen.

Canvas Skill

Display HTML content on connected Brigade nodes (Mac app, iOS, Android).

Overview

The canvas tool lets you present web content on any connected node's canvas view. Great for:

Displaying games, visualizations, dashboards
Showing generated HTML content
Interactive demos

How It Works

Architecture

┌─────────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Canvas Host    │────▶│   Node Bridge    │────▶│  Node App   │
│  (HTTP Server)  │     │  (TCP Server)    │     │ (Mac/iOS/   │
│  Port 18793     │     │  Port 18790      │     │  Android)   │
└─────────────────┘     └──────────────────┘     └─────────────┘

Canvas Host Server: Serves static HTML/CSS/JS files from canvasHost.root directory
Node Bridge: Communicates canvas URLs to connected nodes
Node Apps: Render the content in a WebView

Tailscale Integration

The canvas host server binds based on gateway.bind setting:

Bind Mode	Server Binds To	Canvas URL Uses
`loopback`	127.0.0.1	localhost (local only)
`lan`	LAN interface	LAN IP address
`tailnet`	Tailscale interface	Tailscale hostname
`auto`	Best available	Tailscale > LAN > loopback

Key insight: The canvasHostHostForBridge is derived from bridgeHost. When bound to Tailscale, nodes receive URLs like:

http://<tailscale-hostname>:18793/__brigade__/canvas/<file>.html

This is why localhost URLs don't work - the node receives the Tailscale hostname from the bridge!

Actions

Action	Description
`present`	Show canvas with optional target URL
`hide`	Hide the canvas
`navigate`	Navigate to a new URL
`eval`	Execute JavaScript in the canvas
`snapshot`	Capture screenshot of canvas

Configuration

In the active Brigade config file ($BRIGADE_CONFIG_PATH, default ~/.brigade/brigade.json):

json

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/brigade/canvas",
    "liveReload": true
  },
  "gateway": {
    "bind": "auto"
  }
}

Live Reload

When liveReload: true (default), the canvas host:

Watches the root directory for changes (via chokidar)
Injects a WebSocket client into HTML files
Automatically reloads connected canvases when files change

Great for development!

Workflow

1. Create HTML content

Place files in the canvas root directory (default ~/brigade/canvas/):

bash

cat > ~/brigade/canvas/my-game.html << 'HTML'
<!DOCTYPE html>
<html>
<head><title>My Game</title></head>
<body>
  <h1>Hello Canvas!</h1>
</body>
</html>
HTML

2. Find your canvas host URL

Check how your gateway is bound:

bash

CONFIG_PATH="${BRIGADE_CONFIG_PATH:-${BRIGADE_STATE_DIR:-$HOME/.brigade}/brigade.json}"
cat "$CONFIG_PATH" | jq '.gateway.bind'

Then construct the URL:

loopback: http://127.0.0.1:18793/__brigade__/canvas/<file>.html
lan/tailnet/auto: http://<hostname>:18793/__brigade__/canvas/<file>.html

Find your Tailscale hostname:

bash

tailscale status --json | jq -r '.Self.DNSName' | sed 's/\.$//'

3. Find connected nodes

bash

brigade nodes list

Look for Mac/iOS/Android nodes with canvas capability.

Show full SKILL.md (182 more words)Show less

4. Present content

canvas action:present node:<node-id> target:<full-url>

Example:

canvas action:present node:mac-63599bc4-b54d-4392-9048-b97abd58343a target:http://peters-mac-studio-1.sheep-coho.ts.net:18793/__brigade__/canvas/snake.html

5. Navigate, snapshot, or hide

canvas action:navigate node:<node-id> url:<new-url>
canvas action:snapshot node:<node-id>
canvas action:hide node:<node-id>

Debugging

White screen / content not loading

Cause: URL mismatch between server bind and node expectation.

Debug steps:

Check server bind: CONFIG_PATH="${BRIGADE_CONFIG_PATH:-${BRIGADE_STATE_DIR:-$HOME/.brigade}/brigade.json}"; cat "$CONFIG_PATH" | jq '.gateway.bind'
Check what port canvas is on: lsof -i :18793
Test URL directly: curl http://<hostname>:18793/__brigade__/canvas/<file>.html

Solution: Use the full hostname matching your bind mode, not localhost.

"node required" error

Always specify node:<node-id> parameter.

"node not connected" error

Node is offline. Use brigade nodes list to find online nodes.

Content not updating

If live reload isn't working:

Check liveReload: true in config
Ensure file is in the canvas root directory
Check for watcher errors in logs

URL Path Structure

The canvas host serves from /__brigade__/canvas/ prefix:

http://<host>:18793/__brigade__/canvas/index.html  → ~/brigade/canvas/index.html
http://<host>:18793/__brigade__/canvas/games/snake.html → ~/brigade/canvas/games/snake.html

The /__brigade__/canvas/ prefix is defined by CANVAS_HOST_PATH constant.

Tips

Keep HTML self-contained (inline CSS/JS) for best results
Use the default index.html as a test page (has bridge diagnostics)
The canvas persists until you hide it or navigate away
Live reload makes development fast - just save and it updates!
A2UI JSON push is WIP - use HTML files for now

Files

Just SKILL.md in skills/canvas of spinabot/brigade.

Open the folder on GitHubat commit 4c2a18f

Compare with similar skills

Canvas Display next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Canvas Display compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Canvas Display this skillspinabot/brigade	11k	—	~1.4k	Automated safety check: Pass	MIT	5 days ago
Web Artifacts Builderanthropics/skills	180k	41 repos	~769	Automated safety check: Pass	Apache-2.0	3 days ago
LobeHub Interactive Prototypelobehub/lobehub	83k	—	~1.6k	Automated safety check: Pass	Custom licence	today
Paperclip Pagepaperclipai/paperclip	99k	—	~1k	Automated safety check: Pass	MIT	today
Openkb Deck NeonVectifyAI/OpenKB	4.7k	1 repos	~4.3k	Automated safety check: Pass	Apache-2.0	2 mo ago
Artifact Designerlatitude-dev/latitude-llm	4.7k	—	~1.1k	Automated safety check: Pass	MIT	yesterday

Similar skills

Web Artifacts Builder
anthropics/skills
Official
Builds multi-component claude.ai HTML artifacts as a small React, TypeScript and Tailwind project, then bundles it into one shareable HTML file.
180k GitHub starsUsed in 41 repos~769 tokens
Frontend & DesignAuto-check passed
LobeHub Interactive Prototype
lobehub/lobehub
Builds single-file interactive HTML prototypes rendered with the real LobeHub UI components and written as production-style React, so they can later be split into files.
83k GitHub stars~1.6k tokensUpdated today
Frontend & DesignAuto-check passed
Paperclip Page
paperclipai/paperclip
Publish static HTML pages and asset folders to the Paperclip S3/CloudFront page host.
99k GitHub stars~1k tokensUpdated today
Frontend & DesignAuto-check passed
Openkb Deck Neon
VectifyAI/OpenKB
A skill your agent uses when the user asks the openkb chat to make a deck / slide presentation / PPT / slides / 演示稿 / 幻灯片 from their compiled KB content AND wants a dark, high-tech, neon / glow /…
4.7k GitHub starsUsed in 1 repo~4.3k tokens
Frontend & DesignAuto-check passed
Artifact Designer
latitude-dev/latitude-llm
Create, validate, preview, and publish self-contained HTML artifacts.
4.7k GitHub stars~1.1k tokensUpdated yesterday
Frontend & DesignAuto-check passed
Webhome Homepage Builder
webhtv/webhtv
Build, review, debug, reverse-engineer data sources for, and package FongMi/WebHome custom homepage single-file HTML.
1.7k GitHub stars~3.8k tokensUpdated today
Frontend & DesignAuto-check passed

Questions about Canvas Display

What does Canvas Display do?

Shows HTML content such as games, dashboards, visualizations and demos on a connected Brigade node's canvas, using a local canvas host server and a node bridge. With the canvas tool, the agent presents web content on the canvas view of connected Brigade nodes (the Mac app, iOS and Android). A canvas host server serves static HTML, CSS and JavaScript from the configured root directory, a node bridge passes canvas URLs to the nodes, and the node apps render the page in a WebView.

When should I use Canvas Display?

Canvas Display fits situations like: showing a generated HTML dashboard or visualization on a connected device screen; presenting an interactive demo or small game on a node's canvas; debugging why a canvas URL does not load on a phone using Tailscale or LAN.

How do I install Canvas Display in Claude Code?

Run `npx skills add spinabot/brigade --skill canvas -a claude-code`. Or copy the skill folder (skills/canvas in spinabot/brigade) into .claude/skills/canvas in your project. Claude Code loads it when a task matches its description.

How do I install Canvas Display in Codex?

Run `npx skills add spinabot/brigade --skill canvas -a codex`. Or copy the skill folder (skills/canvas in spinabot/brigade) into .agents/skills/canvas in your project. Codex loads it when a task matches its description.

Can I use Canvas Display in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add spinabot/brigade --skill canvas -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canvas, .gemini/skills/canvas, .github/skills/canvas and .opencode/skills/canvas in your project.

What does Canvas Display need to run?

Going by SKILL.md and its folder, Canvas Display needs the command-line tools its instructions call (jq and curl). Our summary lists: A Brigade setup with a connected node app on Mac, iOS or Android.

Does Canvas Display access the network?

SKILL.md names 1 domain. In commands or code: peters-mac-studio-1.sheep-coho.ts.net; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Canvas Display safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Canvas Display use?

Canvas Display is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Canvas Display use?

About 1.4k tokens (SKILL.md is roughly 5.7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Canvas Display?

Skills that share tags, products or a category with Canvas Display: Web Artifacts Builder (anthropics/skills, 180k stars), LobeHub Interactive Prototype (lobehub/lobehub, 83k stars), Paperclip Page (paperclipai/paperclip, 99k stars) and Openkb Deck Neon (VectifyAI/OpenKB, 4.7k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canvas Display?

spinabot (a GitHub organization) maintains it in spinabot/brigade, which has 11,284 GitHub stars. The repository holds 11 skills in this directory. The repository was last updated on October 3, 2026.

Source: spinabot/brigade on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Canvas Display

Facts

At a glance

What it does

When your agent uses it

Example prompts

Requirements

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Canvas Skill

Overview

How It Works

Architecture

Tailscale Integration

Actions

Configuration

Live Reload

Workflow

1. Create HTML content

2. Find your canvas host URL

3. Find connected nodes

4. Present content

5. Navigate, snapshot, or hide

Debugging

White screen / content not loading

"node required" error

"node not connected" error

Content not updating

URL Path Structure

Tips

Files

Compare with similar skills

Similar skills

More from spinabot/brigade

Related

Questions about Canvas Display