Agent skill

Sketch

Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping.

Install Sketch

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a claude-code

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

GitHub CLI

$ gh skill install glebis/claude-skills sketch --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/glebis/claude-skills.git skills-src && mkdir -p .claude/skills && cp -r skills-src/sketch .claude/skills/sketch && 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/

Paste into Claude Code

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .claude/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

$skill-installer

$skill-installer install https://github.com/glebis/claude-skills/tree/main/sketch

Type this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a codex

Project install goes to .agents/skills/; add -g for ~/.codex/skills/.

GitHub CLI

$ gh skill install glebis/claude-skills sketch --agent codex

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .agents/skills && cp -r skills-src/sketch .agents/skills/sketch && rm -rf skills-src

Use ~/.agents/skills/ instead of .agents/skills for a personal install.

Codex skills documentation · loads skills from .agents/skills/

Paste into Codex

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .agents/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a cursor

Project install goes to .agents/skills/; add -g for ~/.cursor/skills/.

GitHub CLI

$ gh skill install glebis/claude-skills sketch --agent cursor

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/sketch .cursor/skills/sketch && rm -rf skills-src

Use ~/.cursor/skills/ instead of .cursor/skills for a personal install.

Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/

Paste into Cursor

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .cursor/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

gemini skills install

$ gemini skills install https://github.com/glebis/claude-skills.git --path sketch

--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a gemini-cli

Project install goes to .agents/skills/; add -g for ~/.gemini/skills/.

GitHub CLI

$ gh skill install glebis/claude-skills sketch --agent gemini-cli

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/sketch .gemini/skills/sketch && rm -rf skills-src

Use ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.

Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/

Paste into Gemini CLI

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .gemini/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

GitHub CLI

$ gh skill install glebis/claude-skills sketch

Installs for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a github-copilot

Project install goes to .agents/skills/; add -g for ~/.copilot/skills/.

Manual copy

$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .github/skills && cp -r skills-src/sketch .github/skills/sketch && rm -rf skills-src

Use ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.

GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/

Paste into GitHub Copilot

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .github/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

skills CLI

$ npx skills add glebis/claude-skills --skill sketch -a opencode

OpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.

GitHub CLI

$ gh skill install glebis/claude-skills sketch --agent opencode

Project scope by default (.agents/skills/); add --scope user for a personal install.

Manual copy

$ git clone --depth 1 https://github.com/glebis/claude-skills.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/sketch .opencode/skills/sketch && rm -rf skills-src

Use ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.

OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/

Paste into OpenCode

Install the "sketch" agent skill from https://github.com/glebis/claude-skills/tree/main/sketch into .opencode/skills/sketch/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "sketch", then confirm the skill loads.

OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.

Facts

Skill name: sketch
GitHub stars: 390
Token cost: ~1.2k tokens
SKILL.md length: 534 words
Files: 2
Skills in repo: 92
Repo updated: Oct 8, 2026
First seen: Oct 7, 2026
Licence: MIT

At a glance

Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping.

