@hasna/skills 0.1.59 → 0.1.61

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

@@ -0,0 +1,407 @@
+import { FONT_STACK, MONO_STACK, xmlEscape } from "./design.js";
+import type { SceneInput, SceneOutput } from "./types.js";
+
+export function round(value: number): number {
+  return Math.round(value * 100) / 100;
+}
+
+function rect(
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  fill: string,
+  radius = 0,
+  extra = "",
+): string {
+  return `<rect x="${round(x)}" y="${round(y)}" width="${round(width)}" height="${round(height)}" rx="${round(
+    radius,
+  )}" fill="${fill}"${extra ? ` ${extra}` : ""}/>`;
+}
+
+function text(
+  x: number,
+  y: number,
+  content: string,
+  fill: string,
+  size: number,
+  weight = 500,
+  anchor: "start" | "middle" | "end" = "start",
+  stack = FONT_STACK,
+): string {
+  return `<text x="${round(x)}" y="${round(y)}" font-family="${stack}" font-size="${size}" font-weight="${weight}" fill="${fill}" text-anchor="${anchor}" dominant-baseline="central">${xmlEscape(
+    content,
+  )}</text>`;
+}
+
+function placeholderLines(
+  x: number,
+  y: number,
+  width: number,
+  count: number,
+  fill: string,
+  rng: () => number,
+  lineHeight = 14,
+  gap = 10,
+): string {
+  const parts: string[] = [];
+  for (let i = 0; i < count; i += 1) {
+    const w = width * (0.55 + rng() * 0.45);
+    parts.push(rect(x, y + i * (lineHeight + gap), w, lineHeight, fill, lineHeight / 2, 'fill-opacity="0.55"'));
+  }
+  return parts.join("\n      ");
+}
+
+function truncate(value: string, max: number): string {
+  return value.length <= max ? value : `${value.slice(0, Math.max(0, max - 1)).trimEnd()}…`;
+}
+
+/* ------------------------------------------------------------------ */
+/* scene renderers                                                     */
+/* ------------------------------------------------------------------ */
+
+export function renderBrowser(input: SceneInput): SceneOutput {
+  const { tokens, rng } = input;
+  const width = 1280;
+  const height = 800;
+  const pad = 48;
+  const winX = pad;
+  const winY = pad;
+  const winW = width - pad * 2;
+  const winH = height - pad * 2;
+  const chromeH = 88;
+  const tabH = 38;
+  const r = tokens.radius + 4;
+
+  const tabs = ["Overview", truncate(input.product, 18), "Docs"];
+  let tabX = winX + 76;
+  const tabParts: string[] = [];
+  tabs.forEach((label, i) => {
+    const w = 34 + label.length * 8.2;
+    const active = i === 1;
+    tabParts.push(
+      rect(tabX, winY + 10, w, tabH, active ? tokens.surface : tokens.surfaceAlt, 8),
+      text(tabX + 16, winY + 10 + tabH / 2, label, active ? tokens.text : tokens.muted, 13, active ? 600 : 500),
+    );
+    tabX += w + 8;
+  });
+
+  const contentY = winY + chromeH;
+  const contentH = winH - chromeH;
+  const heroPad = 56;
+
+  const body = `  <rect id="canvas" width="${width}" height="${height}" fill="${tokens.background}"/>
+  <g id="window">
+    ${rect(winX, winY, winW, winH, tokens.surface, r)}
+    ${rect(winX, winY, winW, winH, "none", r, `stroke="${tokens.border}" stroke-width="1"`)}
+  </g>
+  <g id="chrome">
+    ${rect(winX, winY, winW, chromeH, tokens.surfaceAlt, r)}
+    ${rect(winX, winY + chromeH - r, winW, r, tokens.surfaceAlt, 0)}
+    <line x1="${winX}" y1="${contentY}" x2="${winX + winW}" y2="${contentY}" stroke="${tokens.border}" stroke-width="1"/>
+    <circle cx="${winX + 26}" cy="${winY + 28}" r="6" fill="#FF5F57"/>
+    <circle cx="${winX + 46}" cy="${winY + 28}" r="6" fill="#FEBC2E"/>
+    <circle cx="${winX + 66}" cy="${winY + 28}" r="6" fill="#28C840"/>
+  </g>
+  <g id="tab-bar">
+    ${tabParts.join("\n    ")}
+  </g>
+  <g id="url-pill">
+    ${rect(winX + 24, winY + 56, winW - 168, 24, tokens.dark ? tokens.background : "#FFFFFF", 12, `stroke="${tokens.border}" stroke-width="1"`)}
+    <path d="M ${winX + 40} ${winY + 66} a 5 5 0 0 1 10 0 v 4 h -10 z" fill="none" stroke="${tokens.muted}" stroke-width="1.6"/>
+    ${text(winX + 58, winY + 68, input.url, tokens.muted, 12, 500, "start", MONO_STACK)}
+    ${rect(winX + winW - 128, winY + 58, 20, 20, tokens.border, 6)}
+    ${rect(winX + winW - 100, winY + 58, 20, 20, tokens.border, 6)}
+    <circle cx="${winX + winW - 46}" cy="${winY + 68}" r="11" fill="${tokens.accent}"/>
+  </g>
+  <g id="page-content">
+    ${rect(winX + heroPad, contentY + 56, 120, 26, tokens.accentSoft, 13)}
+    ${text(winX + heroPad + 60, contentY + 69, "NEW", tokens.accent, 12, 700, "middle")}
+    ${text(winX + heroPad, contentY + 120, truncate(input.title, 42), tokens.text, 44, 700)}
+    ${placeholderLines(winX + heroPad, contentY + 168, 520, 3, tokens.muted, rng)}
+    ${rect(winX + heroPad, contentY + 258, 168, 48, tokens.accent, tokens.radius)}
+    ${text(winX + heroPad + 84, contentY + 282, "Get started", tokens.dark ? "#0B0D12" : "#FFFFFF", 15, 600, "middle")}
+    ${rect(winX + heroPad + 188, contentY + 258, 148, 48, "none", tokens.radius, `stroke="${tokens.border}" stroke-width="1.5"`)}
+    ${text(winX + heroPad + 262, contentY + 282, "See a demo", tokens.text, 15, 600, "middle")}
+    ${rect(winX + winW - heroPad - 460, contentY + 56, 460, contentH - 112, tokens.surfaceAlt, tokens.radius + 4, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${rect(winX + winW - heroPad - 424, contentY + 96, 388, 34, tokens.border, 8, 'fill-opacity="0.6"')}
+    ${[0, 1, 2]
+      .map((i) =>
+        rect(
+          winX + winW - heroPad - 424,
+          contentY + 154 + i * 78,
+          388,
+          62,
+          tokens.surface,
+          tokens.radius,
+          `stroke="${tokens.border}" stroke-width="1"`,
+        ),
+      )
+      .join("\n    ")}
+    ${[0, 1, 2]
+      .map((i) => `<circle cx="${winX + winW - heroPad - 396}" cy="${contentY + 185 + i * 78}" r="14" fill="${tokens.accentSoft}"/>`)
+      .join("\n    ")}
+  </g>`;
+
+  return {
+    width,
+    height,
+    body,
+    layers: ["canvas", "window", "chrome", "tab-bar", "url-pill", "page-content"],
+    notes: "Desktop browser frame at 1280x800 with traffic lights, a three-tab bar, a URL pill, and a two-column marketing page body.",
+  };
+}
+
+export function renderPhone(input: SceneInput): SceneOutput {
+  const { tokens, rng } = input;
+  const width = 720;
+  const height = 1000;
+  const bodyW = 360;
+  const bodyH = 740;
+  const bodyX = (width - bodyW) / 2;
+  const bodyY = (height - bodyH) / 2;
+  const bezel = 12;
+  const screenX = bodyX + bezel;
+  const screenY = bodyY + bezel;
+  const screenW = bodyW - bezel * 2;
+  const screenH = bodyH - bezel * 2;
+
+  const cards = [0, 1, 2].map((i) =>
+    [
+      rect(screenX + 20, screenY + 250 + i * 108, screenW - 40, 92, tokens.surfaceAlt, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`),
+      `<circle cx="${screenX + 52}" cy="${screenY + 296 + i * 108}" r="18" fill="${tokens.accentSoft}"/>`,
+      rect(screenX + 84, screenY + 278 + i * 108, 140, 12, tokens.text, 6, 'fill-opacity="0.75"'),
+      rect(screenX + 84, screenY + 300 + i * 108, 96, 10, tokens.muted, 5, 'fill-opacity="0.6"'),
+    ].join("\n    "),
+  );
+
+  const body = `  <rect id="canvas" width="${width}" height="${height}" fill="${tokens.background}"/>
+  <g id="device-body">
+    ${rect(bodyX, bodyY, bodyW, bodyH, tokens.dark ? "#15171C" : "#1B1D22", 46)}
+    ${rect(bodyX, bodyY, bodyW, bodyH, "none", 46, 'stroke="#000000" stroke-opacity="0.35" stroke-width="2"')}
+    ${rect(bodyX + bodyW, bodyY + 190, 3, 74, "#2A2D34", 2)}
+    ${rect(bodyX - 3, bodyY + 160, 3, 46, "#2A2D34", 2)}
+  </g>
+  <g id="screen">
+    ${rect(screenX, screenY, screenW, screenH, tokens.surface, 36)}
+  </g>
+  <g id="status-bar">
+    ${text(screenX + 26, screenY + 30, "9:41", tokens.text, 13, 700)}
+    ${rect(screenX + screenW - 74, screenY + 24, 18, 11, tokens.text, 2, 'fill-opacity="0.8"')}
+    ${rect(screenX + screenW - 50, screenY + 23, 26, 13, tokens.text, 4, 'fill-opacity="0.8"')}
+    ${rect(screenX + screenW / 2 - 46, screenY + 6, 92, 26, "#0B0B0F", 13)}
+  </g>
+  <g id="app-content">
+    ${text(screenX + 26, screenY + 92, truncate(input.title, 22), tokens.text, 26, 700)}
+    ${placeholderLines(screenX + 26, screenY + 124, screenW - 80, 2, tokens.muted, rng, 11, 9)}
+    ${rect(screenX + 26, screenY + 182, screenW - 52, 44, tokens.accent, tokens.radius)}
+    ${text(screenX + screenW / 2, screenY + 204, "Continue", tokens.dark ? "#0B0D12" : "#FFFFFF", 15, 600, "middle")}
+    ${cards.join("\n    ")}
+  </g>
+  <g id="tab-bar">
+    ${rect(screenX, screenY + screenH - 76, screenW, 76, tokens.surfaceAlt, 0)}
+    <line x1="${screenX}" y1="${screenY + screenH - 76}" x2="${screenX + screenW}" y2="${screenY + screenH - 76}" stroke="${tokens.border}" stroke-width="1"/>
+    ${[0, 1, 2, 3]
+      .map((i) => {
+        const cx = screenX + screenW * (0.16 + i * 0.226);
+        const active = i === 0;
+        return `<circle cx="${round(cx)}" cy="${screenY + screenH - 46}" r="9" fill="${active ? tokens.accent : tokens.muted}" fill-opacity="${active ? 1 : 0.5}"/>`;
+      })
+      .join("\n    ")}
+    ${rect(screenX + screenW / 2 - 62, screenY + screenH - 16, 124, 5, tokens.muted, 3)}
+  </g>`;
+
+  return {
+    width,
+    height,
+    body,
+    layers: ["canvas", "device-body", "screen", "status-bar", "app-content", "tab-bar"],
+    notes: "Phone bezel at 720x1000 with a rounded body, side buttons, notch, status bar, app content stack, and a four-item tab bar.",
+  };
+}
+
+export function renderLaptop(input: SceneInput): SceneOutput {
+  const { tokens, rng } = input;
+  const width = 1280;
+  const height = 840;
+  const lidW = 960;
+  const lidH = 600;
+  const lidX = (width - lidW) / 2;
+  const lidY = 60;
+  const bezel = 18;
+  const screenX = lidX + bezel;
+  const screenY = lidY + bezel + 10;
+  const screenW = lidW - bezel * 2;
+  const screenH = lidH - bezel * 2 - 10;
+
+  const body = `  <rect id="canvas" width="${width}" height="${height}" fill="${tokens.background}"/>
+  <g id="lid">
+    ${rect(lidX, lidY, lidW, lidH, tokens.dark ? "#15171C" : "#1B1D22", 18)}
+    <circle cx="${width / 2}" cy="${lidY + 14}" r="3" fill="#3A3D44"/>
+  </g>
+  <g id="screen">
+    ${rect(screenX, screenY, screenW, screenH, tokens.surface, 6)}
+  </g>
+  <g id="app-window">
+    ${rect(screenX, screenY, screenW, 44, tokens.surfaceAlt, 6)}
+    <line x1="${screenX}" y1="${screenY + 44}" x2="${screenX + screenW}" y2="${screenY + 44}" stroke="${tokens.border}" stroke-width="1"/>
+    <circle cx="${screenX + 22}" cy="${screenY + 22}" r="5" fill="#FF5F57"/>
+    <circle cx="${screenX + 40}" cy="${screenY + 22}" r="5" fill="#FEBC2E"/>
+    <circle cx="${screenX + 58}" cy="${screenY + 22}" r="5" fill="#28C840"/>
+    ${text(screenX + screenW / 2, screenY + 22, truncate(input.product, 46), tokens.muted, 13, 500, "middle")}
+    ${text(screenX + 48, screenY + 116, truncate(input.title, 40), tokens.text, 34, 700)}
+    ${placeholderLines(screenX + 48, screenY + 158, 420, 3, tokens.muted, rng)}
+    ${rect(screenX + 48, screenY + 244, 152, 42, tokens.accent, tokens.radius)}
+    ${text(screenX + 124, screenY + 265, "Start free", tokens.dark ? "#0B0D12" : "#FFFFFF", 14, 600, "middle")}
+    ${rect(screenX + screenW - 400, screenY + 88, 348, screenH - 152, tokens.surfaceAlt, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${[0, 1, 2, 3, 4, 5, 6]
+      .map((i) => {
+        const h = 30 + Math.floor(rng() * 130);
+        const x = screenX + screenW - 368 + i * 44;
+        const y = screenY + screenH - 120 - h;
+        return rect(x, y, 26, h, i % 2 === 0 ? tokens.accent : tokens.accentSoft, 6);
+      })
+      .join("\n    ")}
+  </g>
+  <g id="base">
+    <path d="M ${lidX - 90} ${lidY + lidH} L ${lidX + lidW + 90} ${lidY + lidH} L ${lidX + lidW + 150} ${lidY + lidH + 34} L ${lidX - 150} ${lidY + lidH + 34} Z" fill="${tokens.dark ? "#1D2026" : "#25282E"}"/>
+    ${rect(width / 2 - 70, lidY + lidH + 4, 140, 6, "#33363D", 3)}
+    <path d="M ${lidX - 150} ${lidY + lidH + 34} L ${lidX + lidW + 150} ${lidY + lidH + 34} L ${lidX + lidW + 150} ${lidY + lidH + 42} L ${lidX - 150} ${lidY + lidH + 42} Z" fill="${tokens.dark ? "#101216" : "#15171B"}"/>
+  </g>`;
+
+  return {
+    width,
+    height,
+    body,
+    layers: ["canvas", "lid", "screen", "app-window", "base"],
+    notes: "Laptop mockup at 1280x840 with a bezelled lid, camera dot, in-screen app window, bar chart panel, and a tapered base.",
+  };
+}
+
+export function renderDashboard(input: SceneInput): SceneOutput {
+  const { tokens, rng } = input;
+  const width = 1440;
+  const height = 900;
+  const sidebarW = 240;
+  const headerH = 72;
+  const gutter = 28;
+  const contentX = sidebarW + gutter;
+  const contentW = width - sidebarW - gutter * 2;
+
+  const navItems = ["Overview", "Usage", "Customers", "Billing", "Reports", "Settings"];
+  const nav = navItems
+    .map((label, i) => {
+      const y = headerH + 34 + i * 46;
+      const active = i === 0;
+      return [
+        active ? rect(14, y - 4, sidebarW - 28, 38, tokens.accentSoft, tokens.radius) : "",
+        `<circle cx="38" cy="${y + 15}" r="7" fill="${active ? tokens.accent : tokens.muted}" fill-opacity="${active ? 1 : 0.55}"/>`,
+        text(58, y + 15, label, active ? tokens.text : tokens.muted, 14, active ? 600 : 500),
+      ]
+        .filter(Boolean)
+        .join("\n    ");
+    })
+    .join("\n    ");
+
+  const kpiSpecs: Array<{ label: string; value: () => string }> = [
+    { label: "MRR", value: () => `$${(Math.floor(rng() * 800) + 120).toLocaleString("en-US")}k` },
+    { label: "Active seats", value: () => `${(Math.floor(rng() * 9000) + 400).toLocaleString("en-US")}` },
+    { label: "Churn", value: () => `${(rng() * 3 + 0.4).toFixed(1)}%` },
+    { label: "NRR", value: () => `${Math.floor(rng() * 40) + 100}%` },
+  ];
+  const kpiW = (contentW - gutter * 3) / 4;
+  const kpis = kpiSpecs
+    .map(({ label, value: makeValue }, i) => {
+      const x = contentX + i * (kpiW + gutter);
+      const y = headerH + gutter;
+      const value = makeValue();
+      const delta = `${rng() > 0.35 ? "+" : "-"}${(rng() * 12).toFixed(1)}%`;
+      return [
+        rect(x, y, kpiW, 118, tokens.surface, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`),
+        text(x + 20, y + 30, label, tokens.muted, 12, 600),
+        text(x + 20, y + 66, value, tokens.text, 30, 700),
+        rect(x + 20, y + 90, 64, 20, tokens.accentSoft, 10),
+        text(x + 52, y + 100, delta, tokens.accent, 11, 600, "middle"),
+      ].join("\n    ");
+    })
+    .join("\n    ");
+
+  const chartY = headerH + gutter + 118 + gutter;
+  const chartH = 300;
+  const chartW = contentW * 0.62;
+  const bars = Array.from({ length: 12 }, (_, i) => {
+    const h = 40 + Math.floor(rng() * (chartH - 130));
+    const barW = (chartW - 96) / 12 - 12;
+    const x = contentX + 48 + i * ((chartW - 96) / 12);
+    return rect(x, chartY + chartH - 48 - h, barW, h, i === 8 ? tokens.accent : tokens.accentSoft, 6);
+  }).join("\n    ");
+
+  const linePoints = Array.from({ length: 12 }, (_, i) => {
+    const x = contentX + chartW + gutter + 40 + i * ((contentW - chartW - gutter - 80) / 11);
+    const y = chartY + 90 + Math.floor(rng() * 140);
+    return `${round(x)},${round(y)}`;
+  }).join(" ");
+
+  const tableY = chartY + chartH + gutter;
+  const rows = Array.from({ length: 4 }, (_, i) => {
+    const y = tableY + 66 + i * 44;
+    return [
+      `<circle cx="${contentX + 34}" cy="${y}" r="11" fill="${tokens.accentSoft}"/>`,
+      rect(contentX + 56, y - 6, 150 + Math.floor(rng() * 80), 12, tokens.text, 6, 'fill-opacity="0.72"'),
+      rect(contentX + contentW * 0.45, y - 6, 90, 12, tokens.muted, 6, 'fill-opacity="0.5"'),
+      rect(contentX + contentW * 0.66, y - 6, 70, 12, tokens.muted, 6, 'fill-opacity="0.5"'),
+      rect(contentX + contentW - 96, y - 12, 72, 24, tokens.accentSoft, 12),
+    ].join("\n    ");
+  }).join("\n    ");
+
+  const body = `  <rect id="canvas" width="${width}" height="${height}" fill="${tokens.background}"/>
+  <g id="sidebar">
+    ${rect(0, 0, sidebarW, height, tokens.surface, 0)}
+    <line x1="${sidebarW}" y1="0" x2="${sidebarW}" y2="${height}" stroke="${tokens.border}" stroke-width="1"/>
+    ${rect(20, 24, 26, 26, tokens.accent, 8)}
+    ${text(58, 37, truncate(input.product, 16), tokens.text, 15, 700)}
+    ${nav}
+  </g>
+  <g id="header">
+    ${rect(sidebarW, 0, width - sidebarW, headerH, tokens.surface, 0)}
+    <line x1="${sidebarW}" y1="${headerH}" x2="${width}" y2="${headerH}" stroke="${tokens.border}" stroke-width="1"/>
+    ${text(contentX, headerH / 2, truncate(input.title, 44), tokens.text, 20, 700)}
+    ${rect(width - 300, 20, 180, 32, tokens.surfaceAlt, 16, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${text(width - 282, 36, "Search", tokens.muted, 12, 500)}
+    ${rect(width - 104, 20, 32, 32, tokens.accentSoft, 16)}
+    <circle cx="${width - 44}" cy="36" r="16" fill="${tokens.accent}"/>
+  </g>
+  <g id="kpi-row">
+    ${kpis}
+  </g>
+  <g id="chart-bar">
+    ${rect(contentX, chartY, chartW, chartH, tokens.surface, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${text(contentX + 24, chartY + 32, "Revenue by month", tokens.text, 14, 600)}
+    <line x1="${contentX + 32}" y1="${chartY + chartH - 48}" x2="${contentX + chartW - 32}" y2="${chartY + chartH - 48}" stroke="${tokens.border}" stroke-width="1"/>
+    ${bars}
+  </g>
+  <g id="chart-line">
+    ${rect(contentX + chartW + gutter, chartY, contentW - chartW - gutter, chartH, tokens.surface, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${text(contentX + chartW + gutter + 24, chartY + 32, "Activation trend", tokens.text, 14, 600)}
+    <polyline points="${linePoints}" fill="none" stroke="${tokens.accent}" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+  <g id="table">
+    ${rect(contentX, tableY, contentW, height - tableY - gutter, tokens.surface, tokens.radius, `stroke="${tokens.border}" stroke-width="1"`)}
+    ${text(contentX + 24, tableY + 30, "Recent accounts", tokens.text, 14, 600)}
+    <line x1="${contentX}" y1="${tableY + 48}" x2="${contentX + contentW}" y2="${tableY + 48}" stroke="${tokens.border}" stroke-width="1"/>
+    ${rows}
+  </g>`;
+
+  return {
+    width,
+    height,
+    body,
+    layers: ["canvas", "sidebar", "header", "kpi-row", "chart-bar", "chart-line", "table"],
+    notes: "Analytics dashboard at 1440x900 with a six-item sidebar, header search, four KPI cards, a bar chart, a line chart, and a four-row table.",
+  };
+}
+
+/* ------------------------------------------------------------------ */
+/* cli                                                                 */
+/* ------------------------------------------------------------------ */
+

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

@@ -0,0 +1,66 @@
+export type Scene = "browser" | "device" | "dashboard";
+export type DeviceKind = "auto" | "phone" | "laptop";
+
+export interface CliOptions {
+  product?: string;
+  title?: string;
+  scene: Scene;
+  device: DeviceKind;
+  variants: number;
+  style: string;
+  audience: string;
+  accent?: string;
+  url: string;
+  output: string;
+  json: boolean;
+}
+
+export interface Tokens {
+  name: string;
+  background: string;
+  surface: string;
+  surfaceAlt: string;
+  border: string;
+  text: string;
+  muted: string;
+  accent: string;
+  accentSoft: string;
+  radius: number;
+  dark: boolean;
+}
+
+export interface VariantPlan {
+  id: string;
+  index: number;
+  seed: number;
+  scene: Scene;
+  device?: "phone" | "laptop";
+  width: number;
+  height: number;
+  file: string;
+  tokens: Tokens;
+  layers: string[];
+  notes: string;
+}
+
+/* ------------------------------------------------------------------ */
+/* deterministic randomness                                            */
+/* ------------------------------------------------------------------ */
+
+export interface SceneInput {
+  title: string;
+  product: string;
+  url: string;
+  tokens: Tokens;
+  rng: () => number;
+  index: number;
+}
+
+export interface SceneOutput {
+  width: number;
+  height: number;
+  body: string;
+  layers: string[];
+  notes: string;
+}
+

package/skills/product-mockup/tsconfig.json

@@ -1,8 +1,17 @@
 {
   "extends": "../tsconfig.base.json",
   "compilerOptions": {
+    "module": "ESNext",
     "outDir": "./dist",
-    "rootDir": "./src"
+    "rootDir": "./src",
+    "resolveJsonModule": true,
+    "noEmit": true
   },
-  "include": ["src/**/*"]
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "node_modules",
+    "dist"
+  ]
 }

