For each asset, fetch multiple reference icons before selecting the best match. The agent specifies the exact number of icons to read per asset.

`logo`

Fetch reference icons
Use EXACTLY as-is. Zero modifications.
If no matching references found: Write the name of that brand/entity inside a visual box.

`icon`

Fetch reference icons
Use EXACTLY as-is. Zero modifications.
If no matching references found: Create from scratch, keep simple like icons

`customized`

Fetch reference icons
If a reference matches description → use as-is
Only if NO reference matches → tweak the closest one
If no direct references found → search for similar references, understand their shape, and create the asset

`character`

NO icon fetching
Use to create from scratch

Attribute	Purpose	Example
`viewBox`	Internal coordinate system	`"0 0 100 100"`
`xmlns`	XML namespace (required)	`"http://www.w3.org/2000/svg"`

Attribute	Purpose
`x`, `y`	Position (top-left corner)
`width`, `height`	Dimensions
`rx`, `ry`	Corner radius
`fill`	Fill color

<circle cx="50" cy="50" r="40" fill="#EF4444"/>

Attribute	Purpose
`cx`, `cy`	Center position
`r`	Radius

<ellipse cx="50" cy="50" rx="40" ry="25" fill="#10B981"/>

Attribute	Purpose
`cx`, `cy`	Center position
`rx`, `ry`	X and Y radii

<line x1="10" y1="10" x2="90" y2="90" stroke="#000" stroke-width="2"/>

<polyline points="10,90 50,10 90,90" fill="none" stroke="#000" stroke-width="2"/>

<polygon points="50,10 90,90 10,90" fill="#F59E0B"/>

Command	Name	Parameters	Example
`M`	Move to	x, y	`M 10 10`
`L`	Line to	x, y	`L 90 90`
`H`	Horizontal line	x	`H 50`
`V`	Vertical line	y	`V 50`
`C`	Cubic Bezier	x1,y1 x2,y2 x,y	`C 20,20 80,20 90,90`
`Q`	Quadratic Bezier	x1,y1 x,y	`Q 50,0 90,90`
`A`	Arc	rx ry rotation large-arc sweep x y	`A 25 25 0 0 1 50 50`
`Z`	Close path	-	`Z`

Lowercase commands use relative coordinates (relative to current position).

<!-- Triangle -->
<path d="M 50 10 L 90 90 L 10 90 Z" fill="#8B5CF6"/>

<!-- Curved shape -->
<path d="M 10 50 Q 50 10 90 50 T 170 50" stroke="#000" fill="none"/>

<g transform="translate(50, 50)" fill="#3B82F6">
  <circle r="20"/>
  <rect x="-10" y="25" width="20" height="10"/>
</g>

Transform	Syntax	Example
Translate	`translate(x, y)`	`translate(50, 50)`
Scale	`scale(s)` or `scale(sx, sy)`	`scale(2)`
Rotate	`rotate(deg)` or `rotate(deg, cx, cy)`	`rotate(45)`
Skew	`skewX(deg)` or `skewY(deg)`	`skewX(10)`

<rect
  fill="#3B82F6"           /* Fill color */
  fill-opacity="0.8"       /* Fill transparency */
  stroke="#1D4ED8"         /* Stroke color */
  stroke-width="2"         /* Stroke width */
  stroke-opacity="0.9"     /* Stroke transparency */
  stroke-linecap="round"   /* Line end style: butt | round | square */
  stroke-linejoin="round"  /* Corner style: miter | round | bevel */
  stroke-dasharray="5 3"   /* Dash pattern */
