MCPInstall

svg-precision

by dkyazzentwatwaFrontend & Design

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

Installs
188
Last 24h
—
Trending rank
—
Security
Not audited

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads svg-precision automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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)

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

FAQ

What does the svg-precision skill do?

Deterministic SVG generation, validation, and rendering. Use for icons, diagrams, charts, UI mockups, or technical drawings requiring structural correctness and cross-viewer compatibility.

How do I install svg-precision?

Run npx skills add https://github.com/dkyazzentwatwa/chatgpt-skills --skill svg-precision in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/svg-precision/ (personal) or .claude/skills/svg-precision/ (project).

Which AI agents can use svg-precision?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is svg-precision safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains svg-precision?

It is published by dkyazzentwatwa in dkyazzentwatwa/chatgpt-skills. It has 188 recorded installs.

More from dkyazzentwatwa/chatgpt-skills

View all →

ocr-document-processor

dkyazzentwatwa/chatgpt-skills

Extract text and structure from scans, images, and scanned PDFs. Use for OCR, searchable PDFs, table extraction, receipt parsing, and business card parsing.

Media & Creative4.8K installs

crypto-ta-analyzer

dkyazzentwatwa/chatgpt-skills

Run multi-indicator technical analysis on crypto or market OHLCV data. Use for deterministic trend, momentum, volume, and divergence analysis.

Business & Finance1.6K installs

text-summarizer

dkyazzentwatwa/chatgpt-skills

Generate extractive summaries from long text documents. Control summary length, extract key sentences, and process multiple documents.

693 installs

financial-calculator

dkyazzentwatwa/chatgpt-skills

Run loan, investment, NPV, retirement, savings, and risk calculations with schedules and charts. Use for deterministic financial modeling tasks.

Business & Finance503 installs

document-converter-suite

dkyazzentwatwa/chatgpt-skills

Convert PDFs, Office docs, markdown, HTML, and tables between editable formats. Use for best-effort document conversion, PDF utilities, form filling, and table extraction.

Docs & Writing483 installs

image-enhancement-suite

dkyazzentwatwa/chatgpt-skills

Open the skill to read its SKILL.md instructions.

Media & Creative293 installs

Popular frontend & design skills

View category →

setup-matt-pocock-skills

mattpocock/skills

Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.

Frontend & Design1.1M installs

frontend-design

anthropics/skills

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

OfficialFrontend & Design1M installs

hyperframes-animation

heygen-com/hyperframes

All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.

Frontend & Design1M installs

prototype

mattpocock/skills

Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.

Frontend & Design999.2K installs

hyperframes-core

heygen-com/hyperframes

The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.

Frontend & Design930.5K installs

vercel-react-best-practices

vercel-labs/agent-skills

React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.

OfficialFrontend & Design843.1K installs