Agent skill

Canvas Edit Elements

by Xiangyu-CAS in Xiangyu-CAS/codex-canvas

Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.

MITAuto-check passed

Install Canvas Edit Elements

skills CLI
$ npx skills add Xiangyu-CAS/codex-canvas --skill canvas-edit-elements -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install Xiangyu-CAS/codex-canvas canvas-edit-elements --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/Xiangyu-CAS/codex-canvas.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/canvas-edit-elements .claude/skills/canvas-edit-elements && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
canvas-edit-elements
GitHub stars
135
Token cost
~1.1k tokens
SKILL.md length
611 words
Files
2
Skills in repo
7
Repo updated
First seen
Licence
MIT

At a glance

Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.

  • Works in 12 steps: Treat the selected canvas image as the… → Use imagegen once to create a low-detail… → The segmentation map must preserve the… → …
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Canvas Edit Elements is an agent skill from Xiangyu-CAS/codex-canvas. Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.

Its SKILL.md is about 1.1k tokens, which your agent loads only when the skill is triggered. The skill folder holds 1 other file (for example `archived-prompts.md`).

The repository describes itself as: Infinite canvas plugin for codex; Codex无限画布插件,图层分离,涂抹修改. The licence is MIT.

Example prompts

  • “/canvas-edit-elements”

Workflow steps

12 steps, taken from the first numbered list in SKILL.md.

  1. Treat the selected canvas image as the source image to separate.
  2. Use imagegen once to create a low-detail instance segmentation map of the source image, not a finished artwork. Use quality=low when the…
  3. The segmentation map must preserve the exact source aspect ratio.
  4. Use this exact visual prompt without adding object examples, category examples, palette examples, or case-specific rules…
  5. Only leave regions uncolored when they are true background or empty margin.
  6. Save only the generated segmentation map as a PNG under the Codex-Canvas job output directory.
  7. Codex-Canvas will locally normalize near-colors in the segmentation map, treat magenta as a chroma-key background, split same-color…
  8. Codex-Canvas then extracts each non-background object/text group from the source into a four-channel transparent PNG layer. Before…
  9. All remaining pixels first become a transparent residual background layer. Codex-Canvas imports that residual background immediately with…
  10. The segmentation map and background-completion raw output are internal job artifacts and should not appear as canvas objects. The only…
  11. Collected layers are stacked at their original relative positions, with the background as the bottom layer, so the group reconstructs the…
  12. Collected layers keep shared layerGroupId metadata for reset, layer-order controls, and PSD export, but they should start unlocked so the…

What it can do on your machine

Read from SKILL.md and the folder at commit b801839. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md.

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Canvas Edit Elements loads about 1.1k tokens when it runs. Until then it costs about 47 tokens; SKILL.md has 611 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~47
When it runs · the whole SKILL.md, loaded when a task matches
~1.1k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from Xiangyu-CAS/codex-canvas at commit b801839, republished under its MIT licence (© Xiangyu-CAS). 611 words, ~1,123 tokens.

Download SKILL.mdSave it as .claude/skills/canvas-edit-elements/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.
name
canvas-edit-elements
description
Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.

Codex-Canvas Edit Elements

Use this skill when the user invokes Edit Elements from Codex-Canvas or asks to separate a selected canvas image into editable visual elements.

