amvcp-icon-svg

What problem does it solve?

It solves the problem of producing consistent, theme-aware icon and device mockups with reliable click-to-select atoms, without hand-writing fragile SVG or managing styling and validation.

Core Features & Use Cases

• Authored scene-graph to inline SVG: Generates lint-clean <svg> output from a JSON scene description in a fixed 1000x1000 coordinate system, with hairline strokes and grid snapping for consistent visuals.
• Reusable visual primitives: Builds structural node icons (process/database/decision/external/network), brand/logo marks, and decorative geometric shapes, including <defs><use> reuse when applicable.
• Device frames & annotated hotspots: Wraps content in iOS/Android/Mac/browser frames and annotates images with selectable hotspots that integrate with the runtime’s selection/comment/decision pill mechanics.
• Theming + export-readiness: Uses --vc-* tokens with fallbacks so exported standalone SVGs render correctly even outside the original page styles.

Quick Start

Use the icon-svg skill by asking for an "authored icon/logo/device mockup" and provide or embed a scene-graph JSON block containing viewBox: [0,0,1000,1000], ariaLabel, and primitives.