Works in 4 steps: sketch_open_canvas with a name → sketch_set_svg or sketch_add_element to… → User edits in browser → …
Visual sketches
SKILL.md covers Description, Preflight, Tools Available (via… and Usage Patterns, plus 1 more section
Reaches w3.org

What it does

Sketch is an agent skill from glebis/claude-skills. Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping. Codex writes and reads SVG through MCP tools while the user edits interactively. Changes sync in real-time via WebSocket. Use for wireframes, diagrams, schemes, UI mockups, and visual sketches. Triggers on "open sketch", "sketch canvas", "draw in browser", "fabric canvas".

Its SKILL.md is about 1.2k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files (for example `.claude-plugin/plugin.json`).

It sits in Backend & APIs, covering UI design, Realtime and WebSockets and Prototyping. The repository describes itself as: Collection of Claude Code skills for enhanced AI workflows. The licence is MIT.

When your agent uses it

Visual sketches
Draw in browser

Example prompts

“open sketch”
“sketch canvas”
“draw in browser”
“/sketch”

Workflow steps

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

sketch_open_canvas with a name
sketch_set_svg or sketch_add_element to draw
User edits in browser
sketch_get_svg to see changes

What it can do on your machine

Read from SKILL.md and the folder at commit 3b88261. 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 (its code samples are bash).
From the folder's file list and the shell code blocks in SKILL.md.
Network
Hosts in commands or code, which the agent is likely to contact:
- w3.org
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

Sketch loads about 1.2k tokens when it runs. Until then it costs about 92 tokens; SKILL.md has 534 words of instructions outside code blocks.

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

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 glebis/claude-skills at commit 3b88261, republished under its MIT licence (© glebis). 534 words, ~1,158 tokens.

Download SKILL.mdSave it as .claude/skills/sketch/SKILL.md (or your agent's skills folder). This skill also uses 1 other file; get the full folder from GitHub.

name: sketch
description: Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping. Codex writes and reads SVG through MCP tools while the user edits interactively. Changes sync in real-time via WebSocket. Use for wireframes, diagrams, schemes, UI mockups, and visual sketches. Triggers on "open sketch", "sketch canvas", "draw in browser", "fabric canvas".

Sketch - Collaborative SVG Canvas

Description

Opens a Fabric.js-based SVG editor in the browser for collaborative visual prototyping. Codex can write and read SVG through MCP tools while the user edits interactively. Changes sync in real-time via WebSocket.

Preflight

If the editor shows "disconnected" or WebSocket errors occur, stale server processes may be blocking. Run this before retrying:

bash

pkill -f 'sketch-mcp-server/dist/index.js'

Then reconnect the MCP server (the next tool call will restart it). The server now auto-kills stale instances on startup, but orphaned processes from before this fix may still linger.

Tools Available (via sketch-mcp-server)

sketch_open_canvas - Open a named canvas (creates if new), launches browser editor
sketch_get_svg - Read current SVG from a canvas
sketch_set_svg - Replace entire canvas with new SVG
sketch_add_element - Add SVG elements without clearing existing content
sketch_add_textbox - Add a fixed-width text area (Textbox) with word wrapping
sketch_lock_objects - Lock all current objects (non-selectable, non-movable)
sketch_unlock_objects - Unlock all objects
sketch_save_template - Save canvas as reusable JSON template (preserves Textbox widths + lock state)
sketch_load_template - Load a saved JSON template into a canvas
sketch_list_templates - List all saved templates
sketch_set_zoom - Set zoom level (1.0 = 100%), optionally zoom toward a specific point
sketch_pan_to - Pan the viewport so (x, y) is at the top-left
sketch_zoom_to_fit - Fit all content in view with padding (call after drawing)
sketch_capture_screenshot - Capture a PNG screenshot of the canvas (returns image for visual verification)
sketch_clear_canvas - Clear canvas to blank state (use before streaming)
sketch_focus_canvas - Bring canvas window to foreground
sketch_list_canvases - List all active canvases
sketch_close_canvas - Close a canvas and its browser tab

Usage Patterns

Quick sketch

sketch_open_canvas with a name
sketch_set_svg or sketch_add_element to draw
User edits in browser
sketch_get_svg to see changes

Streaming (real-time build-up)

sketch_open_canvas with a name
sketch_focus_canvas to bring window to front
sketch_clear_canvas to start fresh
Call sketch_add_element multiple times -- each fragment appears instantly
User watches the UI build up in real-time

Multiple canvases

Each canvas opens in its own browser tab. Use different names for different drawings.

Show full SKILL.md (209 more words)Show less

Default Visual Style

When generating prototypes, wireframes, diagrams, or schemes, use a minimalist style unless the user specifies otherwise:

Colors: White/light gray background, black/dark gray for strokes and text. No fills on shapes unless semantically meaningful. Avoid decorative color.
Strokes: Thin (1-2px), consistent weight. Use slightly heavier weight (2-3px) for emphasis only.
Typography: Clean, sans-serif. Use size hierarchy for structure (e.g., 24px headings, 16px body, 12px labels). Black or #333 text.
Shapes: Simple rectangles, lines, circles. Rounded corners (rx=4-8) for UI elements. No drop shadows or gradients.
Layout: Generous whitespace. Align elements to a grid. Clear visual hierarchy through size and spacing, not color.
Annotations: Use thin arrows and small labels. Keep secondary to the content.

Only introduce color when it carries meaning (e.g., red for errors, green for success, blue for interactive elements) or when the user explicitly requests a colored/branded style.

SVG tips

Use standard SVG elements: <rect>, <circle>, <ellipse>, <line>, <path>, <text>, <polygon>, <polyline>
Include xmlns="http://www.w3.org/2000/svg" on the root <svg> element
Set width and height on the root SVG (default: 1200x800)
Colors: use hex colors (#ff0000) -- avoid rgba() as Fabric.js SVG parser may not handle it
Text: <text x="100" y="100" font-size="24">Hello</text>
Images: <image href="data:image/png;base64,..." width="200" height="200"/>
Avoid <defs>, <linearGradient>, <filter> -- Fabric.js has limited support for these

Files

SKILL.md and 1 other file in sketch of glebis/claude-skills.

SKILL.md
.claude-plugin/plugin.json

Open the folder on GitHubat commit 3b88261

Compare with similar skills

Sketch 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.

Sketch compared with similar skills
Skill	Stars	Used in	Tokens	Auto-check	Licence	Repo updated
Sketch this skillglebis/claude-skills	390	—	~1.2k	Automated safety check: Pass	MIT	yesterday
Fast Agent Designevalstate/fast-agent	3.9k	—	~220	Automated safety check: Pass	Apache-2.0	yesterday
Azure Diagramscmb211087/azure-diagrams-skill	150	—	~4k	Automated safety check: Notes	MIT	3 mo ago
Sf Diagram NanobananaproJaganpro/sf-skills	424	—	~1.6k	Automated safety check: Pass	MIT	5 mo ago
Apex Python Diagramsjonathan-vella/apex	217	—	~2k	Automated safety check: Pass	MIT	yesterday
Agents SDKhodgef/apiker	127	3 repos	~3k	Automated safety check: Pass	MIT	1 mo ago

Similar skills

Fast Agent Design
evalstate/fast-agent
A skill your agent uses to generate well-branded interfaces and assets for fast-agent, either for production or throwaway prototypes/mocks/etc.
3.9k GitHub stars~220 tokensUpdated yesterday
Frontend & DesignAuto-check passed
Azure Diagrams
cmb211087/azure-diagrams-skill
Comprehensive technical diagramming toolkit for solutions architects, presales, and developers.
150 GitHub stars~4k tokensUpdated 3 mo ago
DevOps & CloudAuto-check: notes
Sf Diagram Nanobananapro
Jaganpro/sf-skills
AI-powered image generation for Salesforce visuals via Nano Banana Pro.
424 GitHub stars~1.6k tokensUpdated 5 mo ago
Media & CreativeAuto-check passed
Apex Python Diagrams
jonathan-vella/apex
UTILITY SKILL — Python diagram generation for Azure architectures, WAF/cost/compliance charts, ERDs, swimlanes, timelines, and wireframes.
217 GitHub stars~2k tokensUpdated yesterday
DevelopmentAuto-check passed
Agents SDK
hodgef/apiker
Build AI agents on Cloudflare Workers using the Agents SDK. An agent skill from hodgef/apiker.
127 GitHub starsUsed in 3 repos~3k tokens
Backend & APIsAuto-check passed
Ln 25 Architecture Diagram Builder
levnikolaevich/claude-code-skills
Creates evidence-backed current or target architecture diagrams; not UI design.
572 GitHub stars~2.3k tokensUpdated 4 days ago
DevelopmentAuto-check passed

Questions about Sketch

What does Sketch do?

Open a Fabric.js-based SVG editor in the browser for collaborative visual prototyping. Sketch is an agent skill from glebis/claude-skills.js-based SVG editor in the browser for collaborative visual prototyping.

When should I use Sketch?

Sketch fits situations like: visual sketches; draw in browser.

How do I install Sketch in Claude Code?

Run `npx skills add glebis/claude-skills --skill sketch -a claude-code`. Or copy the skill folder (sketch in glebis/claude-skills) into .claude/skills/sketch in your project. Claude Code loads it when a task matches its description.

How do I install Sketch in Codex?

Run `npx skills add glebis/claude-skills --skill sketch -a codex`. Or copy the skill folder (sketch in glebis/claude-skills) into .agents/skills/sketch in your project. Codex loads it when a task matches its description.

Can I use Sketch 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 glebis/claude-skills --skill sketch -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/sketch, .gemini/skills/sketch, .github/skills/sketch and .opencode/skills/sketch in your project.

What does Sketch need to run?

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

Does Sketch access the network?

SKILL.md names 1 domain. In commands or code: w3.org; the agent is likely to contact it when it follows the instructions. This is read from the text; nothing was executed.

Is Sketch 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 Sketch use?

Sketch 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 Sketch use?

About 1.2k tokens (SKILL.md is roughly 4.6k 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 Sketch?

Skills that share tags, products or a category with Sketch: Fast Agent Design (evalstate/fast-agent, 3.9k stars), Azure Diagrams (cmb211087/azure-diagrams-skill, 150 stars), Sf Diagram Nanobananapro (Jaganpro/sf-skills, 424 stars) and Apex Python Diagrams (jonathan-vella/apex, 217 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Sketch?

glebis (a GitHub user) maintains it in glebis/claude-skills, which has 390 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 8, 2026.

Source: glebis/claude-skills on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.

Install Sketch

Facts

At a glance

What it does

When your agent uses it

Example prompts

Workflow steps

What it can do on your machine

Tool permissions

Runs code

Network

Credentials

Context cost

Safety

SKILL.md

Sketch - Collaborative SVG Canvas

Description

Preflight

Tools Available (via sketch-mcp-server)

Usage Patterns

Quick sketch

Streaming (real-time build-up)

Multiple canvases

Default Visual Style

SVG tips

Files

Compare with similar skills

Similar skills

More from glebis/claude-skills

Related

Questions about Sketch