sablier-icon by sablier-labs/agent-skills

Recolor the Sablier icon SVG to a user-specified color with an analogous gradient, and optionally export to PNG, JPG, or ICO (favicon).

Source

The base icon is at assets/icon.svg (relative to this skill directory). It is a two-path SVG with viewBox="0 0 189.9 236.73" (aspect ratio ~0.802:1). Two CSS classes (.cls-1, .cls-2) reference two <linearGradient> elements in <defs>:

<linearGradient id="linear-gradient"> — contains two <stop> elements:
- offset="0" → stop-color="#f77423" (top / darker)
- offset="1" → stop-color="#fbce5b" (bottom / lighter)
<linearGradient id="linear-gradient-2"> — inherits stops from the first via xlink:href="#linear-gradient"

To recolor, replace the two stop-color values inside <linearGradient id="linear-gradient">. Always preserve the original viewBox and aspect ratio — never add or change width/height attributes on the SVG.

A flat variant is at assets/icon-white.svg — a single-path SVG with fill="white" and viewBox="0 0 386 480" (aspect ratio ~0.804:1). Used only when --flat is passed.

Color Resolution

Resolve the user's color input using this priority (first match wins):

Exact alias — primary, secondary, orange, blue (see aliases in palette below)
Exact palette name — e.g. primary-start, dark-300, gray-400
Raw hex — accept #RRGGBB or RRGGBB (6-digit only, reject 3/8-digit). Normalize to lowercase #rrggbb
CSS color name — standard CSS named colors (e.g. red, teal, cornflowerblue)

If multiple palette entries match a prefix (e.g. dark matches dark, dark-100, dark-300), prefer the exact match. If no exact match exists, ask the user to be more specific.

Sablier Brand Palette

Source: sablier-labs/branding

Name	Hex	Notes
primary-start	`#ff7300`	Orange gradient start
primary-end	`#ffb800`	Orange gradient end
primary / orange	`#ff9c00`	Median orange (default primary)
secondary-start	`#003dff`	Blue gradient start
secondary-end	`#00b7ff`	Blue gradient end
secondary / blue	`#0063ff`	Median blue (default secondary)
secondary-desaturated	`#266cd9`	Desaturated blue
dark	`#14161f`	Darkest background
dark-100	`#1e212f`	App background
dark-300	`#2a2e41`	Card borders
dark-400	`#30354a`	Input borders
gray-100	`#e1e4ea`	Body text
gray-400	`#8792ab`	Labels
red	`#e52e52`	Error / destructive
white	`#ffffff`	Original icon color
black	`#000000`	Pure black (rarely used)

Gradient Generation

Brand gradient pairs

Use these exact hex pairs — no computation needed:

Alias	Start (offset=0, top)	End (offset=1, bottom)
primary / orange	`#f77423`	`#fbce5b`
secondary / blue	`#003dff`	`#00b7ff`

When the user says "primary" or "orange", the output is identical to icon.svg (no stop-color changes needed). When the user says "secondary" or "blue", replace the two stop-colors with the blue pair.

Arbitrary colors — piecewise HSL algorithm

For any color not in the brand gradient pairs above, generate an analogous two-stop gradient:

Convert the resolved hex to HSL (h, s%, l%)
Branch by saturation:
- Achromatic (s < 10): keep s = 0 for both stops, vary only lightness
  - Start: hsl(h, 0%, max(l - 8, 10)%)
  - End: hsl(h, 0%, min(l + 12, 90)%)
- Chromatic (s >= 10): keep hue constant, adjust lightness and gently reduce end saturation
  - Start: hsl(h, s%, max(l - 8, 15)%)
  - End: hsl(h, floor(s * 0.9)%, min(l + 12, 88)%)
Ensure endL > startL after clamps; if not, set startL = endL - 10
Convert both HSL values back to 6-digit lowercase hex

SVG Generation

Gradient mode (default)

Read assets/icon.svg
Resolve gradient start/end colors:
- If the color matches a brand gradient pair alias, use the exact hex pair
- Otherwise, apply the piecewise HSL algorithm
Find the two <stop> elements inside <linearGradient id="linear-gradient"> and replace their stop-color values:
- offset="0" → start hex
- offset="1" → end hex
Structural checks:
- Exactly two stop-color replacements occurred
- xlink:href="#linear-gradient" on linear-gradient-2 is still intact
- viewBox="0 0 189.9 236.73" preserved, no width/height attributes added
Write to sablier-icon-<color-name>.svg

