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

• 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°