Agent skill

Canvas

by Bitterbot-AI in Bitterbot-AI/bitterbot-desktop

Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server.

MITAuto-check passedDevelopment

Install Canvas

skills CLI

$ npx skills add Bitterbot-AI/bitterbot-desktop --skill canvas -a claude-code

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

GitHub CLI

$ gh skill install Bitterbot-AI/bitterbot-desktop 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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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/Bitterbot-AI/bitterbot-desktop/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 Bitterbot-AI/bitterbot-desktop --skill canvas -a codex

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

GitHub CLI

$ gh skill install Bitterbot-AI/bitterbot-desktop 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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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 Bitterbot-AI/bitterbot-desktop --skill canvas -a cursor

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

GitHub CLI

$ gh skill install Bitterbot-AI/bitterbot-desktop 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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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/Bitterbot-AI/bitterbot-desktop.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 Bitterbot-AI/bitterbot-desktop --skill canvas -a gemini-cli

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

GitHub CLI

$ gh skill install Bitterbot-AI/bitterbot-desktop 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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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 Bitterbot-AI/bitterbot-desktop 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 Bitterbot-AI/bitterbot-desktop --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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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 Bitterbot-AI/bitterbot-desktop --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 Bitterbot-AI/bitterbot-desktop 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/Bitterbot-AI/bitterbot-desktop.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/Bitterbot-AI/bitterbot-desktop/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: 2.5k
Token cost: ~1.4k tokens
SKILL.md length: 443 words
Files: 1
Skills in repo: 17
Repo updated: Oct 9, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server.

Works in 5 steps: Create HTML content → Find your canvas host URL → Find connected nodes → …
Presenting games
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

Canvas is an agent skill from Bitterbot-AI/bitterbot-desktop. Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server. Use when presenting games, visualizations, dashboards, or interactive demos on a connected device, navigating canvas URLs, capturing canvas snapshots, or debugging canvas connectivity.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. It is a single SKILL.md file with no bundled scripts.

It sits in Development, covering Debugging. It works with Android and iOS. The repository describes itself as: Bitterbot - a mesh of agents that turns shared experience into collective capability. The licence is MIT.

When your agent uses it

Presenting games
Interactive demos on a connected device
Navigating canvas URLs
Capturing canvas snapshots

Example prompts

“/canvas”

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 cd4562a. 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 loads about 1.4k tokens when it runs. Until then it costs about 75 tokens; SKILL.md has 443 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it: ~75
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 Bitterbot-AI/bitterbot-desktop at commit cd4562a, republished under its MIT licence (© Bitterbot-AI). 443 words, ~1,423 tokens.

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

name: canvas
description: Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server. Use when presenting games, visualizations, dashboards, or interactive demos on a connected device, navigating canvas URLs, capturing canvas snapshots, or debugging canvas connectivity.

Canvas

Display HTML content on connected Bitterbot 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/__bitterbot__/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 ~/.bitterbot/bitterbot.json:

json

