canvas-sync

canvas-sync is a skill for Claude Code from aiatelie/ai-atelie. It costs 147 tokens per session (2,484 once invoked), scanned A, original, MIT.

A contributor workflow for keeping one design-canvas feature consistent across its source file, demo copy, host wiring, and protocol documentation. The canvas is the pannable and zoomable workspace surrounding project content.

In plain words
What is it for?
Use it when modifying the listed DesignCanvas files or their related integration, so the canonical starter, demo, host behavior, and documented protocol stay aligned.
Why use it?
A change made in only one of these locations can leave the demo, new projects, editor integration, and documentation out of sync.

Skill for Claude Code

Written for Claude Code: installed under .claude/. Also seen: reads .claude/ paths.

Good fit Use it when modifying the listed DesignCanvas files or their related integration, so the canonical starter, demo, host behavior, and documented protocol stay aligned.

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

Made for: Claude Code.

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-sync

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

Your own site · 80×15
<a href="https://agentmods.dev/skills/aiatelie/ai-atelie/canvas-sync"><img src="https://agentmods.dev/badge/skills/aiatelie/ai-atelie/canvas-sync.svg" alt="Reviewed on agentmods" width="80" height="20"></a>
Per session 147 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 2,484 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.00147 $0.02484
Opus 5.5 $0.00059 $0.00994
Sonnet 5.5 $0.00029 $0.00497
Haiku 4.5 $0.00015 $0.00248

Measured 1mo ago against content hash 435f14c8bfe1, method: parsed. Prices are Anthropic first-party input rates as of 2026-10-07, from the pricing page.

Security

Grade A, and why

canvas-sync 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 1mo 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.

.claude/skills/canvas-sync/SKILL.md · 115 lines

How it starts

The opening of the file, as written. The whole thing — 115 lines — stays where its author put it; the contents beside it link to each section on GitHub.

canvas-sync

A contributor workflow for AI Atelie. The DesignCanvas surface (the pannable, zoomable workspace that wraps every project's content) lives in three places at once, and a change to one without the others is almost always a bug.

This skill is dev-time only. It does not load into adapter sessions spawned by the editor.

The three places, and what each one is for

Location Role Loaded when
mcp/starters/DesignCanvas.jsx Canonical source of truth. The starter the agent copies via mcp__starters__copy_starter and the route POST /api/projects/create reads to seed every new project. An agent calls copy_starter in an existing project · A user creates a new project.
web/projects/demo/design-canvas.jsx Demo project's copy. The "AI Atelie demo" project that ships in the repo and renders on first run. A user opens the demo from /projects (e.g. via home-shows-demo journey, or anyone testing locally).
web/src/lib/tweakBridge.ts + mcp/CANVAS_PROTOCOL.md Host-side wiring. The parent's listener for __page_is_canvas, the __dc_set_theme broadcast, and the documented protocol contract. The editor mounts an iframe that announces __page_is_canvas.

The parity rule

The two .jsx files MUST be byte-identical at every commit. They are not "two copies that drift" — they are two materializations of one source. Verify with:

md5 mcp/starters/DesignCanvas.jsx web/projects/demo/design-canvas.jsx
# (Linux: md5sum)

The two hashes must match. If they don't, stop and reconcile before committing.

The flow direction

Always edit the canonical first, then mirror — never the other way around. The canonical is the file every NEW project copies; the demo is just a testbed.

# 1. Edit the canonical
$EDITOR mcp/starters/DesignCanvas.jsx

# 2. Mirror to the demo
cp mcp/starters/DesignCanvas.jsx web/projects/demo/design-canvas.jsx

# 3. Verify they match
md5 mcp/starters/DesignCanvas.jsx web/projects/demo/design-canvas.jsx

# 4. Both files go in the same commit
git add mcp/starters/DesignCanvas.jsx web/projects/demo/design-canvas.jsx

Read the full file on GitHub · 115 lines

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. 1mo ago First seen · 115 lines · 147 tokens per session scan A 435f14c8bfe1

Subscribe to this mod's changes

canvas-sync is a skill published in the GitHub repository aiatelie/ai-atelie (11 stars, last pushed 4mo ago), licensed MIT. It adds 147 tokens to every session and 2,484 once invoked, about $0.0006 per session on Opus 5.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.

Related

Other skills, from other repositories

hatch-pet

Create, repair, validate, preview, and package Codex-compatible animated pet spritesheets from character art, screenshots, generated images, or visual references. Use when a user wants to hatch a Codex pet, create a custom animated pet, or build a built-in pet asset with an 8x9 atlas, transparent unused cells…

nexu-io/open-design · 114 tokens

magazine-web-ppt

For marketing and gtm work: bind launches, campaigns, events, and brand plans to growth and pipeline outcomes. Built around the core query "annual-marketing-plan", with GTM strategy lead judgment, buyer-ready proof, and this outcome: approve launch plan, campaign budget, or GTM motion.

nexu-io/open-design · 67 tokens

od-contribute

One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship…

nexu-io/open-design · 104 tokens

replit-deck

For product and technical management work: turn PRDs, roadmaps, RFCs, architecture reviews, and retros into decision documents. Built around the core query "pm-feature-business-case-deck", with product strategy lead judgment, buyer-ready proof, and this outcome: approve the feature, architecture, roadmap, or incident…

nexu-io/open-design · 71 tokens

waitlist-page

Minimal pre-launch landing with email capture, brand logo, and optional decorative layer. Reads DESIGN.md for colors, typography, and layout rules. Best for: product launches, beta signups, early access programs, indie projects.

nexu-io/open-design · 49 tokens

design-brief

Parse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief"…

nexu-io/open-design · 76 tokens