sketch-lab

name	sketch-lab
description	Generate Sketch Lab architecture diagrams and open them via a share URL. Use when the user asks for a Sketch Lab diagram, sketchlab.app board, 3D floor stack diagram, architecture sketch to open in Sketch Lab, or to emit GeneratedGraph JSON for Sketch Lab. Not for Mermaid, Excalidraw, or Mission Control diagram modals.

Sketch Lab diagrams

Produce a GeneratedGraph JSON object, then open it in Sketch Lab with a ?g= URL. Do not emit Mermaid, ASCII art, or markdown fences around the JSON when building the URL.

App origin (production): https://sketchlab.webdevcody.com

Override if the user gives another base (e.g. http://localhost:5173).

Workflow

1. Draft a GeneratedGraph that matches the schema below.
2. Prefer 4–14 nodes unless the user asks for more (hard cap 48 nodes / 96 edges / 48 floors).
3. Build and open:

{ORIGIN}/?g={URI_ENCODED_JSON}

Example (shell — works without lz-string):

ORIGIN="${SKETCHLAB_ORIGIN:-https://sketchlab.webdevcody.com}"
JSON='{"name":"Demo","layers":[],"nodes":[{"id":"api","label":"API","kind":"icon","icon":"microservice","color":"#0f2740","layer":0}],"edges":[]}'
open "${ORIGIN}/?g=$(python3 -c 'import urllib.parse,sys; print(urllib.parse.quote(sys.argv[1], safe=""))' "$JSON")"

On Linux use xdg-open instead of open. Tell the user the URL if you cannot open a browser.

4. Briefly confirm what you opened (board name + node count). Do not paste the full JSON unless they ask.

Schema

{
  "name": "string (optional)",
  "layers": [{ "name": "string", "color": "#RRGGBB" }],
  "nodes": [{
    "id": "string",
    "label": "string",
    "kind": "rect | circle | icon | text",
    "icon": "string (icon key when kind is icon)",
    "color": "#RRGGBB",
    "layer": 0
  }],
  "edges": [{
    "from": "node id",
    "to": "node id",
    "label": "string",
    "directed": true
  }]
}

Rules:

• nodes required, ≥1. id unique. Edges must reference existing ids; no self-loops.
• Use "kind": "icon" for services, DBs, queues, clouds, users, clients, infra.
• Use "kind": "text" only for annotations. Prefer "kind": "rect" / "circle" sparingly.
• Colors: dark-canvas fills like #0f2740; floor accents bright (#38bdf8, #4ade80, #fbbf24, #fb923c, #f472b6, #c084fc).
• Prefer directed edges for request/data/dependency flow.
• Floors: layers is bottom→top. Each node’s layer is a 0-based floor index. Use 2–5 floors when the system has natural tiers (e.g. Data → App → Edge → Client). For a flat diagram: "layers": [] and "layer": 0 on every node.
• Icon keys must be from the list below (unknown icons fall back to microservice).

Icon keys

server, container, kubernetes, vm, function, microservice, cpu, memory, router, switch, firewall, load-balancer, gateway, proxy, dns, cdn, wifi, network, vpn, globe, database, cache, table, bucket, disk, archive, file, folder, queue, event-bus, stream, webhook, bell, alert, chat, mail, feed, browser, desktop, laptop, phone, tablet, gauge, chart, logs, dashboard, git, repo, pipeline, package, terminal, code, gear, rocket, bug, bot, neural, search, lock, key, shield, vault, certificate, fingerprint, user, users, id-badge, cloud, datacenter, location, calendar, clock, sync, upload, download, link, tag, flag, toggle, filter, workflow, decision, bolt, check, star, heart

Examples

Flat request path

{
  "name": "Checkout API",
  "layers": [],
  "nodes": [
    { "id": "web", "label": "Web", "kind": "icon", "icon": "browser", "color": "#0f2740", "layer": 0 },
    { "id": "api", "label": "API", "kind": "icon", "icon": "microservice", "color": "#0f2740", "layer": 0 },
    { "id": "db", "label": "Postgres", "kind": "icon", "icon": "database", "color": "#0f2740", "layer": 0 }
  ],
  "edges": [
    { "from": "web", "to": "api", "label": "HTTPS", "directed": true },
    { "from": "api", "to": "db", "label": "SQL", "directed": true }
  ]
}

Floored stack

{
  "name": "SaaS stack",
  "layers": [
    { "name": "Data", "color": "#38bdf8" },
    { "name": "App", "color": "#4ade80" },
    { "name": "Edge", "color": "#fbbf24" }
  ],
  "nodes": [
    { "id": "db", "label": "DB", "kind": "icon", "icon": "database", "color": "#0f2740", "layer": 0 },
    { "id": "api", "label": "API", "kind": "icon", "icon": "microservice", "color": "#0f2740", "layer": 1 },
    { "id": "cdn", "label": "CDN", "kind": "icon", "icon": "cdn", "color": "#0f2740", "layer": 2 }
  ],
  "edges": [
    { "from": "cdn", "to": "api", "label": "", "directed": true },
    { "from": "api", "to": "db", "label": "", "directed": true }
  ]
}

Install this skill

Anyone can install from the live site (after deploy):

mkdir -p ~/.claude/skills/sketch-lab
curl -fsSL https://sketchlab.webdevcody.com/skills/sketch-lab/SKILL.md \
  -o ~/.claude/skills/sketch-lab/SKILL.md

Or point Claude Code at the folder URL / raw SKILL.md and ask it to install into ~/.claude/skills/sketch-lab/.

Project-local copy:

mkdir -p .claude/skills/sketch-lab
curl -fsSL https://sketchlab.webdevcody.com/skills/sketch-lab/SKILL.md \
  -o .claude/skills/sketch-lab/SKILL.md

Restart the Claude Code session after installing.

Do not

• Emit Mermaid for Sketch Lab (wrong product format).
• Use invented icon names.
• Put more than 48 nodes or hardcode layouts/x,y (Sketch Lab auto-layouts).
• Use the Mission Control /api/diagram Mermaid skill for Sketch Lab boards.