Skip to content
Get packs

Canvas Display

Show generated HTML, games or dashboards on a connected Brigade node's screen

Source Download skill
Repository
spinabot/brigade
Stars
11,367
Licence
MIT
Files
1 file

What it does

This skill teaches the agent to write HTML pages into a folder served by a local Brigade canvas host, then push those pages to a connected Mac, iOS or Android app so they appear on that device's screen. The agent can also navigate the view, run JavaScript in it, take a screenshot, or hide it. Live reload refreshes open pages whenever the files change.

Great for

  • Developers who run Brigade and want the agent to show dashboards, visualizations or prototypes on a second screen
  • People building interactive HTML demos who want quick preview on a Mac, phone or tablet they own
  • Users who already have Tailscale or a LAN set up for their Brigade nodes

Skip it if

  • Users without a Brigade gateway and connected nodes, since the skill does nothing without them
  • Sensitive or private data shown on a shared screen, because pages are served over the network and the canvas can run arbitrary JavaScript via eval
  • Anyone expecting a general web browser; it only displays files placed in the canvas root or URLs you give it

Try asking

  • “Make a small snake game in HTML and show it on my Mac node”
  • “Build a dashboard of this week's sales numbers as a single HTML page and present it on my iPhone”
  • “Take a snapshot of the canvas on my Android node so I can see what is shown”
  • “Hide the canvas on my Mac node when I am done”
Step-by-step guide: how to use Canvas DisplayInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 1 original files, the MIT licence and an attribution note.

    canvas.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip canvas.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip canvas.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Keep each HTML file self-contained with inline CSS and JavaScript so it loads reliably in the node WebView
  • Use the bundled index.html as a test page to check bridge diagnostics before showing your own content
  • Use the full hostname that matches your gateway bind mode rather than localhost, or nodes will show a white screen

What's inside

  • SKILL.md

Redistributed unmodified from spinabot/brigade under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.