/>

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    .primary { fill: #3B82F6; }
    .secondary { fill: #EF4444; }
    .outline { fill: none; stroke: #000; stroke-width: 2; }
  </style>

  <circle class="primary" cx="50" cy="50" r="30"/>
</svg>

<defs>
  <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#3B82F6"/>
    <stop offset="100%" stop-color="#8B5CF6"/>
  </linearGradient>
</defs>

<rect fill="url(#grad1)" x="10" y="10" width="80" height="80"/>

Transform	Syntax	Example
Translate	`translate(x, y)`	`translate(50, 50)`
Scale	`scale(s)` or `scale(sx, sy)`	`scale(2)`
Rotate	`rotate(deg)` or `rotate(deg, cx, cy)`	`rotate(45)`
Skew	`skewX(deg)` or `skewY(deg)`	`skewX(10)`

Reference defined elements:

<defs>
  <circle id="dot" r="5"/>
</defs>

<use href="#dot" x="20" y="20" fill="red"/>
<use href="#dot" x="50" y="50" fill="blue"/>
<use href="#dot" x="80" y="80" fill="green"/>

<defs>
  <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%" stop-color="#3B82F6"/>
    <stop offset="100%" stop-color="#EF4444"/>
  </linearGradient>
</defs>

<defs>
  <clipPath id="circle-clip">
    <circle cx="50" cy="50" r="40"/>
  </clipPath>
</defs>

<rect clip-path="url(#circle-clip)" x="0" y="0" width="100" height="100" fill="#3B82F6"/>

<defs>
  <mask id="fade-mask">
    <linearGradient id="fade" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" stop-color="white"/>
      <stop offset="100%" stop-color="black"/>
    </linearGradient>
    <rect fill="url(#fade)" width="100" height="100"/>
  </mask>
</defs>

<rect mask="url(#fade-mask)" fill="#3B82F6" width="100" height="100"/>

Always use viewBox - Enables proper scaling
Use transparent background - No background rect unless needed
Group related elements - Use <g> for organization and shared transforms
Use meaningful IDs - For gradients, clips, and reusable elements
Optimize paths - Remove unnecessary precision (2 decimal places max)
Use classes for styling - Separate presentation from structure

<svg viewBox="minX minY width height" xmlns="http://www.w3.org/2000/svg">

Parameter	Meaning
`minX`	Left edge X coordinate (usually 0)
`minY`	Top edge Y coordinate (usually 0)
`width`	Internal width in SVG units
`height`	Internal height in SVG units

(0,0) ─────────────────────────► X (width)
  │
  │     (25%,25%)        (75%,25%)
  │        ●────────────────●
  │        │                │
  │        │   (50%,50%)    │
  │        │       ●        │
  │        │    center      │
  │        │                │
  │        ●────────────────●
  │     (25%,75%)        (75%,75%)
  │
  ▼
 Y (height)

Position	Formula
Top-left	(0, 0)
Top-center	(width/2, 0)
Center	(width/2, height/2)
Bottom-center	(width/2, height)

Keep icon centers within 10%-90% of viewBox to prevent clipping:

availableSpace = viewBoxSize * 0.8
maxScale = availableSpace / iconViewBoxSize

Process:

Identify the attachment point in the icon's original coordinate space (e.g., gun barrel tip)
Position the effect at that coordinate using transform="translate(x, y)"

Example: Gun with muzzle flash

<!-- Gun icon with viewBox 0 0 512 512, barrel tip at (486, 175) -->
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <path d="M79.238 115.768..." fill="#333"/>  <!-- Gun icon -->

  <!-- Position muzzle flash at barrel tip coordinates -->
  <g transform="translate(486, 175)">
    <polygon points="0,0 15,-8 12,0 15,8" fill="#FF6600">
      <animate attributeName="opacity" values="1;0;1" dur="0.1s" repeatCount="indefinite"/>
    </polygon>
  </g>
</svg>

Finding attachment points:

Icon Type	Attachment Point	How to Find
Guns/Weapons	Barrel tip	Rightmost X, mid-height Y in icon's coordinate space
Swords/Blades	Blade tip	Topmost or rightmost point in icon's coordinate space
Characters	Hand position	Look for arm/hand path segments, note their coordinates
Vehicles	Exhaust/Wheels	Bottom or rear coordinates in icon's coordinate space

Debugging tip: Add a visible circle at the attachment point to verify position:

<circle cx="486" cy="175" r="5" fill="red"/>  <!-- Shows barrel tip location -->

Target	Transform
45° (up-right)	`rotate(45)` ✓
135° (down-right)	`rotate(135)` ✓
270° (left)	`rotate(270)` or `rotate(-90)` ✓

❌ Wrong: rotate(-45) for 45° gives 315° (up-left), not 45°

asset-creator

Asset Creator Skill