mcpField
C
create-svg-illustrations

create-svg-illustrations

github.com/narumirunaDesign & UI1782 installsUpdated 6d ago
Repository

About create-svg-illustrations

A skill for creating editable SVG illustrations for slides and documents. It guides artifact design, accessibility, portability, validation, and inspection in the target renderer.

Key features

  1. 01Inspect target dimensions, palette, and renderer
  2. 02Create editable SVGs with accessible descriptions
  3. 03Keep assets portable
  4. 04Validate with svglint and inspect rendering
  5. 05Consult focused references and examples

Use cases

  1. 01Create a diagram for a slide deck
  2. 02Embed an SVG illustration in a document
  3. 03Check SVG scaling, clipping, and contrast

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/narumiruna/skills --skill create-svg-illustrations

After installing, type/create-svg-illustrationsin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

assets/examples/
with-diagrams.md
references/
core-rules.md
embedding.md
pattern-examples.md
troubleshooting.md

Details

From the project README

SVG Illustrations

Start with references/core-rules.md; load only the extra detail the artifact needs.

NeedRead or use
Canvas, style, text, accessibility, validationreferences/core-rules.md
Reusable compositionsreferences/pattern-examples.md
Marp embeddingreferences/embedding.md
Rendering failuresreferences/troubleshooting.md
Known-good deck exampleassets/examples/with-diagrams.md

Workflow

  1. Inspect the target slide or document, required dimensions, surrounding palette, and renderer.
  2. Create the smallest editable SVG that communicates the idea. Use a correct viewBox, explicit text styles, consistent geometry, and SVG title/description where the visual carries meaning. When embedding, also provide descriptive host-level alt text or an adjacent semantic equivalent as required by references/embedding.md; internal SVG metadata alone is not sufficient.
  3. Keep assets portable: avoid embedded fonts, unexplained emoji, unnecessary filters, and base64 content unless the output must be self-contained.
  4. Validate with svglint when available, then open or embed the SVG in the target artifact and inspect clipping, scaling, contrast, text, and relative paths.
  5. Return the SVG artifact first, followed by validation performed and any renderer or font caveat.

Use slide-authoring or color guidance only when the request also requires it. Do not claim visual inspection when only source validation ran, and do not commit or publish the artifact unless requested.

Comments

Markdown supported