package/skills/proposal-pack/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: proposal-pack
-description: Generate premium client proposal packages with proposal, SOW, pricing, timeline, assumptions, cover email, Markdown, and PDF artifacts.
+description: Generate client proposal packages with proposal, SOW, pricing, timeline, assumptions, cover email, Markdown, and PDF artifacts.
+kind: instruction
 ---
 
 # Proposal Pack
@@ -9,32 +10,28 @@ Generate a client-ready proposal package for agencies, consultants, SaaS service
 
 ## 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 proposal-pack --client "Acme" --project "AI onboarding workflow" --budget "25k USD" --timeline "6 weeks"
-skills run proposal-pack "Revamp the customer onboarding portal" --services "Discovery,Design,Build,Training"
-```
+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 |
 |--------|-------------|---------|
-| `--project <text>` | Project scope or proposal brief. Positional text also works. | required |
-| `--client <name>` | Client or account name. | Client |
-| `--budget <text>` | Budget range or fixed price. | To be confirmed |
-| `--timeline <text>` | Delivery timeline. | 4-6 weeks |
-| `--services <list>` | Comma-separated services or workstreams. | discovery, implementation, enablement |
-| `--tone <tone>` | `executive`, `friendly`, or `technical`. | executive |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `project` | Project scope or proposal brief. Positional text also works. | required |
+| `client` | Client or account name. | Client |
+| `budget` | Budget range or fixed price. | To be confirmed |
+| `timeline` | Delivery timeline. | 4-6 weeks |
+| `services` | Comma-separated services or workstreams. | discovery, implementation, enablement |
+| `tone` | `executive`, `friendly`, or `technical`. | executive |
 
-## Outputs
+## Deliverables
 
 - `proposal.md`
-- `proposal.pdf`
 - `statement-of-work.md`
 - `pricing.csv`
 - `timeline.csv`
@@ -42,4 +39,15 @@ skills run proposal-pack "Revamp the customer onboarding portal" --services "Dis
 - `cover-email.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. Open by restating the client's problem in their words. A proposal that starts
