Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/BlackBeltTechnology/pi-agent-dashboardnpx agentmods add skills/blackbelttechnology/pi-agent-dashboard/canvas-webappWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/blackbelttechnology/pi-agent-dashboard/canvas-webapp)<a href="https://agentmods.dev/skills/blackbelttechnology/pi-agent-dashboard/canvas-webapp"><img src="https://agentmods.dev/badge/skills/blackbelttechnology/pi-agent-dashboard/canvas-webapp/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/blackbelttechnology/pi-agent-dashboard/canvas-webapp"><img src="https://agentmods.dev/badge/skills/blackbelttechnology/pi-agent-dashboard/canvas-webapp.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 2 findings, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium MCP Rug Pull · line 35 npx commands without a version suffix (e.g. @1.0.0) create a rug-pull risk if the upstream server is compromised and publishes a malicious update.Fix: Pin the version: npx @scope/[email protected]
- medium Data Exfiltration · line 100 Data is being sent to an external URL. This could be legitimate telemetry or data exfiltration. Manual review is recommended.Fix: Verify the destination URL is trusted and necessary. Remove or replace with documented APIs. Ensure no secrets, tokens, or PII are transmitted.
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00099 | $0.01518 |
| Opus 5 | $0.00049 | $0.00759 |
| Sonnet 5 | $0.00020 | $0.00304 |
| Haiku 4.5 | $0.00010 | $0.00152 |
Grade A, and why
canvas-webapp scanned grade A with 1 finding against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 10d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
(`curl -D - -o /dev/null`). How it starts
The opening of the file, as written. The whole thing — 105 lines — stays where its author put it; the contents beside it link to each section on GitHub.
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
- 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. - Produce a STATIC production build with a RELATIVE base: a vite config with
base:'./', a dedicatedindex.htmlentry, and the runtime data (schema/props) IMPORTED statically (no fetch of an absolute path). Runnpx vite build --config <config>. - Verify the built
index.htmlreferences./assets/...(relative). Copy the entry html toindex.htmlso the proxy root (/live/<id>/) serves it. - Serve the dist with a tiny node static server that sets
Access-Control-Allow-Origin: *(andCross-Origin-Resource-Policy: cross-origin) on every response. This is REQUIRED: the opaque-origin iframe fetches<script type=module>in CORS mode withOrigin: null, so without ACAO:* the module is blocked → blank white even though the build is correct. A plainpython3 -m http.serverdoes NOT set CORS and renders blank. - Point the canvas:
canvas(target:{kind:'url', url:'http://127.0.0.1:<port>/'}, mode:'replace'). Loopback is required (SSRF gate);127.0.0.1is safest. - 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.
What ships with it
1 file beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 10d ago First seen · 105 lines · 99 tokens per session scan A 43de637a7370
canvas-webapp is a skill published in the GitHub repository BlackBeltTechnology/pi-agent-dashboard (278 stars, last pushed today), licensed MIT. It adds 99 tokens to every session and 1,518 once invoked, about $0.0005 per session on Opus 5. A static security scan graded it A with 1 finding (makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
rn-best-practices
This skill should be used when writing or reviewing React Native / Expo code — before writing list rendering, animations, data fetching, component APIs, navigation, or image/media UI — and when asked to "review best practices", "check performance", "optimize renders", "review list rendering", "check animation…
rn-feature-dev
Explicit Codex workflow: Guided feature development for React Native — explore codebase, design architecture, implement, verify live on device, and review quality.
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance…
rn-debugging
This skill should be used when the user asks to "debug the app", "fix a crash", "diagnose a blank screen", "read error logs", "troubleshoot CDP connection", "check Metro status", "find native crashes", "inspect network failures", "the app crashed", "I see a blank screen", "the screen is white", "something broke", "app…
goga-change-investigator
Evidence-driven root cause investigation.