All skills

SVG Precision

Deterministic SVG generation, validation, and rendering

v1.0.0 Skill dkyazzentwatwa /rvanbaalen:svg-precision Source
/plugin install svg-precision@rvanbaalen

When to use

Use for icons, diagrams, charts, UI mockups, or technical drawings that require structural correctness and cross-viewer compatibility. This skill generates SVGs from a strict JSON spec, validates them, and optionally renders PNG previews.

How it works

  1. Translates your request into a structured JSON spec (scene graph)
  2. Builds the SVG using deterministic rules
  3. Validates the output for structural correctness
  4. Optionally renders a PNG preview via CairoSVG

Design rules

  • Always sets explicit viewBox, width, and height
  • Prefers absolute coordinates over transforms
  • Keeps numbers sane (no NaN/inf, rounds to 3-4 decimals)
  • Reusable items go in defs (markers, gradients, clipPaths)
  • Avoids exotic filters unless required for cross-viewer safety

Default canvas sizes

TypeSize
Icons24x24 or 32x32
UI mockups1440x900 or 390x844 (mobile)
Charts800x450
Diagrams1200x800

Invoke

/rvanbaalen:svg-precision