+   with your company loses before it is read.
+2. Scope by outcome, then by deliverable. Make the exclusions explicit — most
+   disputes come from what was never written down.
+3. Tie pricing to the scope structure so a scope change has an obvious price
+   consequence.
+4. Build the timeline with client-side dependencies named, since those are the
+   usual cause of slip.
+5. List assumptions plainly; each one is a risk you are asking the client to accept.
+6. Keep the cover email short: problem, approach, price range, next step.

package/skills/proposal-pack/package.json

@@ -2,10 +2,9 @@
   "name": "proposal-pack",
   "version": "0.1.0",
   "private": true,
-  "description": "Generate client proposal packages through the hosted Skills runtime",
+  "description": "Generate client proposal packages",
   "type": "module",
   "skills": {
-    "runtime": "hosted",
-    "source": "remote"
+    "kind": "instruction"
   }
 }

package/skills/repo-onboarding-report/SKILL.md

@@ -1,6 +1,7 @@
 ---
 name: repo-onboarding-report
-description: Generate premium repository onboarding reports with architecture maps, setup guides, first-week plans, code inventory, risk register, and manifest metadata.
+description: Generate repository onboarding reports with architecture maps, setup guides, first-week plans, code inventory, risk register, and manifest metadata.
+kind: instruction
 ---
 
 # Repo Onboarding Report
