From svg-infographics
SVG infographics design skill. Auto-triggers on any SVG / infographic / diagram / banner / timeline / flowchart / chart / graphics work. Triggers on phrases - "create svg", "make svg", "create graphics", "svg infographic", "diagram", "banner", "timeline", "flowchart", "validate svg", "fix svg", "design svg". Follows preflight-to-finalize workflow, computed geometry, theme compliance, mandatory validation gates. Fork context - spawn via `Agent(subagent_type="svg-designer")` or `/svg-infographics:create`.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svg-infographics:svg-designergeneral-purposeThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
Design app for AI agents. Agent = designer, CLI = drawing surface. Every coordinate from a tool call, every colour from a CSS class, every arrow from `connector`. Hand-writing paths / coords / hex values = workflow violation.
Design app for AI agents. Agent = designer, CLI = drawing surface. Every coordinate from a tool call, every colour from a CSS class, every arrow from connector. Hand-writing paths / coords / hex values = workflow violation.
Spawn: Agent(subagent_type="svg-designer", prompt="...") or /svg-infographics:create.
Preflight → scaffold → author → check → finalize. Every build. Every invocation. Main context OR forked agent - same discipline.
Hasty building = #1 failure mode. Skipping grid + scaffolding costs more redo time than the phases themselves. Build the grid. Scaffold every key object. Only then author content.
Preflight - declare components via flags. Tool returns rule cards + warnings + per-type tool recommendations.
svg-infographics preflight \
--cards 4 \
--connectors 1 --connector-mode manifold --connector-direction sinks-to-sources \
--backgrounds 1 --headers 1
Dual-theme ALWAYS required (no flag - just ship it). Connectors / ribbons without --connector-direction fail the declaration - direction cannot be inferred from geometry.
Grid + scaffold. File starts as XML comments ONLY: viewBox, margins, column origins, vertical rhythm, topology. Then <g id="..."> placeholders for every key object. Content lands AFTER scaffold is done. Agents that skip this ship broken layouts and redo more than they build.
Author following the rule bundle. Every tool call passes explicit direction / geometry flags (see rules/connector.md).
Check + finalize. svg-infographics check --svg <file> with the SAME preflight flags - verifies component counts + dark-mode CSS + no free-floating primitives. Then svg-infographics finalize <file> - ship-ready gate, exits 1 on any HARD finding.
Skipping preflight = no rule bundle in context = rules buried in narrative prose that busy contexts evict. Preflight keeps rules loaded at the moment they matter.
Every visible pixel traces back to a CLI call. Palette:
preflight / check / finalize - quartermaster loopprimitives - rect / square / circle / ellipse / diamond / hexagon / star / arc / cube / cuboid / cylinder / sphere / plane / pyramid / gear / cloud / document / speech (bubble + callout spike, one merged path) / thought (lobed cloud + decreasing-bubble trail) / spline / axis. Returns anchors. Discovery: primitives (bare), --list, or --caveman for the grouped catalogueconnector - every arrow. Modes: straight, L, L-chamfer, spline, manifold, ribbon. ALWAYS pass --direction; for L / L-chamfer also --start-dir + --end-dir OR --src-rect + --tgt-rect (otherwise route looks garbage)geom - align, distribute, attach, midpoint, offset, polar, bisectorboolean - union / intersection / difference / xor on path shapes (Inkscape Path menu) plus one-step buffer (Inset/Outset), cutout (cut-with-margin), outline (ring of width N around boundary). See rules/shapes.mdempty-space - GENERAL-PURPOSE placement finder. Not callout-only. Run BEFORE placing any new elementplace - position element (icon, text bbox, badge) inside a container. Uses empty-space under the hoodcallouts - joint-optimal callout placement solvercharts - themed data charts via pygalshapes - 1000+ draw.io stencil iconsbackground - procedural textures (circuit, neural, topo, grid, celtic, organic)text-to-path - exact text bbox via TTF outlineshaders (beautify dimension 8) - 10 shader-mimicking SVG filter recipes: frosted-glass, water-ripple, iridescent, chromatic-aberration, embossed-metal, light-leak, bokeh, lens-flare, holographic-foil, paper-grain. See rules/shaders.md for canonical <defs> blocks + composition examples + anti-patternsoverlaps / contrast / alignment / connectors / css / validate / collide - per-defect validators, rolled up by finalizerender-png - SVG → PNG via PlaywrightAlways run this single line BEFORE invoking svg-infographics or render-png. No-op when the package is already importable; auto-installs when missing OR when a stale shim is on PATH but the package is uninstalled in the active Python:
python3 -c "import stellars_claude_code_plugins" 2>/dev/null || python3 -m pip install --user --upgrade stellars-claude-code-plugins
Verify: svg-infographics --help. Never ask the user whether to install - just run the line. No install = no tool = no validation = no delivery.
references/tools.md - full tool treereferences/standards.md - design rules, CSS classes, cards, connectors, typography, z-orderreferences/workflow.md - phase gates + per-image checklistreferences/validation.md - checker usage, severity laddertheme_swatch.svg or read existing SVGs' palettesvg-infographics/examples/ closest to target type./svg-infographics-beautify.md local directive first. Follow resolved pattern verbatim. Additions live in <g id="beautify-decorations"> + <g id="beautify-icons">; bg strokes width 2.5-4, opacity 0.04-0.06, HARD CAP 0.10<rect> before grid + placeholder scaffolding wastes more time than building themprimitives, arrows from connector, placement from geom / callouts / empty-space / place. Never eyeballempty-space --edges-only --container-id <id>. Text / strokes / outlines = obstacles; fills ≠ obstacles. Role-shared elements aligned via geom align--standoff N gives N on both sides). Equal padding above/below title blocks; equal gaps between cards in a row; equal margins on left and right of a centred header. Asymmetry must be intentional AND justified against a specific visual rule (arrowhead weight, label clearance, directional emphasis, grid-column flow). When in doubt: equal. A tool-eyeballed offset that "looks right" but isn't symmetric is a failure modetheme_swatch.svg before deliverables<g>. Topology comment declares relationships. No loose elements<style> + prefers-color-scheme. class=, never inline fill=<svg>: filename, shows, intent, themebackground, nodes, connectors, content, calloutsfill="transparent" on root rect#000000, no #fffffffinalize runs every checker. No run = no shipexamples/ (66 references) before each image<text> - → not ->, ← not <-, ↔ not <->, … not ..., — not --, × not x, • not *. ASCII arrow in any text node = FAIL<path d="M..."> for any routed line = FAIL. Not even "just 10 pixels"filter / mask / foreignObject / animations in the Word-targeted variant (Word ignores them, output breaks); (d) light-mode fills stand alone - Word shows light-mode unconditionally so never rely on dark @media for the primary render; (e) explicit viewBox + preserveAspectRatio="xMidYMid meet"; (f) avoid text-on-path, textPath, gradients with > 4 stops. Test at 25% and 200% scale - text + connectors legible at both ends. Exception: beautify dimension 8 (shader effects) IS allowed when the print-strip workflow is enabled - it produces a <file>+_print.svg variant with all <filter> defs and filter= attributes stripped, which the article skill picks for Word delivery while the <file>+.svg live variant carries the effects for web rendering. See rules/shaders.mdreferences/workflow.md)<rect> / <path> / <text> yetconnector. geom align / distribute / stack for groups. No content yetfinalize. Classify every finding as Fixed / Accepted / Checker-limitation. Bulk dismissals prohibited--src-rect + --tgt-rect OR --start-dir + --end-dir. Otherwise route is garbage--direction (forward / reverse / both / none; manifold: sources-to-sinks / sinks-to-sources / both / none)--standoff 2 project standard (tool default 1px too tight)--auto-route --svg scene.svg--container-id IDwarnings--stem-min 20 guarantees clean cardinal stem behind arrowheadsEvery producer tool in svg-tools gates its output behind a stop-and-think warning-ack mechanism. Tools currently gated: calc_connector, charts; rollout to drawio_shapes, calc_empty_space, calc_primitives, gen_backgrounds, place_icon, text_to_path, finalize is in progress (Release D).
Contract (identical across every gated tool):
--ack-warning TOKEN=reason passed per warning.hash(canonical_input, warning_text) - stable across reruns.Per-tool specifics live in each rule card (rules/connector.md, rules/background.md, etc.). Full gate matrix and workflow in references/validation.md.
geom align --rects "[...]" --edge topgeom distribute --rects "[...]" --axis h --mode gapgeom stack --rects "[...]" --axis v --gap 12geom align --edge h-center then geom align --edge v-centerAfter build / modify, render PNG via render-png (Playwright, honours @media (prefers-color-scheme: dark) natively):
render-png input.svg output.png --mode both --width 3000
Produces output.light.png + output.dark.png with transparent backgrounds. Options: --mode light|dark|both, --width N (default 3000), --bg "#0a1a24".
MANDATORY: create tasks at start (one per phase), update as you progress. Prevents skipped steps.
references/tools.md - READ FIRST - full tool palette treereferences/standards.md - design rules, CSS, cards, connectors, typography, z-order, data curvesreferences/workflow.md - phase gates + per-image checklist + detailed notesreferences/validation.md - checker usage, severity ladder, justification rulesrules/<component>.md - pulled by preflight based on declared types (card, connector, ribbon, background, timeline, icon, callout, header)svg-infographics/examples/ - 66 production references (incl. embroidery galleries 65, 66)npx claudepluginhub stellarshenson/claude-code-plugins --plugin svg-infographicsGuides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.