technical-svg-diagrams

Why It Is Here

This skill is interesting because it constrains SVG diagrams with a small, repeatable visual system: grid background, monospace typography, simple boxes/circles, semantic accent colors, and clear arrow patterns. That makes it useful for docs where the output should stay editable as plain SVG.

Best For

Lightweight technical diagrams embedded in docs or blog posts.
Architecture overviews with a small number of components.
Component internals and simple request flows.

Evaluation Notes

Strengths: tiny artifact surface, no runtime dependency, easy to diff, easy to post-process.
Weaknesses: no validator, no auto-layout, visual style may be too narrow for polished product docs.
Open questions: upstream license is not declared, so do not copy upstream skill content into this repo yet.

Artifacts

Example: examples/system-overview.svg
Preview: screenshots/system-overview-preview.png
Editable preview source: screenshots/system-overview-preview.svg

Maintenance

Last checked: 2026-04-26
Next action: confirm upstream license and decide whether to vendor the original SKILL.md and reference patterns.

Name	Kind	Description
system-overview.svg	svg	Self-made SVG example following the observed style rules.
system-overview-preview.png	png	PNG screenshot generated from the vector preview.
system-overview-preview.svg	svg	Editable vector preview of the example.