--- name: sablier-icon argument-hint: [--format png|jpg] description: This skill should be used when the user asks to "recolor the Sablier icon", "Sablier icon in orange", "Sablier logo in primary color", "generate Sablier hourglass variant", "change Sablier icon color", or "export Sablier icon as PNG". Converts the Sablier white SVG icon to any color using brand palette names, hex values, or CSS color names, with optional PNG/JPG raster export. --- Recolor the Sablier icon SVG to a user-specified color and optionally export to PNG or JPG. ## Source The base icon is at `assets/white-icon.svg` (relative to this skill directory). It is a single-path SVG with `fill="white"` and `viewBox="0 0 386 480"` (aspect ratio ~0.804:1). To recolor, replace the `fill` attribute value with the target hex color. Always preserve the original viewBox and aspect ratio — never add or change `width`/`height` attributes on the SVG. ## Color Resolution Resolve the user's color input using this priority (first match wins): 1. **Exact alias** — `primary`, `secondary`, `orange`, `blue` (see aliases in palette below) 2. **Exact palette name** — e.g. `primary-start`, `dark-300`, `gray-400` 3. **Raw hex** — accept `#RRGGBB` or `RRGGBB` (6-digit only, reject 3/8-digit). Normalize to lowercase `#rrggbb` 4. **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](https://github.com/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) | When the user says "primary", use `#ff9c00`. When they say "secondary", use `#0063ff`. ## SVG Generation 1. Read `assets/white-icon.svg` 2. Replace `fill="white"` on the `` element only — never touch `fill="none"` on the root `

web3-forge

Scan your own AI components