SVG Precision Skill

What this skill does

• •Generates SVGs from structured coordinate specifications
• •Validates markup integrity via integrated CLI tools
• •Provides template-based layout generation for standard patterns
• •Renders PNG previews for rapid visual verification
• •Enforces strict viewBox and dimension configurations

When to use it

• ✓Creating UI mockups that require specific alignment and scaling
• ✓Generating technical documentation diagrams with consistent dimensions
• ✓Building custom icon sets from rigid design requirements
• ✓Producing charts and infographics based on accurate data coordinates

When not to use it

• ✕Generating artistic or complex photorealistic imagery
• ✕Complex layout work requiring non-standard text rendering engines
• ✕Situations where SVG markup size is constrained by extreme optimization limits

How to invoke it

Example prompts that trigger this skill:

• “Create a technical diagram for the architecture overview using a fixed 800x600 viewBox.”
• “Build an SVG icon for a button based on the standard layout recipe.”
• “Generate a schematic with absolute coordinates for these three nodes.”
• “Validate the current SVG file for compatibility and syntax errors.”
• “Render a PNG preview of the current SVG workspace.”

Example workflow

1. Define the scene requirements including dimensions and shapes.
2. Consult the recipes reference for the preferred layout pattern.
3. Execute the build command to generate the raw SVG file.
4. Run the validation script to check for syntax and structure errors.
5. Generate a PNG preview to verify visual output before final export.

Prerequisites

• –Python 3.x
• –Basic knowledge of SVG coordinate systems

Pitfalls & limitations

• !Text rendering may behave differently across viewers if exact font alignment is required
• !Exotic SVG filters often fail validation and reduce cross-platform compatibility
• !High complexity diagrams require significant time to specify absolute coordinates

FAQ

How it compares

Generic prompts often hallucinate syntax errors in SVGs; this skill enforces deterministic validation through a dedicated CLI to ensure clean, compliant, and accurate code.

Source & trust

From the source: “# 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 pattern…”

# 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.

Quoted from dkyazzentwatwa/chatgpt-skills for reference — see the original for the authoritative, latest version.

Recommended Rules

Recommended Workflows

Recommended MCP Servers