@@ -9,27 +10,24 @@ Generate a practical onboarding package for a software repository so a new engin
 
 ## 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 repo-onboarding-report --target ./my-app --name "Acme Web App" --stack "Next.js SaaS"
-skills run repo-onboarding-report --target . --focus "architecture,setup,testing,risks"
-```
+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 <path>` | Repository directory to inspect. | current directory |
-| `--name <text>` | Project name used in report titles. | package name or folder name |
-| `--stack <text>` | Stack or product context. | inferred from repository files |
-| `--focus <list>` | Comma-separated focus areas. | architecture,setup,testing,risks,first-week |
-| `--output <dir>` | Output directory for direct local execution. Hosted runs use the run export directory. | run export dir |
+| `target` | Repository directory to inspect. | current directory |
+| `name` | Project name used in report titles. | package name or folder name |
+| `stack` | Stack or product context. | inferred from repository files |
+| `focus` | Comma-separated focus areas. | architecture,setup,testing,risks,first-week |
 
-## Outputs
+## Deliverables
 
 - `repo-onboarding-report.md`
 - `architecture-map.md`
@@ -39,4 +37,16 @@ skills run repo-onboarding-report --target . --focus "architecture,setup,testing
 - `risk-register.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. Explore before you explain. Read the entry points, the build config, the test
+   setup, and the largest modules; do not summarize the README back to the user.
+2. Draw the architecture as the flow of a real request or command through the
+   system, naming the files it passes through.
+3. Write setup as a verified sequence — every command you list must be one you
+   found evidence for in the repo.
+4. Build the code inventory around responsibility ("where auth lives"), not
+   directory listing.
+5. Record risks concretely: untested paths, stale dependencies, undocumented
+   env vars, single points of knowledge.
+6. Make the first-week plan a series of increasingly non-trivial real tasks.

package/skills/repo-onboarding-report/package.json

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

package/skills/security-audit/src/index.ts

@@ -47,7 +47,7 @@ const outputArg = args.find(a => a.startsWith("output="))?.split("=")[1];
 // Simple regex patterns for demonstration
 const PATTERNS = [
   { name: "AWS Access Key", regex: /AKIA[0-9A-Z]{16}/, severity: "CRITICAL" },
-  { name: "Private Key", regex: /-----BEGIN PRIVATE KEY-----/, severity: "CRITICAL" },
+  { name: "Private Key", regex: /-----BEGIN PRIVATE KEY-----/, severity: "CRITICAL" }, // hasna:allow-secret
   { name: "Generic API Key", regex: /api_key\s*[:=]\s*['"][a-zA-Z0-9]{20,}['"]/, severity: "HIGH" },
   { name: "Hardcoded Password", regex: /password\s*[:=]\s*['"][a-zA-Z0-9]{8,}['"]/, severity: "HIGH" },
   { name: "Eval Usage", regex: /eval\(/, severity: "MEDIUM" },