Flat mode (`--flat` flag)

Read assets/icon-white.svg
Resolve the color to a single hex value:
- If the color matches a brand gradient pair alias (primary, secondary), use the median palette hex (#ff9c00, #0063ff)
- Otherwise, use the resolved hex directly
Replace fill="white" on the <path> element only — never touch fill="none" on the root <svg> element
Verify exactly one replacement occurred
Verify viewBox="0 0 386 480" preserved, no width/height attributes added
Write to sablier-icon-<color-name>.svg

Filenames

Use the brand alias when matched by name (e.g. primary), otherwise strip the # prefix and lowercase the hex value (e.g. #E52E52 → e52e52). If the color cannot be resolved, ask the user to provide a valid hex code.

PNG / JPG Export

If the user passes --format png or --format jpg:

Generate the recolored SVG first
Verify rsvg-convert is available: command -v rsvg-convert >/dev/null 2>&1 || { echo "Error: rsvg-convert not found. Install with: brew install librsvg"; exit 1; }
Use rsvg-convert for SVG→PNG (it correctly renders CSS gradients, unlike ImageMagick's SVG renderer which produces grayscale)
For JPG, convert the PNG with magick (verify availability: command -v magick >/dev/null 2>&1)

Gradient mode (from icon.svg, viewBox 189.9×236.73):

# PNG (transparent background, 1024px height, width auto-computed from aspect ratio ≈822px)
rsvg-convert -h 1024 "<input>.svg" -o "<output>.png"

# JPG (dark background since JPG has no transparency) — render PNG first, then convert
rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png"
magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg"
rm "<output>.tmp.png"

Flat mode (from icon-white.svg, viewBox 386×480):

# PNG (transparent background, explicit height, width auto-computed ≈824px)
rsvg-convert -h 1024 "<input>.svg" -o "<output>.png"

# JPG (dark background)
rsvg-convert -h 1024 "<input>.svg" -o "<output>.tmp.png"
magick "<output>.tmp.png" -background "#14161f" -flatten "<output>.jpg"
rm "<output>.tmp.png"

Verify the exported file's dimensions match the expected aspect ratio.

ICO Export (`--format ico` or `--favicon`)

--favicon is a shorthand for --format ico. Both produce a multi-resolution .ico file containing 16x16, 32x32, and 48x48 embedded PNGs — the standard sizes for favicon.ico.

Generate the recolored SVG first
Verify rsvg-convert and magick are available (same checks as PNG/JPG)
Render intermediate PNGs at each favicon size using rsvg-convert (height-constrained to preserve aspect ratio), then center each on a square transparent canvas with magick -extent
Combine into a single .ico with magick
Clean up intermediate PNGs

# Render PNGs preserving aspect ratio (height-constrained), then center on square canvas
for size in 16 32 48; do
  rsvg-convert -h "$size" "<input>.svg" -o "<output>-${size}-raw.tmp.png"
  magick "<output>-${size}-raw.tmp.png" -background transparent -gravity center -extent "${size}x${size}" "<output>-${size}.tmp.png"
  rm "<output>-${size}-raw.tmp.png"
done

# Combine into multi-resolution ICO
magick "<output>-16.tmp.png" "<output>-32.tmp.png" "<output>-48.tmp.png" "<output>.ico"

# Clean up
rm "<output>-16.tmp.png" "<output>-32.tmp.png" "<output>-48.tmp.png"

The output filename follows the sablier-icon-<color-name>.ico pattern — or favicon.ico if the user explicitly requests that name.

The output filename follows the same sablier-icon-<color-name>.<ext> pattern for all other formats.

Examples

primary → sablier-icon-primary.svg with brand orange gradient (identical to icon.svg)
secondary → sablier-icon-secondary.svg with blue gradient #003dff / #00b7ff
#e52e52 → sablier-icon-e52e52.svg with red gradient (piecewise HSL algorithm)
white → sablier-icon-white.svg with achromatic subtle lightness gradient
#00d395 --flat → sablier-icon-00d395.svg with flat fill="#00d395"
red --format jpg → sablier-icon-red.svg + sablier-icon-red.jpg
secondary --format png → sablier-icon-secondary.svg + sablier-icon-secondary.png (blue gradient + raster export)
primary --format ico → sablier-icon-primary.svg + sablier-icon-primary.ico (multi-resolution 16/32/48px)
primary --favicon → same as --format ico

sablier-icon