@hasna/skills 0.1.60 → 0.1.62

package/skills/performance-audit-report/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: performance-audit-report
-description: Generate premium performance audit reports for web apps, APIs, or SaaS surfaces with metrics, findings, budgets, remediation plans, and manifest metadata.
+description: Generate performance audit reports for web apps, APIs, or SaaS surfaces with metrics, findings, budgets, remediation plans, and manifest metadata.
+kind: instruction
 ---
 
 # Performance Audit Report
@@ -9,28 +10,25 @@ Generate a performance audit package from a URL, repo notes, trace summary, or p
 
 ## Requirements
 
-- Authenticate with `skills auth login`.
-- This premium skill runs through the hosted Skills runtime; local installs expose only metadata and instructions.
+None. This is an instruction skill: it is prose an agent follows, so it needs no
+credentials, no network access, and no local runtime.
 
 ## Usage
 
-```bash
-skills run performance-audit-report --target "https://skills.md" --app "Skills.md"
-skills run performance-audit-report --notes "Dashboard JS is 1.2MB and API p95 is 900ms" --surface web
-```
+Ask an agent for the deliverables below and give it the inputs. Reading this file
+IS the invocation; `skills run` refuses instruction skills on purpose.
 
-## Options
+## Inputs
 
-| Option | Description | Default |
+| Input | Description | Default |
 |--------|-------------|---------|
-| `--target <url-or-path>` | App URL, route, repo path, or service name. | optional |
-| `--notes <text>` | Performance notes, metrics, trace summary, or constraints. Positional text also works. | optional |
-| `--app <text>` | Application or product name. | Performance Target |
-| `--surface <type>` | `web`, `api`, `mobile`, or `worker`. | web |
-| `--budget <profile>` | `strict`, `balanced`, or `growth`. | balanced |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `target` | App URL, route, repo path, or service name. | optional |
+| `notes` | Performance notes, metrics, trace summary, or constraints. Positional text also works. | optional |
+| `app` | Application or product name. | Performance Target |
+| `surface` | `web`, `api`, `mobile`, or `worker`. | web |
+| `budget` | `strict`, `balanced`, or `growth`. | balanced |
 
-## Outputs
+## Deliverables
 
 - `performance-audit-report.md`
 - `findings.csv`
@@ -39,4 +37,13 @@ skills run performance-audit-report --notes "Dashboard JS is 1.2MB and API p95 i
 - `metrics.json`
 - `manifest.json`
 
-After submitting a hosted run, poll with `skills runs status <run-id>` and download outputs with `skills exports download <run-id>`.
+## Method
+
+1. State what evidence you actually have. If no measurements were supplied, say
+   so — an audit that presents guesses as measurements is worse than none.
+2. Establish the budget before the findings: target metrics and thresholds.
+3. Order findings by user-perceived impact, not by how easy they are to describe.
+4. For each finding, give the mechanism (why it is slow), not just the symptom.
+5. Attach an estimated saving and a confidence level to each recommendation.
+6. Separate quick wins from structural work, and say what must be measured again
+   after each change to confirm it worked.

package/skills/performance-audit-report/package.json

@@ -5,7 +5,6 @@
   "description": "Hosted premium performance audit report generator",
   "type": "module",
   "skills": {
-    "runtime": "hosted",
-    "source": "remote"
+    "kind": "instruction"
   }
 }

package/skills/pitch-deck/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: pitch-deck
-description: Generate premium investor or sales pitch deck packages with PPTX, PDF, notes, and design direction.
+description: Generate investor or sales pitch deck packages with PPTX, PDF, notes, and design direction.
+kind: instruction
 ---
 
 # Pitch Deck
@@ -9,35 +10,42 @@ Generate investor or sales deck packages from a short brief.
 
 ## Requirements
 
-- Authenticate with `skills auth login`.
-- This premium skill runs through the hosted Skills runtime; local installs expose only metadata and instructions.
+None. This is an instruction skill: it is prose an agent follows, so it needs no
+credentials, no network access, and no local runtime.
 
 ## Usage
 
-```bash
-skills run pitch-deck --brief "AI support desk for Shopify merchants" --company "Acme" --audience investors
-skills run pitch-deck "Usage-based billing platform for AI SaaS" --slides 12 --tone bold
-```
+Ask an agent for the deliverables below and give it the inputs. Reading this file
+IS the invocation; `skills run` refuses instruction skills on purpose.
 
