New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Canvas Webapp

by BlackBeltTechnology in BlackBeltTechnology/pi-agent-dashboard

Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe.

MITAuto-check passed

Install Canvas Webapp

skills CLI
$ npx skills add BlackBeltTechnology/pi-agent-dashboard --skill canvas-webapp -a claude-code

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

GitHub CLI
$ gh skill install BlackBeltTechnology/pi-agent-dashboard canvas-webapp --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/BlackBeltTechnology/pi-agent-dashboard.git skills-src && mkdir -p .claude/skills && cp -r skills-src/packages/extension/.pi/skills/canvas-webapp .claude/skills/canvas-webapp && 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/

Facts

Skill name
canvas-webapp
GitHub stars
315
Token cost
~1.4k tokens
SKILL.md length
487 words
Files
2
Skills in repo
66
Repo updated
First seen
Licence
MIT

At a glance

Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe.

  • Works in 6 steps: Do NOT point the canvas at a Vite DEV… → Produce a STATIC production build with a… → Verify the built index.html references… → …
  • A canvas(target:{kind:url|server}) target shows up blank white
  • SKILL.md covers When to Use, Procedure, Minimal CORS static server and Pitfalls, plus 1 more section
  • Calls npx, python3 and curl

What it does

Canvas Webapp is an agent skill from BlackBeltTechnology/pi-agent-dashboard. Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe. Use when a canvas(target:{kind:"url"|"server"}) target shows up blank white, an empty surface, or a /live/<id 500 ECONNREFUSED. Covers why Vite dev servers and non-CORS static servers fail there, and the static-build + CORS-server recipe that works.

Its SKILL.md is about 1.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `SKILL.md.AGENTS.md`).

It works with Vite and React. The repository describes itself as: Real-time web dashboard for pi coding-agent sessions. Multi-session view, live chat mirroring, integrated terminal, diff viewer, pi-flows execution, and mobile-first remote… The licence is MIT.

When your agent uses it

  • A canvas(target:{kind:url|server}) target shows up blank white
  • An empty surface
  • A /live/<id 500 ECONNREFUSED

Example prompts

  • “server”
  • “/canvas-webapp”

Requirements

  • Python 3
  • Node.js

Workflow steps

