AgentSkillsCN

Sketch

草图

SKILL.md

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

  1. •sketch_open_canvas with a name
  2. •sketch_set_svg or sketch_add_element to draw
  3. •User edits in browser
  4. •sketch_get_svg to see changes

Streaming (real-time build-up)

  1. •sketch_open_canvas with a name
  2. •sketch_focus_canvas to bring window to front
  3. •sketch_clear_canvas to start fresh
  4. •Call sketch_add_element multiple times -- each fragment appears instantly
  5. •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