A control tool for interactive canvas and WebGL interfaces, where apps draw buttons and objects on a graphical surface instead of using ordinary web-page elements.

Listing canvas objects, resolving a natural-language instruction such as closing a popup, and tapping the matching object on a simulator or device.

It lets an agent inspect the live scene and identify targets without relying on screenshots or image recognition. It avoids tapping when the intended target is ambiguous.

canvas — Skill for Claude Code by hoainho

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

Any agent

npx skills add hoainho/podium-mcp --skill canvas

Clone the repo

git clone --depth 1 https://github.com/hoainho/podium-mcp

Made for: Claude Code.

Or install podium-mcp, the plugin that ships this one along with the rest of its 5 skills, 2 MCP servers.

Wrote 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.

README.md

[![agentmods](https://agentmods.dev/badge/skills/hoainho/podium-mcp/canvas/github.svg)](https://agentmods.dev/skills/hoainho/podium-mcp/canvas)

Your own site

<a href="https://agentmods.dev/skills/hoainho/podium-mcp/canvas"><img src="https://agentmods.dev/badge/skills/hoainho/podium-mcp/canvas/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.

Your own site · 80×15

<a href="https://agentmods.dev/skills/hoainho/podium-mcp/canvas"><img src="https://agentmods.dev/badge/skills/hoainho/podium-mcp/canvas.svg" alt="Reviewed on agentmods" width="80" height="20"></a>

Per session 61 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.

When invoked 462 The whole file, excluding the scripts and references it only reads on demand.

Security scan A 0 findings. A grade says what 26 rules found in the file — not that it is safe.

Origin original No closer match found in the catalogue.

Token cost

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.00061	$0.00462
Opus 5	$0.00030	$0.00231
Sonnet 5	$0.00012	$0.00092
Haiku 4.5	$0.00006	$0.00046

Measured 10d ago against content hash 9ece1f256859, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-09, from the pricing page.

Security

Grade A, and why

canvas scanned grade A with 0 findings 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.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/canvas/SKILL.md · 20 lines

What it actually says

Using podium, act on the canvas/WebGL UI of the WebView app on simulator/device $ARGUMENTS (format: <UDID> <intent>, e.g. <UDID> close the popup). Parse the first whitespace token as the UDID; everything after it is the INTENT.

No screenshots, no vision — drive the live scene graph as DOM-like elements.

canvas_inspect with the UDID — confirm a framework was detected and list the addressable objects. If framework is unknown or count is 0, report the returned hint (expose the framework root on window, or fall back to a screenshot + tap_with_fallback) and stop.
If the intent is list or empty, present the objects as a markdown table (name / text / type / x,y) and stop.
canvas_resolve with the UDID and the intent — show the ranked candidates with their reasons and the confidentEnough flag.
- If confidentEnough is false, do NOT tap. Present the top candidates and ask the user which one (fail-closed by design — two equally-good targets must not be blind-tapped).
If confidentEnough is true, call canvas_tap with the UDID and the intent — then report what was tapped (name/text), the screen coordinates, and the backend used.
Summarize: framework detected, target chosen + the evidence behind it, and the tap result.

Notes:

Requires an inspectable WKWebView (isInspectable=true; debug/staging builds).
Canvas tools NEVER use vision; vision is a separate opt-in path (PODIUM_ALLOW_VISION=1).
Honors PODIUM_DISABLE_WEBVIEW_EVAL=1 (the tools refuse to inject the bridge).

Changes

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 · 20 lines · 61 tokens per session scan A 9ece1f256859

Subscribe to this mod's changes

canvas is a skill published in the GitHub repository hoainho/podium-mcp (4 stars, last pushed 2mo ago), licensed MIT. It adds 61 tokens to every session and 462 once invoked, about $0.0003 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Frontend devtools ios-simulator maestro mcp-server metro

a11y-debugging

Uses Chrome DevTools MCP for accessibility (a11y) debugging and auditing based on web.dev guidelines. Use when testing semantic HTML, ARIA labels, focus states, keyboard navigation, tap targets, and color contrast.

ChromeDevTools/chrome-devtools-mcp · 50 tokens

debug-optimize-lcp

Guides debugging and optimizing Largest Contentful Paint (LCP) using Chrome DevTools MCP tools. Use this skill whenever the user asks about LCP performance, slow page loads, Core Web Vitals optimization, or wants to understand why their page's main content takes too long to appear. Also use when the user mentions…

ChromeDevTools/chrome-devtools-mcp · 99 tokens

devtools-app-setup

Install TanStack Devtools, pick framework adapter (React/Vue/Solid/Preact), register plugins via plugins prop, configure shell (position, hotkeys, theme, hideUntilHover, requireUrlFlag, eventBusConfig). TanStackDevtools component, defaultOpen, localStorage persistence.

TanStack/devtools · 66 tokens

devtools-framework-adapters

Use devtools-utils factory functions to create per-framework plugin adapters. createReactPlugin/createSolidPlugin/createVuePlugin/createPreactPlugin, createReactPanel/createSolidPanel/createVuePanel/createPreactPanel. [Plugin, NoOpPlugin] tuple for tree-shaking. DevtoolsPanelProps (theme). Vue uses (name, component)…

TanStack/devtools · 84 tokens

flutter-mcp-toolkit-maintain-web

Maintains fluttertestapp and intentcall web targets (Chrome, web codegen, WebMCP bootstrap, web-showcase, webmcp verify). Use when editing web/index.html, agentmanifest.json, intentcallwebmcp.generated.js, web platform sync, Chrome dogfood, or WebMCP modelContext.

Arenukvern/mcp_flutter · 74 tokens

portable-text-serialization

Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown…

sanity-io/agent-toolkit · 85 tokens