mendixlabs

SVG Sketch Style — Design skill for Claude Code

Design community

SVG Sketch Style Guide — PoC Diagrams.

How to install SVG Sketch Style

Installs to ~/.claude/skills/mendixlabs-mxcli-svg-sketch-style/SKILL.md

Terminal

mkdir -p ~/.claude/skills/mendixlabs-mxcli-svg-sketch-style && curl -fsSL https://raw.githubusercontent.com/mendixlabs/mxcli/HEAD/.claude/skills/svg-sketch-style.md -o ~/.claude/skills/mendixlabs-mxcli-svg-sketch-style/SKILL.md

Restart Claude Code, or start a new session, for it to be picked up.

What SVG Sketch Style does

SVG Sketch Style Guide — PoC Diagrams

**When to use:** Apply this style to ALL hand-built SVG diagrams (ELK system overview, any future SVG rendered in webviews). This communicates "proof of concept / draft" and prevents stakeholders from perceiving diagrams as final/productized.

**Where SVGs are generated:** `vscode-mdl/src/previewProvider.ts` in the `renderSvg()` function and `getElkWebviewContent()`. Any new diagram type that builds SVG strings must follow this guide.

Core Principles

Alternatives in Design

Brand Guidelines — Apply Anthropic's official brand colors and typography to artifacts 94.1k ★
Export Diagram — Export a diagram-design HTML file to .svg and .png next to the source 27.2k ★
Weather Orchestrator Command — Fetch the current temperature for Dubai, UAE and create a visual SVG weather card 20.2k ★