{
  "canvasHost": {
    "enabled": true,
    "port": 18793,
    "root": "/Users/you/bitterbot/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 ~/bitterbot/canvas/):

bash

cat > ~/bitterbot/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

cat ~/.bitterbot/bitterbot.json | jq '.gateway.bind'

Then construct the URL:

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

Find your Tailscale hostname:

bash

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

3. Find connected nodes

bash

bitterbot nodes list

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

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/__bitterbot__/canvas/snake.html

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

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: cat ~/.bitterbot/bitterbot.json | jq '.gateway.bind'
Check what port canvas is on: lsof -i :18793
Test URL directly: curl http://<hostname>:18793/__bitterbot__/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 bitterbot 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 /__bitterbot__/canvas/ prefix:

http://<host>:18793/__bitterbot__/canvas/index.html  → ~/bitterbot/canvas/index.html
http://<host>:18793/__bitterbot__/canvas/games/snake.html → ~/bitterbot/canvas/games/snake.html

The /__bitterbot__/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 Bitterbot-AI/bitterbot-desktop.

Open the folder on GitHubat commit cd4562a

Compare with similar skills

Canvas 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 compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Canvas this skillBitterbot-AI/bitterbot-desktop	2.5k	—	~1.4k	Automated safety check: Pass	MIT	today
Dogfoodcallstackincubator/agent-skills	1.7k	1 repos	~1.7k	Automated safety check: Pass	MIT	yesterday
Grix Code Reviewaskie/grix	153	—	~799	Automated safety check: Pass	Custom licence	yesterday
AppsFlyer Unity Bridge DebuggingAppsFlyerSDK/appsflyer-unity-plugin	178	—	~492	Automated safety check: Pass	MIT	5 days ago
Try Fix Alternative Approachdotnet/maui	23k	—	~8.4k	Automated safety check: Pass	MIT	today
Mobile Debuggingjamditis/claude-skills-journalism	417	—	~5.2k	Automated safety check: Notes	MIT	5 days ago

Similar skills

Dogfood
callstackincubator/agent-skills
Official
Systematically explore and test a mobile app on iOS/Android with agent-device to find bugs, UX issues, and other problems.
1.7k GitHub starsUsed in 1 repo~1.7k tokens
DevelopmentAuto-check passed
Grix Code Review
askie/grix
Audit Grix diffs and pull requests for correctness, regressions, security, lifecycle safety, and cross-component contract consistency.
153 GitHub stars~799 tokensUpdated yesterday
DevelopmentAuto-check passed
AppsFlyer Unity Bridge Debugging
AppsFlyerSDK/appsflyer-unity-plugin
Traces a failing call or callback between C# and the native Android or iOS wrappers of the AppsFlyer Unity plugin to find the first broken link.
178 GitHub stars~492 tokensUpdated 5 days ago
DevelopmentAuto-check passed
Try Fix Alternative Approach
dotnet/maui
Official
Attempts one alternative fix for a bug, runs the given test command against it and reports what happened, always differing from existing PR fixes.
23k GitHub stars~8.4k tokensUpdated today
DevelopmentAuto-check passed
Mobile Debugging
jamditis/claude-skills-journalism
Remote JavaScript console and debugging on mobile. An agent skill from jamditis/claude-skills-journalism.
417 GitHub stars~5.2k tokensUpdated 5 days ago
DevelopmentAuto-check: notes
Sokol Net
elix22/Sokol.NET
Sokol.NET framework development — use for ANY work in this repo: creating or debugging examples, building/running for desktop/Android/iOS/Web, writing or compiling shaders, adding a new C/C++…
154 GitHub stars~2.8k tokensUpdated yesterday
Game DevelopmentAuto-check passed

Questions about Canvas

What does Canvas do?

Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server. Canvas is an agent skill from Bitterbot-AI/bitterbot-desktop. Display and control HTML content on connected Bitterbot nodes (Mac, iOS, Android) via the canvas host server.

When should I use Canvas?

Canvas fits situations like: presenting games; interactive demos on a connected device; navigating canvas URLs; capturing canvas snapshots.

How do I install Canvas in Claude Code?

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

How do I install Canvas in Codex?

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

Can I use Canvas 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 Bitterbot-AI/bitterbot-desktop --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 need to run?

Going by SKILL.md and its folder, Canvas needs the command-line tools its instructions call (jq and curl).

Does Canvas 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 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 use?

Canvas 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 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?

Skills that share tags, products or a category with Canvas: Dogfood (callstackincubator/agent-skills, 1.7k stars), Grix Code Review (askie/grix, 153 stars), AppsFlyer Unity Bridge Debugging (AppsFlyerSDK/appsflyer-unity-plugin, 178 stars) and Try Fix Alternative Approach (dotnet/maui, 23k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canvas?

Bitterbot-AI (a GitHub organization) maintains it in Bitterbot-AI/bitterbot-desktop, which has 2,467 GitHub stars. The repository holds 17 skills in this directory. The repository was last updated on October 9, 2026.

Source: Bitterbot-AI/bitterbot-desktop 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

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Canvas

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 Bitterbot-AI/bitterbot-desktop

Related

Questions about Canvas