mcpField
S
svg-precision-skill

svg-precision-skill

github.com/dkyazzentwatwaDesign & UI124276 installsUpdated 29w ago
Repository

About svg-precision-skill

svg-precision-skill guides agents through building SVGs from explicit scene specifications and validating them before delivery. It is suited to tasks requiring controlled dimensions, coordinates, and a visual preview.

Key features

  1. 01Specification-led SVG construction
  2. 02Reference templates and layout recipes
  3. 03SVG build and validation commands
  4. 04Optional PNG preview rendering

Use cases

  1. 01Creating SVGs with fixed dimensions and coordinates
  2. 02Validating SVG output before handoff
  3. 03Reviewing a quick PNG preview

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision-skill

After installing, type/svg-precision-skillin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

agents/
openai.yaml
references/
recipes.md
spec.md
scripts/
requirements.txt
self_test.py
svg_cli.py
scripts/examples/
bar_chart.json
diagram.json
icon_check.json
technical_dim.json
ui_card.json
scripts/svg_skill/
__init__.py
core.py
render.py
validate.py

Details

From the project README

SVG Precision Skill

Build SVGs from explicit scene specifications, then validate before handing them off.

Workflow

  1. Translate the request into a concrete spec with fixed dimensions and coordinates.
  2. Use references/spec.md for templates and references/recipes.md for stable layout patterns.
  3. Build the SVG with scripts/svg_cli.py build.
  4. Validate with scripts/svg_cli.py validate.
  5. Render a PNG preview when the user needs a quick visual check.

Rules

  • Set viewBox, width, and height explicitly.
  • Prefer absolute coordinates and simple shapes.
  • Treat text as risky when exact rendering matters.
  • Avoid exotic filters unless they are necessary and testable.

Comments

Markdown supported