6 steps, taken from the first numbered list in SKILL.md.

  1. Do NOT point the canvas at a Vite DEV server. The dashboard proxies
  2. Produce a STATIC production build with a RELATIVE base: a vite config with
  3. Verify the built index.html references ./assets/... (relative). Copy
  4. **Serve the dist with a tiny node static server that sets
  5. Point the canvas: `canvas(target:{kind:'url',
  6. Self-verify by iframing your own harness before touching the canvas

What it can do on your machine

Read from SKILL.md and the folder at commit 86e8e4d. 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:

    • npx
    • python3
    • curl

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npx and curl, which can reach the network depending on how they are called.

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

Always · name and description, kept in context so the agent knows when to use it
~100
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 BlackBeltTechnology/pi-agent-dashboard at commit 86e8e4d, republished under its MIT licence (© BlackBeltTechnology). 487 words, ~1,378 tokens.

Download SKILL.mdSave it as .claude/skills/canvas-webapp/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
canvas-webapp
description
Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe. Use when a canvas(target:{kind:"url"|"server"}) target shows up blank white, an empty surface, or a /live/<id> 500 ECONNREFUSED. Covers why Vite dev servers and non-CORS static servers fail there, and the static-build + CORS-server recipe that works.
license
MIT

canvas-webapp — show a web app on the dashboard canvas

The dashboard opens a loopback canvas(kind:"url") target inside a sandbox="allow-scripts" iframe with no allow-same-origin (opaque origin), proxied under /live/<id>/ (LiveServerViewer.tsx → live-server-proxy). That sandbox breaks two common serving strategies; this skill is the fix.

When to Use

Use when you must display a running web app / React / Vite / MUI mockup on the pi-dashboard canvas via canvas(target:{kind:"url"|"server"}) and it shows up blank white, an empty surface, or a /live/<id> 500 ECONNREFUSED.

Procedure

  1. Do NOT point the canvas at a Vite DEV server. The dashboard proxies loopback targets under /live/<id>/, but Vite dev emits ABSOLUTE asset paths (/main.tsx, /@vite/client, and runtime fetches like /__schema.json) that resolve against the dashboard root, not the proxy prefix → 404 → blank page.
  2. Produce a STATIC production build with a RELATIVE base: a vite config with base:'./', a dedicated index.html entry, and the runtime data (schema/props) IMPORTED statically (no fetch of an absolute path). Run npx vite build --config <config>.
  3. Verify the built index.html references ./assets/... (relative). Copy the entry html to index.html so the proxy root (/live/<id>/) serves it.
  4. Serve the dist with a tiny node static server that sets Access-Control-Allow-Origin: * (and Cross-Origin-Resource-Policy: cross-origin) on every response. This is REQUIRED: the opaque-origin iframe fetches <script type=module> in CORS mode with Origin: null, so without ACAO:* the module is blocked → blank white even though the build is correct. A plain python3 -m http.server does NOT set CORS and renders blank.
  5. Point the canvas: canvas(target:{kind:'url', url:'http://127.0.0.1:<port>/'}, mode:'replace'). Loopback is required (SSRF gate); 127.0.0.1 is safest.
  6. Self-verify by iframing your own harness before touching the canvas: serve an HTML with <iframe sandbox="allow-scripts allow-forms allow-popups" src="http://127.0.0.1:<port>/"> on another port, open it in the browser tool, and screenshot — this reproduces the exact dashboard sandbox.
Show full SKILL.md (191 more words)Show less

Minimal CORS static server

js
// canvas-serve.mjs  —  node canvas-serve.mjs <port>   (serves ./canvas-dist/)
import { createServer } from "node:http";
import { readFile, stat } from "node:fs/promises";
import { extname, join, normalize } from "node:path";
const ROOT = new URL("./canvas-dist/", import.meta.url).pathname;
const PORT = Number(process.argv[2] ?? 5181);
const MIME = { ".html":"text/html;charset=utf-8", ".js":"text/javascript;charset=utf-8",
  ".css":"text/css;charset=utf-8", ".json":"application/json", ".woff":"font/woff",
  ".woff2":"font/woff2", ".svg":"image/svg+xml", ".png":"image/png", ".ico":"image/x-icon" };
createServer(async (req, res) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Cross-Origin-Resource-Policy", "cross-origin");
  let p = decodeURIComponent((req.url ?? "/").split("?")[0]);
  if (p.endsWith("/")) p += "index.html";
  const full = normalize(join(ROOT, p));
  if (!full.startsWith(ROOT)) { res.statusCode = 403; return res.end("forbidden"); }
  const s = await stat(full).catch(() => null);
  if (!s?.isFile()) { res.statusCode = 404; return res.end("not found"); }
  res.setHeader("Content-Type", MIME[extname(full)] ?? "application/octet-stream");
  res.end(await readFile(full));
}).listen(PORT, "127.0.0.1", () => console.log(`CORS static on http://127.0.0.1:${PORT}/`));

Pitfalls

  • bash kill %1 job control does NOT carry across separate Bash tool calls — a dev server started in one call cannot be killed by %1 in another. Kill stale servers by PID: lsof -tiTCP:<port> -sTCP:LISTEN | xargs kill -9.
  • Vite dev may bind IPv6 [::1]:<port> only, while the dashboard proxy dials IPv4 127.0.0.1:<port> → the /live/<id> route returns 500 FST_REPLY_FROM_INTERNAL_SERVER_ERROR 'connect ECONNREFUSED 127.0.0.1:<port>'. Another reason to avoid dev servers and bind static servers explicitly to 127.0.0.1.
  • canvas(target:{kind:'server', port}) produces a tap-to-open CHIP on desktop, not an auto-opened view; kind:'url' with a loopback URL auto-opens via openLiveTarget. Prefer kind:'url'.
  • The build succeeds and renders fine in a NORMAL browser tab yet is blank in the dashboard — that difference is the sandbox/CORS issue, not a build bug. Don't chase the build.
  • Non-loopback/remote URLs are refused by the dashboard SSRF gate (validateLiveTarget).