-## Options
+## Inputs
 
-| Option | Description | Default |
+| Input | Description | Default |
 |--------|-------------|---------|
-| `--brief <text>` | Company, product, offer, or campaign brief. Positional text also works. | required |
-| `--company <name>` | Company or product name. | Company |
-| `--audience <type>` | `investors`, `sales`, or `internal`. | investors |
-| `--slides <number>` | Number of slides, 5-15. | 10 |
-| `--tone <tone>` | `concise`, `bold`, or `technical`. | concise |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `brief` | Company, product, offer, or campaign brief. Positional text also works. | required |
+| `company` | Company or product name. | Company |
+| `audience` | `investors`, `sales`, or `internal`. | investors |
+| `slides` | Number of slides, 5-15. | 10 |
+| `tone` | `concise`, `bold`, or `technical`. | concise |
 
-## Outputs
+## Deliverables
 
 - `deck.md`
-- `deck.pdf`
-- `deck.pptx`
 - `slides.json`
 - `speaker-notes.md`
 - `design-direction.md`
 - `manifest.json`
 
-After submitting a hosted run, poll with `skills runs status <run-id>` and download outputs with `skills exports download <run-id>`.
+## Method
+
+1. Fix the narrative before the slides: problem, why now, what changes, why you.
+   A deck is an argument with pictures, not a list of topics.
+2. One idea per slide, stated in the headline. If the headline is a noun phrase
+   ("Market"), rewrite it as the claim ("The market reprices every 18 months").
+3. Put the number that matters on the slide, with its source and period.
+4. Order for a live read: the appendix carries the detail, the body carries the
+   argument.
+5. Write speaker notes as what to say, including the transition into the next slide.
+6. Give design direction (hierarchy, palette, chart style) as instructions a
+   designer can follow. For rendered .pdf/.pptx files, hand `slides.json` to the
+   `slide-deck-generator` skill, which renders binaries locally.

package/skills/pitch-deck/package.json

@@ -5,7 +5,6 @@
   "description": "Hosted skill metadata for pitch-deck",
   "type": "module",
   "skills": {
-    "runtime": "hosted",
-    "source": "remote"
+    "kind": "instruction"
   }
 }

package/skills/product-mockup/SKILL.md

@@ -1,45 +1,107 @@
 ---
 name: product-mockup
-description: Generate premium product mockup packages with SVG visual variants, image direction prompts, scene planning, usage notes, asset metadata, and manifest.
+description: Generate parametric SVG product mockup frames — browser chrome, phone and laptop devices, or an analytics dashboard — plus a scene plan, asset metadata, usage notes, and written image prompts.
 ---
 
 # Product Mockup
 
-Generate a polished product mockup package for a SaaS product, app feature, launch campaign, or sales deck.
+Draw real product mockup frames locally as SVG geometry. Browser chrome with a
+tab bar and URL pill, a phone or laptop bezel, or a full dashboard layout with
+KPI cards, charts, and a table — all composed from parameters, not from an image
+model.
+
+The package also ships `image-prompts.md`: written prompts you can paste into
+whichever image tool you use. This skill deliberately does not call one, so it
+needs no keys and no network.
 
 ## Requirements
 
