dkyazzentwatwa / svg-precision
Install for your project team
Run this command in your project directory to install the skill for your entire team:
mkdir -p .claude/skills/svg-precision && curl -L -o skill.zip "https://fastmcp.me/Skills/Download/405" && unzip -o skill.zip -d .claude/skills/svg-precision && rm skill.zipProject Skills
This skill will be saved in .claude/skills/svg-precision/ and checked into git. All team members will have access to it automatically.
Important: Please verify the skill by reviewing its instructions before using it.
Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.
0 views
0 installs
Skill Content
--- name: svg-precision description: Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility. --- # svg-precision Generate *structurally correct* SVGs from a strict JSON spec (scene graph), then validate and optionally render a PNG preview. ## Fast path 1) Turn the user request into a **Spec JSON** (use templates in `references/spec.md`). 2) Build the SVG: - `python scripts/svg_cli.py build spec.json out.svg` 3) Validate: - `python scripts/svg_cli.py validate out.svg` 4) (Optional) Render a PNG preview (requires CairoSVG): - `python scripts/svg_cli.py render out.svg out.png --scale 2` ## Spec design rules (for accuracy) - Always set `canvas.viewBox` and explicit `canvas.width`/`canvas.height`. - Prefer absolute coordinates; use transforms only when they reduce complexity. - Keep numbers sane: no NaN/inf; round to 3-4 decimals. - Put reusable items in `defs` (markers, gradients, clipPaths) and reference by id. - For predictable results across viewers, avoid exotic filters unless required. - Text varies by fonts/viewers. If you need pixel-identical results, treat text as a risk and prefer shapes. ## Using the bundled scripts ### CLI - `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) ### As a library (in Python) ```py from svg_skill import build_svg, validate_svg svg_text = build_svg(spec_dict) report = validate_svg(svg_text) ``` ## When the request is vague 1) Identify the *kind* of SVG: icon / diagram / chart / UI / technical. 2) Pick a template from `references/spec.md` and fill in concrete numbers. 3) If dimensions are unknown, choose defaults that match the domain: - icons: 24x24 or 32x32 - UI mockups: 1440x900 or 390x844 (mobile) - charts: 800x450 - diagrams: 1200x800 - technical drawings: specify units (mm/in) and scale ## References - `references/spec.md` - schema + ready-to-copy templates per SVG type - `references/recipes.md` - layout and styling patterns that render consistently