Verification

  1. The static server responds 200 with header Access-Control-Allow-Origin: * (curl -D - -o /dev/null).
  2. An <iframe sandbox="allow-scripts"> pointed at the server renders the app (browser-tool screenshot), matching the dashboard's opaque-origin sandbox.
  3. After canvas(kind:'url'), the user confirms the app is visible on the canvas (not blank, no 500).

© BlackBeltTechnology, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in packages/extension/.pi/skills/canvas-webapp of BlackBeltTechnology/pi-agent-dashboard.

  • SKILL.md
  • SKILL.md.AGENTS.md

Open the folder on GitHubat commit 86e8e4d

Compare with similar skills

Canvas Webapp 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 Webapp compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Canvas Webapp this skillBlackBeltTechnology/pi-agent-dashboard315—~1.4kAutomated safety check: PassMIT
Web Artifacts Builderanthropics/skills180k41 repos~769Automated safety check: PassApache-2.0
React Router Developmentremix-run/react-router57k1 repos~1.5kAutomated safety check: PassMIT
Chakra UI v3 Builderchakra-ui/chakra-ui41k—~3.1kAutomated safety check: PassMIT
Creative Tim UI Blockscreativetimofficial/ui12k—~2.1kAutomated safety check: NotesMIT
React Router Data Modehalo-dev/upage5541 repos~927Automated safety check: PassMIT

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

  • React Router Development

    remix-run/react-router

    Guides work on React Router apps by first identifying whether the app uses Framework, Data or Declarative mode, then loading the matching reference and the installed package docs.

    57k GitHub starsUsed in 1 repo~1.5k tokens
    Frontend & DesignAuto-check passed

  • Chakra UI v3 Builder

    chakra-ui/chakra-ui

    Builds responsive, accessible Chakra UI v3 components and layouts, sets up Chakra in new or existing projects, and designs themes with tokens, semantic tokens and recipes.

    41k GitHub stars~3.1k tokensUpdated 3 days ago
    Frontend & DesignAuto-check passed

  • Creative Tim UI Blocks

    creativetimofficial/ui

    Helps install, generate and review Creative Tim UI blocks: shadcn/ui-based React and Tailwind sections that follow a restrained, production-minded design philosophy.

    12k GitHub stars~2.1k tokensUpdated 6 mo ago
    Frontend & DesignAuto-check: notes

  • React Router Data Mode

    halo-dev/upage

    Build React applications using React Router's data mode with createBrowserRouter and RouterProvider.

    554 GitHub starsUsed in 1 repo~927 tokens
    Auto-check passed

  • LangBot Core Development

    langbot-app/LangBot

    Covers developing the LangBot core backend and web UI: dev setup, repo layout, API auth types, adding endpoints, migrations and keeping the MCP server in step.

    18k GitHub stars~1.4k tokensUpdated yesterday
    DevelopmentAuto-check: notes

More from BlackBeltTechnology/pi-agent-dashboard