-- Authenticate with `skills auth login`.
-- This premium skill runs through the hosted Skills runtime; local installs expose only metadata and instructions.
+- Bun (the skill runs as `bun run src/index.ts`).
+- No API keys, no network access, no environment variables.
+- No runtime dependencies. `bun install` in this directory only pulls dev types.
+- Optional for raster export: any SVG renderer on your machine
+  (`rsvg-convert`, `inkscape`, or a browser's print-to-PNG).
 
 ## Usage
 
 ```bash
-skills run product-mockup "Usage-based billing dashboard" --audience "founders" --variants 3
-skills run product-mockup --product "AI meeting assistant" --scene "homepage hero" --style "quiet premium"
+# browser frame, three variants
+skills run product-mockup -- "Usage-based billing dashboard" --scene browser -n 3
+
+# dashboard scene with a locked brand accent
+skills run product-mockup -- --product "MeterKit" --scene dashboard --accent "#2E86C1"
+
+# phone and laptop from one run (device + auto alternates)
+skills run product-mockup -- -p "AI meeting assistant" --scene device -n 2
+
+# dark style, custom headline and address bar
+skills run product-mockup -- -p "Relay" --title "Ship faster with Relay" --style noir --url https://relay.dev
+
+# machine-readable summary
+skills run product-mockup -- -p "MeterKit" --scene dashboard --json
 ```
 
+Run it directly from the skill directory with `bun run src/index.ts --help`.
+
 ## Options
 
 | Option | Description | Default |
 |--------|-------------|---------|
-| `--product <text>` | Product, feature, or campaign description. Positional text also works. | required |
-| `--audience <text>` | Target audience. | software buyers |
-| `--scene <text>` | Desired context or surface. | SaaS marketing and product screens |
-| `--style <text>` | Visual direction. | polished SaaS, crisp product UI, restrained color |
-| `--variants <n>` | Number of mockup variants, 1-4. | 3 |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `--product <text>`, `-p` | Product, feature, or campaign. A positional string also works. | required |
+| `--title <text>` | Headline rendered inside the frame. | the product text |
+| `--scene <name>`, `-s` | `browser`, `device`, or `dashboard`. | `browser` |
+| `--device <kind>` | `auto`, `phone`, or `laptop`. Only used when `--scene device`. `auto` alternates per variant. | `auto` |
+| `--variants <1-4>`, `-n` | Number of mockup variants. | `3` |
+| `--style <text>` | Style direction. Matched against keyword presets (below). | `polished SaaS, crisp product UI` |
+| `--audience <text>` | Target audience, recorded in the brief and the prompts. | `software buyers` |
+| `--accent <hex>` | Force the accent color instead of deriving it. | derived from style |
+| `--url <text>` | URL shown in the browser address pill. | `https://example.com` |
+| `--output <dir>`, `-o` | Output directory. | `./product-mockup` |
+| `--json` | Print the run summary as JSON on stdout. | off |
+| `--help` | Show help and exit 0. | |
+| `--version` | Print the version. | |
+
+### Style presets
+
+`--style` is free text; the first matching keyword wins.
+
+| Preset | Triggers on | Look |
+|--------|-------------|------|
+| `polished` (default) | polished, quiet, refined, saas, crisp, restrained, clean | Light neutral, blue accent, 12px radii |
+| `noir` | dark, noir, midnight, night, black | Dark surfaces, violet accent |
+| `warm` | warm, sunset, amber, friendly, human | Light warm neutrals, amber accent, soft radii |
+| `editorial` | editorial, sharp, print, serif, magazine | Light, near-square corners, red accent |
+| `technical` | technical, terminal, developer, mono, engineering | Dark, tight radii, teal accent |
+| `vivid` | vivid, bold, playful, loud, energetic | Light, large radii, magenta accent |
+
+The accent hue rotates 26 degrees per variant so a set reads as a family. Pass
+`--accent` to lock it.
+
+## Scenes
+
+| Scene | Canvas | What is drawn |
+|-------|--------|---------------|
+| `browser` | 1280x800 | Window with traffic lights, three-tab bar, URL pill with lock glyph and toolbar buttons, two-column page body with eyebrow, headline, CTA pair, and a side panel of cards. |
+| `device` + `phone` | 720x1000 | Rounded body with side buttons, notch, status bar, headline, primary button, three content cards, four-item tab bar and home indicator. |
+| `device` + `laptop` | 1280x840 | Bezelled lid with camera dot, in-screen app window with title bar, headline and CTA, bar-chart panel, tapered base with trackpad edge. |
+| `dashboard` | 1440x900 | Six-item sidebar, header with search and avatar, four KPI cards with deltas, bar chart, line chart, and a four-row account table. |
 
 ## Outputs
 
-- `mockup-brief.md`
-- `image-prompts.md`
-- `scene-plan.json`
-- `variants/variant-01.svg`
-- `variants/variant-02.svg`
-- `variants/variant-03.svg`
-- `usage-notes.md`
-- `asset-metadata.json`
-- `manifest.json`
-
-After submitting a hosted run, poll with `skills runs status <run-id>` and download outputs with `skills exports download <run-id>`.
+| File | Contents |
+|------|----------|
+| `variants/variant-NN.svg` | The mockup frame. Named `<g>` layers, `<title>`/`<desc>` for accessibility. |
+| `scene-plan.json` | Scene, resolved design tokens, seed, and notes for every variant. |
+| `asset-metadata.json` | Per file: format, width, height, viewBox, aspect ratio, layer names, accent. |
+| `image-prompts.md` | Prompt plus negative prompt per variant, and a compositing recipe. |
+| `mockup-brief.md` | Product, audience, style interpretation, and what was generated. |
+| `usage-notes.md` | How to edit layers, drop in a real screenshot, and export to PNG. |
+| `manifest.json` | Every file written, with byte sizes and the run inputs. |
+
+## Working with the output
+
+- Delete the `canvas` layer for a transparent-background export.
+- Replace `page-content` / `app-content` with a real screenshot clipped to the
+  `screen` rect; keep the frame hardware on top.
+- Variant geometry is seeded from the product text, scene, style, and index, so
+  re-running the same command reproduces the same files exactly.

package/skills/product-mockup/package.json

@@ -2,10 +2,31 @@
   "name": "product-mockup",
   "version": "0.1.0",
   "private": true,
-  "description": "Hosted premium product mockup artifact generator",
+  "description": "Generate parametric SVG product mockup frames with scene plans, asset metadata, and image prompts",
   "type": "module",
-  "skills": {
-    "runtime": "hosted",
-    "source": "remote"
+  "main": "src/index.ts",
+  "bin": {
+    "product-mockup": "src/index.ts"
+  },
+  "files": [
+    "src",
+    "SKILL.md",
+    "tsconfig.json"
+  ],
+  "keywords": [
+    "mockup",
+    "svg",
+    "product",
+    "ui",
+    "skill"
+  ],
+  "scripts": {
+    "start": "bun run src/index.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.7.0"
   }
 }

package/skills/product-mockup/src/cli.ts

@@ -0,0 +1,150 @@
+import { normalizeHex } from "./design.js";
+import type { CliOptions } from "./types.js";
+
+const VERSION = "0.1.0";
+
+function printHelp(): void {
+  console.log(`product-mockup v${VERSION}
+
+Emit parametric SVG product mockup frames. Everything is drawn locally as real
+SVG geometry: no image model, no network access, no API keys. The package also
+includes written image prompts you can hand to an image model yourself.
+
+USAGE:
+  product-mockup --product <text> [options]
+  product-mockup "<product text>" [options]
+
+OPTIONS:
+  -p, --product <text>      Product, feature, or campaign (positional works)  [required]
+      --title <text>        Headline rendered inside the frame     [product text]
+  -s, --scene <name>        browser | device | dashboard           [browser]
+      --device <kind>       auto | phone | laptop (scene=device)   [auto]
+  -n, --variants <1-4>      Number of mockup variants              [3]
+      --style <text>        Style direction keyword or phrase      [polished SaaS, crisp product UI]
+      --audience <text>     Target audience, recorded in the brief [software buyers]
+      --accent <hex>        Force the accent color (#RRGGBB)       [derived from style]
+      --url <text>          URL shown in the browser address pill  [https://example.com]
+  -o, --output <dir>        Output directory                       [./product-mockup]
+      --json                Print the run summary as JSON
+      --help                Show this help message
+      --version             Show the current version
+
+STYLE KEYWORDS:
+  polished (default) | noir/dark | warm | editorial | technical | vivid
+
+OUTPUTS:
+  variants/variant-NN.svg   Real SVG frames, one per variant
+  scene-plan.json           Scene, tokens, and seed for every variant
+  asset-metadata.json       Dimensions, viewBox, and layer names per file
+  image-prompts.md          Text prompts for your own image model
+  mockup-brief.md           Brief, audience, and style interpretation
+  usage-notes.md            How to edit, export, and place the frames
+  manifest.json             Every file written, with byte sizes
+
+EXAMPLES:
+  product-mockup "Usage-based billing dashboard" --scene dashboard -n 3
+  product-mockup --product "AI meeting assistant" --scene device --device phone
+  product-mockup -p "MeterKit" --scene browser --style noir --url https://example.com
+`);
+}
+
+export function parseArgs(argv: string[]): CliOptions {
+  const options: CliOptions = {
+    scene: "browser",
+    device: "auto",
+    variants: 3,
+    style: "polished SaaS, crisp product UI",
+    audience: "software buyers",
+    url: "https://example.com",
+    output: "./product-mockup",
+    json: false,
+  };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    switch (arg) {
+      case "--help":
+      case "-h":
+        printHelp();
+        process.exit(0);
+      case "--version":
+      case "-v":
+        console.log(VERSION);
+        process.exit(0);
+      case "--product":
+      case "-p":
+        options.product = argv[++i];
+        break;
+      case "--title":
+        options.title = argv[++i];
+        break;
+      case "--scene":
+      case "-s": {
+        const value = (argv[++i] ?? "").toLowerCase();
+        if (value !== "browser" && value !== "device" && value !== "dashboard") {
+          throw new Error(`Invalid --scene value: ${value} (expected browser | device | dashboard)`);
+        }
+        options.scene = value;
+        break;
+      }
+      case "--device": {
+        const value = (argv[++i] ?? "").toLowerCase();
+        if (value !== "auto" && value !== "phone" && value !== "laptop") {
+          throw new Error(`Invalid --device value: ${value} (expected auto | phone | laptop)`);
+        }
+        options.device = value;
+        break;
+      }
+      case "--variants":
+      case "-n": {
+        const value = Number.parseInt(argv[++i] ?? "", 10);
+        if (!Number.isFinite(value) || value < 1 || value > 4) {
+          throw new Error(`Invalid --variants value: ${argv[i]} (expected 1-4)`);
+        }
+        options.variants = value;
+        break;
+      }
+      case "--style":
+        options.style = argv[++i] ?? options.style;
+        break;
+      case "--audience":
+        options.audience = argv[++i] ?? options.audience;
+        break;
+      case "--accent": {
+        const value = normalizeHex(argv[++i] ?? "");
+        if (!value) {
+          throw new Error(`Invalid --accent value: ${argv[i]} (expected a hex color such as #2E86C1)`);
+        }
+        options.accent = value;
+        break;
+      }
+      case "--url":
+        options.url = argv[++i] ?? options.url;
+        break;
+      case "--output":
+      case "-o":
+        options.output = argv[++i] ?? options.output;
+        break;
+      case "--json":
+        options.json = true;
+        break;
+      default:
+        if (arg.startsWith("-")) {
+          throw new Error(`Unknown option: ${arg}`);
+        }
+        if (!options.product) {
+          options.product = arg;
+          break;
+        }
+        throw new Error(`Unexpected argument: ${arg}`);
+    }
+  }
+
+  if (!options.product || options.product.trim() === "") {
+    throw new Error("Missing required --product <text> argument (a positional description also works)");
+  }
+
+  return options;
+}
+
+

