About svg-illustration
svg-illustration is a focused skill for creating and troubleshooting SVG diagrams and illustrations, including assets intended for slides. It directs users to SVG-specific rules and examples rather than unrelated authoring guidance.
Key features
- 01SVG sizing and spacing guidance
- 02Diagram pattern references
- 03Slide embedding guidance
- 04Export and embedding troubleshooting
- 05SVG example assets
Use cases
- 01Create slide-ready SVG diagrams
- 02Choose diagram sizing and spacing
- 03Resolve SVG export or embedding issues
Install
Copy the command and run it in a terminal.
$
npx skills add https:/After installing, type/svg-illustrationin Claude Code to confirm it loaded.
Bundled files
References and scripts installed along with SKILL.md.
agents/openai.yamlassets/examples/with-diagrams.mdreferences/core-rules.mdembedding.mdindex.mdoutput-examples.mdpattern-examples.mdtroubleshooting.mdDetails
From the project READMESVG Illustration Entry
Overview
Thin entry skill for SVG diagrams. Core principle: go straight to SVG rules and patterns rather than scanning slide authoring or color modules.
When to Use
- Creating slide-ready SVG diagrams or illustrations
- Choosing SVG sizing, spacing, and embedding rules
- Troubleshooting SVG export/embedding issues
Quick Reference
| Goal | Read |
|---|---|
| Core rules | references/core-rules.md |
| Pattern examples | references/pattern-examples.md |
| Embedding in slides | references/embedding.md |
| Troubleshooting | references/troubleshooting.md |
Example
Prompt: "Need an architecture diagram with clean sizing." → Read core-rules.md, then pattern-examples.md.
Assets
assets/examples/- SVG diagram examples
Common Mistakes
- Reading Marp authoring before SVG rules when only diagrams are needed
- Skimming slide-creator overview instead of SVG references
Red Flags
- "Maybe SVG rules are buried in authoring"
- "I'll just skim everything"
Comments
Markdown supported