Stats
Actions
Tags
From rvanbaalen
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
How this skill is triggered — by the user, by Claude, or both
Slash command
/rvanbaalen:svg-precisionThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate *structurally correct* SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview.
references/recipes.mdreferences/spec.mdscripts/examples/bar_chart.jsonscripts/examples/diagram.jsonscripts/examples/icon_check.jsonscripts/examples/technical_dim.jsonscripts/examples/ui_card.jsonscripts/requirements.txtscripts/self_test.pyscripts/svg_cli.pyscripts/svg_skill/__init__.pyscripts/svg_skill/core.pyscripts/svg_skill/render.pyscripts/svg_skill/validate.pyGenerate structurally correct SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview.
references/spec.md).python scripts/svg_cli.py build spec.json out.svgpython scripts/svg_cli.py validate out.svgpython scripts/svg_cli.py render out.svg out.png --scale 2canvas.viewBox and explicit canvas.width/canvas.height.defs (markers, gradients, clipPaths) and reference by id.python scripts/svg_cli.py build <spec.json> <out.svg>python scripts/svg_cli.py validate <svg>python scripts/svg_cli.py render <svg> <out.png> [--scale N]python scripts/svg_cli.py diff <a.svg> <b.svg> <diff.png> [--scale N] (renders + image-diffs)from svg_skill import build_svg, validate_svg
svg_text = build_svg(spec_dict)
report = validate_svg(svg_text)
references/spec.md and fill in concrete numbers.references/spec.md - schema + ready-to-copy templates per SVG typereferences/recipes.md - layout and styling patterns that render consistentlynpx claudepluginhub rvanbaalen/skills --plugin svg-precisionCreates, edits, reviews, and validates high-quality SVG graphics with W3C compliance, CSS independence, accessibility, and safety.
Generates and edits SVG logos, icons, and graphics. Covers path commands, shape primitives, styling, accessibility, gradients, masks, sprites, optimization, and animation techniques like CSS keyframes and SVG-specific methods.
Generates 2D graphics programmatically using SVG construction, diagram layout, image compositing, and batch processing. For diagrams, flowcharts, infographics, scientific figures, and automated visual assets.