package/skills/product-mockup/src/design.ts

@@ -0,0 +1,151 @@
+import type { Tokens } from "./types.js";
+
+export function fnv1a(input: string): number {
+  let hash = 0x811c9dc5;
+  for (let i = 0; i < input.length; i += 1) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 0x01000193) >>> 0;
+  }
+  return hash >>> 0;
+}
+
+export function mulberry32(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a = (a + 0x6d2b79f5) >>> 0;
+    let t = a;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* color + style tokens                                                */
+/* ------------------------------------------------------------------ */
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+function hslToHex(h: number, s: number, l: number): string {
+  const hue = ((h % 360) + 360) % 360;
+  const sat = clamp(s, 0, 1);
+  const lit = clamp(l, 0, 1);
+  const c = (1 - Math.abs(2 * lit - 1)) * sat;
+  const x = c * (1 - Math.abs(((hue / 60) % 2) - 1));
+  const m = lit - c / 2;
+  let rgb: [number, number, number];
+  if (hue < 60) rgb = [c, x, 0];
+  else if (hue < 120) rgb = [x, c, 0];
+  else if (hue < 180) rgb = [0, c, x];
+  else if (hue < 240) rgb = [0, x, c];
+  else if (hue < 300) rgb = [x, 0, c];
+  else rgb = [c, 0, x];
+  const toHex = (v: number) =>
+    Math.round((v + m) * 255)
+      .toString(16)
+      .padStart(2, "0")
+      .toUpperCase();
+  return `#${toHex(rgb[0])}${toHex(rgb[1])}${toHex(rgb[2])}`;
+}
+
+export function normalizeHex(token: string): string | null {
+  const match = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(token.trim());
+  if (!match) return null;
+  const body = match[1];
+  const full =
+    body.length === 3
+      ? body
+          .split("")
+          .map((c) => c + c)
+          .join("")
+      : body;
+  return `#${full.toUpperCase()}`;
+}
+
+export interface StylePreset {
+  name: string;
+  dark: boolean;
+  hue: number;
+  radius: number;
+  keywords: string[];
+}
+
+const STYLE_PRESETS: StylePreset[] = [
+  { name: "noir", dark: true, hue: 258, radius: 14, keywords: ["dark", "noir", "midnight", "night", "black"] },
+  { name: "warm", dark: false, hue: 24, radius: 18, keywords: ["warm", "sunset", "amber", "friendly", "human"] },
+  { name: "editorial", dark: false, hue: 8, radius: 4, keywords: ["editorial", "sharp", "print", "serif", "magazine"] },
+  { name: "technical", dark: true, hue: 168, radius: 6, keywords: ["technical", "terminal", "developer", "mono", "engineering"] },
+  { name: "vivid", dark: false, hue: 292, radius: 22, keywords: ["vivid", "bold", "playful", "loud", "energetic"] },
+  { name: "polished", dark: false, hue: 222, radius: 12, keywords: ["polished", "quiet", "refined", "saas", "crisp", "restrained", "clean"] },
+];
+
+export function selectPreset(style: string): StylePreset {
+  const lower = style.toLowerCase();
+  for (const preset of STYLE_PRESETS) {
+    if (preset.keywords.some((keyword) => lower.includes(keyword))) return preset;
+  }
+  return STYLE_PRESETS[STYLE_PRESETS.length - 1];
+}
+
+export function buildTokens(preset: StylePreset, variantIndex: number, accentOverride?: string): Tokens {
+  const hue = (preset.hue + variantIndex * 26) % 360;
+  const accent = accentOverride ?? hslToHex(hue, preset.dark ? 0.66 : 0.62, preset.dark ? 0.6 : 0.48);
+  const accentSoft = hslToHex(hue, preset.dark ? 0.4 : 0.62, preset.dark ? 0.24 : 0.92);
+
+  if (preset.dark) {
+    return {
+      name: preset.name,
+      background: hslToHex(hue, 0.14, 0.09),
+      surface: hslToHex(hue, 0.12, 0.14),
+      surfaceAlt: hslToHex(hue, 0.11, 0.19),
+      border: hslToHex(hue, 0.1, 0.27),
+      text: "#F2F4F8",
+      muted: hslToHex(hue, 0.08, 0.62),
+      accent,
+      accentSoft,
+      radius: preset.radius,
+      dark: true,
+    };
+  }
+
+  return {
+    name: preset.name,
+    background: hslToHex(hue, 0.28, 0.965),
+    surface: "#FFFFFF",
+    surfaceAlt: hslToHex(hue, 0.3, 0.975),
+    border: hslToHex(hue, 0.18, 0.87),
+    text: hslToHex(hue, 0.24, 0.14),
+    muted: hslToHex(hue, 0.1, 0.46),
+    accent,
+    accentSoft,
+    radius: preset.radius,
+    dark: false,
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* svg helpers                                                         */
+/* ------------------------------------------------------------------ */
+
+export function xmlEscape(value: string): string {
+  return value.replace(/[&<>"']/g, (char) => {
+    switch (char) {
+      case "&":
+        return "&amp;";
+      case "<":
+        return "&lt;";
+      case ">":
+        return "&gt;";
+      case '"':
+        return "&quot;";
+      default:
+        return "&apos;";
+    }
+  });
+}
+
+export const FONT_STACK =
+  "'Inter','Helvetica Neue',Helvetica,'Segoe UI',Arial,'DejaVu Sans',sans-serif";
+export const MONO_STACK = "'JetBrains Mono','SF Mono',Menlo,Consolas,'DejaVu Sans Mono',monospace";