canvas-design

canvas-design is a skill for Claude Code, Codex from inbharatai/claude-skills. It costs 25 tokens per session (391 once invoked), scanned A, original, MIT.

A workflow for designing and rendering illustrations, diagrams, interface mockups, and interactive graphics with HTML5 Canvas. Canvas is a browser drawing area controlled with code.

In plain words
What is it for?
It is for building coded illustrations, diagrams, UI mockups, and interactive visual components on a web page.
Why use it?
It provides a defined way to create visual elements that are drawn or updated in the browser.

Skill for Claude CodeCodex

Written for no agent in particular: nothing here depends on one. Also seen: mentions Claude Code.

Good fit It is for building coded illustrations, diagrams, UI mockups, and interactive visual components on a web page.

Compare 6 skills from other repositories ↓
Install with agentmods
npx agentmods add skills/inbharatai/claude-skills/canvas-design
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 inbharatai/claude-skills --skill canvas-design
Clone the repo
git clone --depth 1 https://github.com/inbharatai/claude-skills

Made for: Claude Code, Codex.

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.

agentmods badge for canvas-design

README.md
[![agentmods](https://agentmods.dev/badge/skills/inbharatai/claude-skills/canvas-design/github.svg)](https://agentmods.dev/skills/inbharatai/claude-skills/canvas-design)
Your own site
<a href="https://agentmods.dev/skills/inbharatai/claude-skills/canvas-design"><img src="https://agentmods.dev/badge/skills/inbharatai/claude-skills/canvas-design/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.

agentmods 80×15 button for canvas-design

Your own site · 80×15
<a href="https://agentmods.dev/skills/inbharatai/claude-skills/canvas-design"><img src="https://agentmods.dev/badge/skills/inbharatai/claude-skills/canvas-design.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 25 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 391 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.

ModelPer sessionOnce invoked
Fable 5.1 $0.00025 $0.00391
Opus 5 $0.00013 $0.00196
Sonnet 5 $0.00005 $0.00078
Haiku 4.5 $0.00003 $0.00039

Measured 12d ago against content hash 40f02af83068, method: parsed. Prices are Anthropic first-party input rates as of 2026-09-11, from the pricing page.

Security

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 12d 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-design/SKILL.md · 68 lines

What it actually says

Canvas Design

Overview

Design and render graphics on HTML5 Canvas — illustrations, diagrams, UI mockups, and interactive visual elements.

When to Use This Skill

Use Canvas Design when you need to:

  • Work with canvas design tasks in your project or workflow
  • Automate canvas design operations at scale
  • Generate production-quality canvas design output quickly

Instructions

When this skill is active, Claude will:

  1. Understand the full context of your canvas design request
  2. Apply best practices and conventions for Creative & Design
  3. Produce clean, well-structured, production-ready output
  4. Explain key decisions and offer alternatives where relevant

Examples

Example 1 — Basic Usage

User: Help me get started with canvas design.

Claude: I'll walk you through the essential steps for canvas design in your context...

Example 2 — Advanced Usage

User: I need a production-ready canvas design setup with full error handling.

Claude: Here's a complete, production-hardened canvas design implementation...

Guidelines

  • Always validate inputs before processing
  • Follow the conventions of the target platform or language
  • Prefer explicit over implicit — clarity beats cleverness
  • Include comments for non-obvious logic
  • Suggest tests or validation steps where appropriate

Dependencies

Required: javascript, canvas

Platforms

Available on: claude.ai, api


Part of the claude-skills collection — 183+ skills for Claude.

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.

  1. 12d ago First seen · 68 lines · 25 tokens per session scan A 40f02af83068

Subscribe to this mod's changes

canvas-design is a skill published in the GitHub repository inbharatai/claude-skills (33 stars, last pushed 6mo ago), licensed MIT. It adds 25 tokens to every session and 391 once invoked, about $0.0001 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-30.

Related

Other skills, from other repositories

visualize

Render a polished visual inline in the chat as part of your answer — a diagram, a chart, an interactive explainer, or a UI mockup. Load it proactively whenever an explanation would land better as a picture than as prose. Do not wait to be asked.

vellum-ai/vellum-assistant · 57 tokens

vellum-avatar

Customize the assistant's avatar - build a native character, upload an image, or generate one with AI.

vellum-ai/vellum-assistant · 24 tokens

brand-identity

Brand strategy and identity design for businesses and products. Use when creating brand guidelines, developing visual identity systems, or defining brand positioning.

travisjneuman/.claude · 30 tokens

graphic-design

Professional graphic design principles for digital and print media. Use when creating visual designs, choosing color palettes, typography, layouts, or providing design feedback.

travisjneuman/.claude · 32 tokens

yt-dlp-downloader

Generate and run yt-dlp download commands with probe-driven format selection, safe output naming, retry defaults, and structured execution reports. Use when users want to download videos, extract audio, fetch playlists, grab subtitles, handle authenticated/age-gated content, or download live streams. Covers single…

johnqtcg/awesome-skills · 96 tokens

plan-review-experience

Experience-dimension reviewer for written plans (UX + DX). Use when running plan-review or directly when an experience review is wanted. Activate for keywords like "UX review", "DX review", "experience review", "error states", "API ergonomics", "developer experience", "user states". Scores 5 sub-dimensions 0-10…

duthaho/claudekit · 121 tokens