Asset Creator Skill

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"/>

1. Always use viewBox - Enables proper scaling
2. Use transparent background - No background rect unless needed
3. Group related elements - Use <g> for organization and shared transforms
4. Use meaningful IDs - For gradients, clips, and reusable elements
5. Optimize paths - Remove unnecessary precision (2 decimal places max)
6. 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:

1. Identify the attachment point in the icon's original coordinate space (e.g., gun barrel tip)
2. 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°