Behavior

  1. Treat the selected canvas image as the source image to separate.
  2. Use imagegen once to create a low-detail instance segmentation map of the source image, not a finished artwork. Use quality=low when the imagegen surface exposes a quality setting.
  3. The segmentation map must preserve the exact source aspect ratio.
  4. Use this exact visual prompt without adding object examples, category examples, palette examples, or case-specific rules: 对这张图进行实例分割,背景用纯洋红色 #ff00ff 表示。每个前景实例使用不同的纯色表示。完整物体作为一个实例,不要拆分物体内部部件。文字按视觉文本块作为独立实例保留。输出平涂分割图,不要渐变、阴影、纹理、图例或说明文字。
  5. Only leave regions uncolored when they are true background or empty margin.
  6. Save only the generated segmentation map as a PNG under the Codex-Canvas job output directory.
  7. Codex-Canvas will locally normalize near-colors in the segmentation map, treat magenta as a chroma-key background, split same-color disconnected regions when their components are spatially far apart, and merge only spatially related same-color components such as adjacent object pieces or coherent text rows. Sparse same-color fragments that span a large part of the canvas are downgraded into smaller spatial groups instead of becoming one huge layer, and many small same-color decorative fragments can be merged into a single decoration layer. Codex-Canvas also merges contained or visibly attached multi-color parts back into the larger object-level layer, so product interiors and attached details do not become separate layers just because the segmentation map used multiple colors.
  8. Codex-Canvas then extracts each non-background object/text group from the source into a four-channel transparent PNG layer. Before extraction, Codex-Canvas trims a narrow boundary band when source pixels match the nearby outside region better than the object interior, which reduces generic segmentation halos without object-specific rules. For block-like or solid regions, it may also flood inward from the outside through connected pixels that still look like nearby outside color, stopping before object interiors; thin text/brush-like regions are shape-gated out of this stronger cleanup. Codex-Canvas then applies a small foreground mask safety band so slightly underfilled segmentation edges remain with the editable object instead of being stranded in the residual background. The safety band is constrained by local source-image color continuity from the original mask boundary, and pixels not claimed by the original segmentation may be shared by adjacent objects so dragged-out elements keep complete edges without case-specific object rules.
  9. All remaining pixels first become a transparent residual background layer. Codex-Canvas imports that residual background immediately with the transparent object/text layers, then sends the original image plus that residual background layer through a background-completion imagegen pass to create a full-frame background with removed objects filled in.
  10. The segmentation map and background-completion raw output are internal job artifacts and should not appear as canvas objects. The only canvas background object is the imported residual background layer; when completion finishes, Codex-Canvas replaces that same layer asset in place.
  11. Collected layers are stacked at their original relative positions, with the background as the bottom layer, so the group reconstructs the source composition when layered before and after background completion.
  12. Collected layers keep shared layerGroupId metadata for reset, layer-order controls, and PSD export, but they should start unlocked so the user can immediately drag individual elements. The canvas may offer a separate Group control when the user wants to move all associated layers as one unit.
  13. When a user downloads any member of an Edit Elements layer group, Codex-Canvas should export the whole associated layer set as a PSD with one Photoshop layer per canvas image layer.
Show full SKILL.md (22 more words)Show less

Do not ask follow-up questions from a background Edit Elements job. Make the most reasonable general-purpose element separation from the selected image.

© Xiangyu-CAS, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 1 other file in skills/canvas-edit-elements of Xiangyu-CAS/codex-canvas.

  • SKILL.md
  • archived-prompts.md

Open the folder on GitHubat commit b801839

Compare with similar skills

Canvas Edit Elements next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Canvas Edit Elements compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Canvas Edit Elements this skillXiangyu-CAS/codex-canvas135—~1.1kAutomated safety check: PassMIT
Canvasopenclaw/openclaw392k—~263Automated safety check: PassMIT
Canva Designerasgeirtj/system_prompts_leaks69k—~2.1kAutomated safety check: PassCC0-1.0
Homelab Vlan Segmentationaffaan-m/ECC275k1 repos~2.5kAutomated safety check: PassMIT
Select Namethedaviddias/Front-End-Checklist74k—~451Automated safety check: PassMIT
Token Mapnexu-io/open-design100k—~1.4kAutomated safety check: PassApache-2.0

Similar skills

  • Canvas

    openclaw/openclaw

    Present hosted widget documents on a connected macOS panel and control panel visibility or navigation.

    392k GitHub stars~263 tokensUpdated today
    Auto-check passed
  • Canva Designer

    asgeirtj/system_prompts_leaks

    Creates and edits Canva designs, generates images and works with brand kits through the canva CLI and Canva's official MCP server, from decks to social posts.

    69k GitHub stars~2.1k tokensUpdated yesterday
    Media & CreativeAuto-check passed
  • Segmenting home networks into VLANs for IoT, guest, trusted, and server traffic using UniFi, pfSense/OPNsense, and MikroTik — including switch trunk config, firewall rules, and wireless SSID mapping.

    275k GitHub starsUsed in 1 repo~2.5k tokens
    DevOps & CloudAuto-check passed
  • Select Name

    thedaviddias/Front-End-Checklist

    A skill your agent uses when reviewing rendered HTML, interactive components, or design-system patterns related to Provide accessible names for select elements.

    74k GitHub stars~451 tokensUpdated 2 days ago
    Frontend & DesignAuto-check passed
  • Token Map

    nexu-io/open-design

    Map an extracted Figma / source-code token bag onto the active OD design system, producing a deterministic mapping the generate stage can consume.

    100k GitHub stars~1.4k tokensUpdated today
    Frontend & DesignAuto-check passed
  • Official

    Load when the request depends on what is already on this instance rather than on what the user just typed: a short or ambiguous opener ("fix it", "carry on", "what should I look at"), a reference to…

    207k GitHub stars~1.4k tokensUpdated today
    Productivity & AutomationAuto-check passed