All 66 skills in this repo

  • Browser

    BlackBeltTechnology/pi-agent-dashboard

    Browser automation via the agent-browser CLI. An agent skill from BlackBeltTechnology/pi-agent-dashboard.

    315 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • CI Troubleshoot

    BlackBeltTechnology/pi-agent-dashboard

    Diagnose failed GitHub Actions runs for pi-agent-dashboard: the 11-file workflow taxonomy, affected-test selection, the release pipeline, known failure modes, and how to read gh run logs and…

    315 GitHub stars~3.5k tokensUpdated yesterday
    Auto-check passed

  • Debug Dashboard

    BlackBeltTechnology/pi-agent-dashboard

    Diagnose problems in the running pi-agent-dashboard system: server.log, /api/health, bridge WebSocket connectivity, vitest triage, known-issue FAQ entries.

    315 GitHub stars~1.6k tokensUpdated yesterday
    Auto-check passed

  • Implement

    BlackBeltTechnology/pi-agent-dashboard

    Disciplined implementation in pi-agent-dashboard: the rebuild matrix (extension→reload, server→restart, client→build+restart, openspec-apply→full rebuild) plus the project's code discipline rules.

    315 GitHub stars~2k tokensUpdated yesterday
    Auto-check passed

  • Pi Dashboard

    BlackBeltTechnology/pi-agent-dashboard

    Monitor and control the pi-dashboard server. An agent skill from BlackBeltTechnology/pi-agent-dashboard.

    315 GitHub stars~2.2k tokensUpdated yesterday
    Auto-check passed

  • Session To Guideline

    BlackBeltTechnology/pi-agent-dashboard

    Turn a pi session into a Markdown "how-we-did-it" collaboration guideline: reads the session's JSONL transcript and synthesizes a reusable playbook of which prompts worked, what had to be steered…

    315 GitHub stars~3.2k tokensUpdated yesterday
    Auto-check passed

Works with

Questions about Canvas Webapp

What does Canvas Webapp do?

Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe. Canvas Webapp is an agent skill from BlackBeltTechnology/pi-agent-dashboard. Render a React/Vite (or any bundled) web app on the pi-dashboard canvas, which loads loopback URLs in a sandboxed opaque-origin iframe.

When should I use Canvas Webapp?

Canvas Webapp fits situations like: A canvas(target:{kind:url|server}) target shows up blank white; an empty surface; A /live/<id 500 ECONNREFUSED.

How do I install Canvas Webapp in Claude Code?

Run `npx skills add BlackBeltTechnology/pi-agent-dashboard --skill canvas-webapp -a claude-code`. Or copy the skill folder (packages/extension/.pi/skills/canvas-webapp in BlackBeltTechnology/pi-agent-dashboard) into .claude/skills/canvas-webapp in your project. Claude Code loads it when a task matches its description.

How do I install Canvas Webapp in Codex?

Run `npx skills add BlackBeltTechnology/pi-agent-dashboard --skill canvas-webapp -a codex`. Or copy the skill folder (packages/extension/.pi/skills/canvas-webapp in BlackBeltTechnology/pi-agent-dashboard) into .agents/skills/canvas-webapp in your project. Codex loads it when a task matches its description.

Can I use Canvas Webapp 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 BlackBeltTechnology/pi-agent-dashboard --skill canvas-webapp -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-webapp, .gemini/skills/canvas-webapp, .github/skills/canvas-webapp and .opencode/skills/canvas-webapp in your project.

What does Canvas Webapp need to run?

Going by SKILL.md and its folder, Canvas Webapp needs the command-line tools its instructions call (npx, python3 and curl). Our summary lists: Python 3; Node.js.

Does Canvas Webapp access the network?

SKILL.md contains no URLs. Its commands use npx and curl, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is Canvas Webapp 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 Webapp use?

Canvas Webapp is published under the MIT licence (declared in SKILL.md). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Canvas Webapp use?

About 1.4k tokens (SKILL.md is roughly 5.5k 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 Webapp?

Skills that share tags, products or a category with Canvas Webapp: Web Artifacts Builder (anthropics/skills, 180k stars), React Router Development (remix-run/react-router, 57k stars), Chakra UI v3 Builder (chakra-ui/chakra-ui, 41k stars) and Creative Tim UI Blocks (creativetimofficial/ui, 12k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canvas Webapp?

BlackBeltTechnology (a GitHub organization) maintains it in BlackBeltTechnology/pi-agent-dashboard, which has 315 GitHub stars. The repository holds 66 skills in this directory. The repository was last updated on October 8, 2026.

Source: BlackBeltTechnology/pi-agent-dashboard on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.