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/pixel-process-ug/superkit-agents/canvas-designnpx skills add Pixel-Process-UG/superkit-agents --skill canvas-designgit clone --depth 1 https://github.com/Pixel-Process-UG/superkit-agentsWrote 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/pixel-process-ug/superkit-agents/canvas-design)<a href="https://agentmods.dev/skills/pixel-process-ug/superkit-agents/canvas-design"><img src="https://agentmods.dev/badge/skills/pixel-process-ug/superkit-agents/canvas-design.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.00071 | $0.02373 |
| Opus 5 | $0.00036 | $0.01187 |
| Sonnet 5 | $0.00014 | $0.00475 |
| Haiku 4.5 | $0.00007 | $0.00237 |
Grade A, and why
canvas-design 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 5d 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 — 301 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Canvas Design
Overview
Create performant, accessible, and visually compelling graphics using HTML Canvas 2D, SVG, and data visualization libraries. This skill covers everything from low-level pixel manipulation to high-level chart composition with D3.js, including generative art, interactive graphics, and animation.
Phase 1: Requirements Analysis
- Determine output type (static, animated, interactive, data-driven)
- Choose rendering technology (Canvas 2D, SVG, WebGL, hybrid)
- Identify data sources and update frequency
- Define accessibility requirements for the visualization
- Set performance budget (frame rate, element count)
STOP — Present technology recommendation with rationale before implementation.
Technology Selection Decision Table
| Requirement | Canvas 2D | SVG | WebGL |
|---|---|---|---|
| < 1000 elements | Maybe | Yes | No |
| > 10,000 elements | Yes | No | Yes |
| DOM event handling needed | No | Yes | No |
| Pixel manipulation | Yes | No | Yes |
| Text-heavy visualization | No | Yes | No |
| 3D rendering | No | No | Yes |
| Print quality | No | Yes | No |
| Animation-heavy | Yes | Maybe | Yes |
| Accessibility critical | No | Yes | No |
| SEO-relevant content | No | Yes | No |
When to Use Each Technology
| Use Case | Recommended | Why |
|---|---|---|
| Dashboard charts (< 500 data points) | SVG + D3.js | DOM events, accessibility, print |
| Real-time data stream (1000+ points) | Canvas 2D | Performance at scale |
| Interactive map with tooltips | SVG | Hover events, accessible |
| Particle system / generative art | Canvas 2D | Pixel-level control, performance |
| 3D data visualization | WebGL (Three.js) | GPU acceleration |
| Infographic for blog post | SVG | Scalable, accessible, printable |
| Game or simulation | Canvas 2D or WebGL | Frame rate, pixel control |
Phase 2: Implementation
- Set up responsive canvas/SVG container
- Implement rendering pipeline (clear, update, draw)
- Add interaction handlers (hover, click, drag, zoom)
- Optimize render loop (requestAnimationFrame, dirty rectangles)
- Add accessibility layer (ARIA, screen reader descriptions)
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.
- 5d ago First seen · 301 lines · 71 tokens per session scan A de7330317a48
canvas-design is a skill published in the GitHub repository Pixel-Process-UG/superkit-agents (1 stars, last pushed 5mo ago), licensed MIT. It adds 71 tokens to every session and 2,373 once invoked, about $0.0004 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
test-driven-development
Drives development with tests. Use when implementing any logic, fixing any bug, or changing any behavior. Use when you need to prove that code works, when a bug report arrives, or when you're about to modify existing functionality.
documentation-and-adrs
Records decisions and documentation. Use when making architectural decisions, changing public APIs, shipping features, or when you need to record context that future engineers and agents will need to understand the codebase.
idea-refine
Refines raw ideas into sharp, actionable concepts through structured divergent and convergent thinking. Use when an idea is still vague, when you need to stress-test assumptions before committing to a plan, or when you want to expand options before converging on one. Triggers on "ideate", "refine this idea", or…
chinese-git-workflow
国内 Git 平台配置参考——Gitee、Coding.net、极狐 GitLab、CNB 的 SSH/HTTPS/凭据/CI 接入差异与镜像同步配置。仅在用户显式 /chinese-git-workflow 时调用，不要根据上下文自动触发。.
chinese-documentation
中文文档排版参考——中英文空格、全半角标点、术语保留、链接格式、中文文案排版指北约定。仅在用户显式 /chinese-documentation 时调用，不要根据上下文自动触发。.
skillshare-implement-feature
Implement a feature from a spec file or description using TDD workflow. Use this skill whenever the user asks to: add a new CLI command, implement a feature from a spec, build new functionality, add a flag, create a new internal package, or write Go code for skillshare. This skill enforces test-first development…