More from Xiangyu-CAS/codex-canvas

  • Codex Canvas

    Xiangyu-CAS/codex-canvas

    安装、更新并使用 Codex-Canvas。通过 Red SkillHub 或其他 Skill 渠道获得本 Skill 后,继续把最新稳定版 Codex-Canvas 安装为 Codex personal plugin;Skill 安装不是终态。适用于用户要求安装或升级 codex-canvas、输入 /canvas、打开本地无限画布、收集生成图片、把画布图片发送回 Codex 对话,或运行…

    135 GitHub stars~880 tokensUpdated 7 days ago
    Auto-check passed
  • Canvas

    Xiangyu-CAS/codex-canvas

    Open and use Codex-Canvas, a project-local infinite canvas for Codex image generation.

    135 GitHub stars~1.7k tokensUpdated 7 days ago
    Auto-check passed
  • Canvas Quick Edit

    Xiangyu-CAS/codex-canvas

    Run a user-described Quick Edit on a selected Codex-Canvas image and collect the result back onto the canvas.

    135 GitHub stars~505 tokensUpdated 7 days ago
    Auto-check passed
  • Canvas Edit Text

    Xiangyu-CAS/codex-canvas

    Recognize visible text in a selected Codex-Canvas image, apply a user-described text edit with imagegen, and collect the result back onto the canvas.

    135 GitHub stars~365 tokensUpdated 7 days ago
    Auto-check passed
  • Canvas Expand

    Xiangyu-CAS/codex-canvas

    Outpaint a selected Codex-Canvas image beyond its current frame and collect the expanded image back onto the canvas.

    135 GitHub stars~390 tokensUpdated 7 days ago
    Auto-check passed
  • Canvas Remove Bg

    Xiangyu-CAS/codex-canvas

    Remove the background from a selected Codex-Canvas image and collect a transparent PNG result back onto the canvas.

    135 GitHub stars~400 tokensUpdated 7 days ago
    Auto-check passed

Questions about Canvas Edit Elements

What does Canvas Edit Elements do?

Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas. Canvas Edit Elements is an agent skill from Xiangyu-CAS/codex-canvas. Generate an instance segmentation map for a selected Codex-Canvas image, split the source into transparent element layers, and collect the layers back onto the canvas.

How do I install Canvas Edit Elements in Claude Code?

Run `npx skills add Xiangyu-CAS/codex-canvas --skill canvas-edit-elements -a claude-code`. Or copy the skill folder (skills/canvas-edit-elements in Xiangyu-CAS/codex-canvas) into .claude/skills/canvas-edit-elements in your project. Claude Code loads it when a task matches its description.

How do I install Canvas Edit Elements in Codex?

Run `npx skills add Xiangyu-CAS/codex-canvas --skill canvas-edit-elements -a codex`. Or copy the skill folder (skills/canvas-edit-elements in Xiangyu-CAS/codex-canvas) into .agents/skills/canvas-edit-elements in your project. Codex loads it when a task matches its description.

Can I use Canvas Edit Elements in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add Xiangyu-CAS/codex-canvas --skill canvas-edit-elements -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/canvas-edit-elements, .gemini/skills/canvas-edit-elements, .github/skills/canvas-edit-elements and .opencode/skills/canvas-edit-elements in your project.

What does Canvas Edit Elements need to run?

SKILL.md names no scripts, command-line tools or credentials: Canvas Edit Elements is instructions for the agent only.

Does Canvas Edit Elements access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Canvas Edit Elements safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Canvas Edit Elements use?

Canvas Edit Elements is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Canvas Edit Elements use?

About 1.1k tokens (SKILL.md is roughly 4.5k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Canvas Edit Elements?

Skills that share tags, products or a category with Canvas Edit Elements: Canvas (openclaw/openclaw, 392k stars), Canva Designer (asgeirtj/system_prompts_leaks, 69k stars), Homelab Vlan Segmentation (affaan-m/ECC, 275k stars) and Select Name (thedaviddias/Front-End-Checklist, 74k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Canvas Edit Elements?

Xiangyu-CAS (a GitHub user) maintains it in Xiangyu-CAS/codex-canvas, which has 135 GitHub stars. The repository holds 7 skills in this directory. The repository was last updated on October 1, 2026.

Source: Xiangyu-CAS/codex-canvas on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.