Sketch

# 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