Agent Canvas Setup Agent Skill

Dependency checker and installer for agent-canvas, agent-eyes, and canvas-edit skills. Use BEFORE running any canvas skill for the first time, or when canvas skills fail with import/browser errors. Triggers on "setup agent canvas", "install canvas dependencies", "canvas not working", "playwright not found", or any setup/installation request for canvas skills.

1k tokens

context cost

the whole folder, loaded on every use

files

instructions only

copies elsewhere

how many repositories repackaged it

532

stars on the repo

on the repository, not the skill itself

Install

one command, takes just this skill from the repository

npx skills add https://github.com/majiayu000/claude-skill-registry --skill agent-canvas-setup

What comes with it

864 bytes besides the instruction

metadata.json

The instruction itself

13 sections, as written by the author

Agent Canvas Setup

Checks and installs dependencies for the agent-canvas visual editing skills (agent-eyes, agent-canvas, canvas-edit).

Quick Check

Run this first to see what's needed:

uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py check

If all checks pass → Ready to use canvas skills.

If checks fail → Ask user about installation scope.

Installation Scopes

ALWAYS ask the user which scope they prefer before installing:

| Scope | What it does | Best for |

|-------|--------------|----------|

| temporary | Browsers installed globally, Python deps cached by uv on-demand (~/.cache/uv) | Most users - minimal footprint |

| local | Creates .venv in project with playwright installed | Projects wanting isolated deps |

| global | Installs browsers globally only (Python deps via uv) | Shared workstations |

Recommended Prompt to User

Agent Canvas needs some dependencies. How would you like to install them?

1. **temporary** (recommended) - Minimal footprint. Browsers installed to system cache, 
   Python packages managed on-demand by uv. Nothing added to your project.

2. **local** - Creates a .venv in this project with playwright. Good if you want 
   all dependencies tracked with the project.

3. **global** - Same as temporary. Browsers go to system cache.

Which do you prefer? (1/2/3 or temporary/local/global)

Multi-Agent Support

Agent Canvas can install skills for multiple AI agents. Use --agents to specify which agents:

| Agent | Skills Directory | Description |

|-------|------------------|-------------|

| claude | .claude/skills/ | Claude Code / Claude Desktop (default) |

| codex | .codex/skills/ | OpenAI Codex CLI |

| copilot | .github/skills/ | GitHub Copilot |

| cursor | .cursor/skills/ | Cursor IDE |

| windsurf | .windsurf/skills/ | Windsurf IDE |

| aider | .aider/skills/ | Aider |

Examples

# Install for Claude only (default)
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary

# Install for Claude and Copilot
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary --agents claude,copilot

# Install for all supported agents
uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py install --scope temporary --agents claude,copilot,cursor,windsurf,aider

Install Commands

SKILL_DIR=".claude/skills/agent-canvas-setup/scripts"

# Temporary (recommended) - uv handles Python deps on-demand
uv run $SKILL_DIR/check_setup.py install --scope temporary

# With multi-agent support
uv run $SKILL_DIR/check_setup.py install --scope temporary --agents claude,copilot

# Local - creates .venv in project
uv run $SKILL_DIR/check_setup.py install --scope local

# Global - browsers only (Python via uv)
uv run $SKILL_DIR/check_setup.py install --scope global

What Gets Installed

Always Required

uv - Must be pre-installed by user (provides instructions if missing)
Python 3.10+ - Must be pre-installed

Installed by Setup

Playwright Chromium (~200MB) - Browser binary for automation
Location: ~/.cache/ms-playwright/ (Mac/Linux)
This is the main "weight" of the installation

Python Packages (handled by uv)

playwright - Browser automation
axe-playwright-python - Accessibility scanning

For temporary and global scopes, these are cached in ~/.cache/uv/ and loaded on-demand when running scripts.

For local scope, these are installed to .venv/ in the project.

Error Recovery

If canvas skills fail, run check first:

uv run .claude/skills/agent-canvas-setup/scripts/check_setup.py check --json

Common issues:

Playwright Chromium: not found → Run install with any scope
uv package manager: not found → User must install uv first
Python 3.10+: need 3.10+ → User must upgrade Python

Workflow Integration

Before running any canvas skill for the first time:

Run check_setup.py check
If not ready, ask user about preferred scope
Run check_setup.py install --scope <choice>
Verify with check_setup.py check again
Proceed to canvas skill

Other skills for the same job

different authors, same section of the catalogue

Screenshot

by openai

vendor ×1

Use when the user explicitly asks for a desktop or system screenshot (full screen, specific app or window, or a pixel region), or when tool-specific capture capabilities are unavailable and an OS-level capture is needed.

13k tokens scripts

Ios Simulator Browser

by openai

vendor

Mirror an iOS Simulator into the Codex in-app browser and render SwiftUI previews from importable Swift packages in that simulator with hot reload. Use when a user wants to watch or interact with an iOS app in the browser, see a SwiftUI preview outside Xcode Canvas, iterate live on a preview, or capture browser-visible simulator proof.

18k tokens scripts

Doc Screenshots

by WordPress

Annotate UI screenshots with documentation callouts in Fellyph's established visual style — uniform-width orange arrows with white halos, double-stroke target outlines, numbered callout cards, dim overlays and a framed canvas. Use this whenever the user asks to annotate a screenshot, add arrows or callouts to a screenshot, create documentation images, highlight UI controls in a capture, or produce docs/tutorial visuals for Playground, Studio or any web UI — even if they just say "add arrows to this" or "make a docs screenshot".

9k tokens scripts

Create Imessage Mockup

by gooseworks-ai

Render pixel-accurate iMessage screenshot mockups (DM or group) from a thread JSON. Supports minimal, with-keyboard, and full iPhone 15 Pro frame variants. Outputs HTML + PNG.

19k tokens scripts

Goose Graphics Create Style

by gooseworks-ai

> End-to-end skill that turns a single reference image into a published Gooseworks style — analyzes the image, drafts the slim style spec, renders a hero example plus 2-3 additional formats via Playwright, writes the `gooseworks-style.json` manifest, and publishes via `npx gooseworks styles publish` so other agents can discover it. Mirrors goose-graphics-create-format but for styles.

5k tokens

Asc Screenshot Resize

by rorkai

Resize and validate App Store screenshots with current asc screenshot-size data and macOS sips. Use when preparing or fixing screenshots for App Store Connect submission.

927 tokens

Screenshot Automation

by rshankras

Generates an automated App Store screenshot pipeline with UI tests for screenshot capture, device framing, localized caption overlays, and multi-size batch export. Use when user wants automated screenshots, App Store screenshot generation, or a fastlane snapshot replacement.

23k tokens

Editorial Card Screenshot

by shaom

Generate high-density editorial HTML info cards in a modern magazine and Swiss-international style, then capture them as ratio-specific screenshots. Use when the user provides text or core information and wants: (1) a complete responsive HTML info card, (2) the design to follow the stored editorial prompt, (3) output in fixed visual ratios such as 3:4, 4:3, 1:1, 16:9, 9:16, 2.35:1, 3:1, or 5:2, or (4) both HTML and a rendered PNG cover/card from the same content.

11k tokens scripts

How to use it

Copy the folder

Take majiayu000/agent-canvas-setup from the repository into ~/.claude/skills for personal use, or into .claude/skills inside a project.

Check the name does not clash

The agent identifies a skill by the name field in its header. Two skills with the same name cannot sit side by side — one of them will be ignored.