glebis/sketch
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
$ install --global
skillsauthnpx skillsauth add glebis/claude-skills sketchInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 22, 2026, 8:49 PM224.4s1 file scanned
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 editorsketch_get_svg- Read current SVG from a canvassketch_set_svg- Replace entire canvas with new SVGsketch_add_element- Add SVG elements without clearing existing contentsketch_add_textbox- Add a fixed-width text area (Textbox) with word wrappingsketch_lock_objects- Lock all current objects (non-selectable, non-movable)sketch_unlock_objects- Unlock all objectssketch_save_template- Save canvas as reusable JSON template (preserves Textbox widths + lock state)sketch_load_template- Load a saved JSON template into a canvassketch_list_templates- List all saved templatessketch_clear_canvas- Clear canvas to blank state (use before streaming)sketch_focus_canvas- Bring canvas window to foregroundsketch_list_canvases- List all active canvasessketch_close_canvas- Close a canvas and its browser tab
Usage Patterns
Quick sketch
sketch_open_canvaswith a namesketch_set_svgorsketch_add_elementto draw- User edits in browser
sketch_get_svgto see changes
Streaming (real-time build-up)
sketch_open_canvaswith a namesketch_focus_canvasto bring window to frontsketch_clear_canvasto start fresh- Call
sketch_add_elementmultiple 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
widthandheighton the root SVG (default: 1200x800) - Colors: use hex colors (
#ff0000) -- avoidrgba()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
Related Skills
glebis/release
documentation
VerifiedTrustedCommunity
Cut a software release and maintain a tiered compatibility policy. Use when the user wants to release, ship a version, bump the version, tag a release, write a changelog, or update COMPATIBILITY. Config-driven via release.config.json; bumps version files, runs a readiness gate, updates COMPATIBILITY.md tiers and deprecations, tags (→ release workflow), and reports closed issues. Teaches the underlying standards as it runs.
242SKILL.mdUpdated Jun 4, 2026
glebis/library-sync
development
VerifiedTrustedCommunity
Sync and manage bilingual (EN/RU) library content for agency-docs. Use when adding, updating, or reviewing library articles. Handles translation, sync checks, and Russian stylistic review.
242SKILL.mdUpdated Jun 4, 2026
glebis/job-babysitter
development
VerifiedTrustedCommunity
This skill should be used to watch a long-running background job (ffmpeg/media encode, qmd or other embedding/vector-DB run, batch agent/LLM pipeline, or a real-browser/agent-browser daemon) until it finishes or wedges, then deliver a verdict (done, needs-attention, or blocked) plus the exact next command, without burning dozens of manual poll commands. Triggers on "babysit this job", "watch this until it's done", "ping me when the encode/embed/batch finishes", "is this background process stuck", "monitor this ffmpeg/qmd run", or any request to wait on a long-running process and be told when it's complete or hung.
242SKILL.mdUpdated Jun 4, 2026
glebis/peer-agent-collaboration
development
VerifiedTrustedCommunity
Use when the user wants Claude Code, Codex, or other AI coding/business agents to work together as peers. This skill should be used whenever the user mentions coordinating Claude Code and Codex, agent handoffs, multi-agent workflows, parity, respect, pushback between agents, deciding which agent should lead, or turning a business/code workflow into a two-agent operating model.
242SKILL.mdUpdated Jun 4, 2026