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.
npx agentmods add skills/robcsaszar/frontend-kit/with-canvasnpx skills add robcsaszar/frontend-kit --skill with-canvasgit clone --depth 1 https://github.com/robcsaszar/frontend-kitWrote 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/robcsaszar/frontend-kit/with-canvas)<a href="https://agentmods.dev/skills/robcsaszar/frontend-kit/with-canvas"><img src="https://agentmods.dev/badge/skills/robcsaszar/frontend-kit/with-canvas.svg" alt="Measured on agentmods" height="20"></a>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 | $0.00160 | $0.01988 |
| Opus 5 | $0.00080 | $0.00994 |
| Sonnet 5 | $0.00032 | $0.00398 |
| Haiku 4.5 | $0.00016 | $0.00199 |
Grade A, and why
with-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 3d 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.
How it starts
The opening of the file, as written. The whole thing — 118 lines — stays where its author put it; the contents beside it link to each section on GitHub.
with-canvas
Canvas work fails in two different ways: visual code that is pretty but janky, and optimized code that is unmaintainable or inaccessible. Treat every task as a rendering architecture decision before writing draw calls. Load only the reference named by the current phase; do not preload all references.
Phase 1 - Classify the Canvas Job
Identify the dominant workload before choosing APIs:
- Reject canvas: prefer DOM/CSS/SVG/video when the scene is mostly text, accessible controls, document layout, simple iconography, CSS animation, media playback, or a small number of scalable vector shapes.
- Decorative animation: non-interactive ambience, background particles, stars, birds, procedural loops.
- Data rendering: charts, maps, heatmaps, large point clouds, frequently updated measurements.
- Generative art: seeded/random drawing, creative sketches, procedural systems, exportable images.
- Interactive tool: pointer/keyboard input, selection, drag, editable objects, hit testing.
- Game/simulation: fixed update loop, dynamic entities, collision/physics, layered scene.
- WebGL/engine canvas: Three.js/Babylon.js/other renderer owning GPU resources.
MANDATORY READ: if the workload is decorative animation or generative art, read references/visual-quality.md — for those two jobs, looking good is the task, and perf/a11y hygiene alone ships generic output. Do NOT load it for data rendering, tools, games, or engine canvases.
Exit condition: state the workload, why canvas is the right primitive, target frame rate, expected object count, interaction model, and whether the canvas is decorative or semantically meaningful.
Phase 2 - Pick the Rendering Model
Use raw Canvas 2D when the scene is mostly immediate-mode drawing, pixel work, sprites, simple animation, or bundle size matters.
Use a retained-mode library when the app needs editable objects, selection, drag/drop, layered scene graph, event delegation, or serialization.
Use p5.js for sketches, generative art, teaching/prototyping, or creative coding where setup/draw ergonomics matter more than framework integration.
What ships with it
4 files 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.
- 3d ago First seen · 118 lines · 160 tokens per session scan A 5b49949b9312
with-canvas is a skill published in the GitHub repository robcsaszar/frontend-kit (1 stars, last pushed 4d ago), licensed MIT. It adds 160 tokens to every session and 1,988 once invoked, about $0.0008 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.
Other skills, from other repositories
verify
Build/launch/drive recipe for verifying apps/docs changes at runtime (demos, docs pages, llms.txt).
oat-css
Our preferred CSS framework — ultra-lightweight, semantic HTML UI library (8KB). Style web UIs with semantic HTML and minimal classes. Override with app-level SCSS only when necessary.
pwa
Use when the user asks to make a site installable, turn it into a PWA, add a service worker, add a web app manifest, enable "add to home screen", or support offline. Also use when adding favicon/app icons, iOS home-screen support (apple-mobile-web-app meta tags), or verifying PWA installability.
docker
Docker Compose conventions — short service names, no root, no host ports in base compose, override files for local customisations.
pb-api
Operate PocketBase via its REST API. Use for CRUD operations on collections, authentication, querying records with filters, and managing PocketBase data.
pb-extend
Extend PocketBase with custom hooks and routes in JS or Go. Use when user wants to add custom API routes, modify PocketBase behavior, or add server-side logic.