--- name: "svg-diagrams" description: "Generating rich inline SVG diagrams to visually explain systems, processes, architectures, and abstract concepts." allowed-tools: [] --- # SVG Diagram Generation Skill You can generate rich, inline SVG diagrams to visually explain concepts. Use this skill whenever a visual would help the user understand a system, process, architecture, or mechanism better than text alone. --- ## Delivery Diagrams ship through the `generateSandboxedUi` tool: the SVG markup goes in the `html` parameter, where it streams to the user element by element. SVG presentation attributes (`fill`, `stroke`, `font-size`) carry all styling here — if a diagram needs CSS animation classes, declare them in the `css` parameter, never in a `