How do I install the Sketch skill?

Run npx skillmds@latest add levalencia/sketch in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Sketch skill do?

Sketch - Collaborative SVG Canvas It is listed under Coding & Dev Tools on SkillMD.

Is Sketch safe to use?

SkillMD's automated safety review verdict for this skill is PASS. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. Capability flags: makes network calls. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Sketch?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Sketch free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Sketch?

levalencia (@levalencia) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Sketch by levalencia — Agent Skill

Name: Sketch
Rating: 4.5 (4 reviews)
Author: levalencia

File contents

Sketch - Collaborative SVG Canvas

Description

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

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

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

---name: sketchdescription: Sketch - Collaborative SVG Canvas---# Sketch - Collaborative SVG Canvas## DescriptionOpens a Fabric.js-based SVG editor in the browser for collaborative visual prototyping. Claude can write and read SVG through MCP tools while the user edits interactively. Changes sync in real-time via WebSocket.## 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_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 sketch1. `sketch_open_canvas` with a name2. `sketch_set_svg` or `sketch_add_element` to draw3. User edits in browser4. `sketch_get_svg` to see changes### Streaming (real-time build-up)1. `sketch_open_canvas` with a name2. `sketch_focus_canvas` to bring window to front3. `sketch_clear_canvas` to start fresh4. Call `sketch_add_element` multiple times -- each fragment appears instantly5. User watches the UI build up in real-time### Multiple canvasesEach canvas opens in its own browser tab. Use different names for different drawings.### 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

Frequently asked questions

Sketch