@hasna/skills 0.1.62 → 0.1.63

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

@@ -1,49 +0,0 @@
----
-name: performance-audit-report
-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
-
-Generate a performance audit package from a URL, repo notes, trace summary, or product brief. Hosted runs can gather richer measurements, while local direct execution produces deterministic artifacts for validation.
-
-## Requirements
-
-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
-
-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.
-
-## Inputs
-
-| Input | Description | Default |
-|--------|-------------|---------|
-| `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 |
-
-## Deliverables
-
-- `performance-audit-report.md`
-- `findings.csv`
-- `performance-budget.json`
-- `remediation-plan.md`
-- `metrics.json`
-- `manifest.json`
-
-## 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

@@ -1,10 +0,0 @@
-{
-  "name": "performance-audit-report",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Hosted premium performance audit report generator",
-  "type": "module",
-  "skills": {
-    "kind": "instruction"
-  }
-}

package/skills/pitch-deck/SKILL.md

@@ -1,51 +0,0 @@
----
-name: pitch-deck
-description: Generate investor or sales pitch deck packages with PPTX, PDF, notes, and design direction.
-kind: instruction
----
-
-# Pitch Deck
-
-Generate investor or sales deck packages from a short brief.
-
-## Requirements
-
-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
-
-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.
-
-## Inputs
-
-| Input | Description | Default |
-|--------|-------------|---------|
-| `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 |
-
-## Deliverables
-
-- `deck.md`
-- `slides.json`
-- `speaker-notes.md`
-- `design-direction.md`
-- `manifest.json`
-
-## 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

@@ -1,10 +0,0 @@
-{
-  "name": "pitch-deck",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Hosted skill metadata for pitch-deck",
-  "type": "module",
-  "skills": {
-    "kind": "instruction"
-  }
-}

package/skills/product-mockup/SKILL.md

@@ -1,107 +0,0 @@
----
-name: product-mockup
-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
-
-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
-
-- 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
-# 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>`, `-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
-
-| 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

@@ -1,32 +0,0 @@
-{
-  "name": "product-mockup",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Generate parametric SVG product mockup frames with scene plans, asset metadata, and image prompts",
-  "type": "module",
-  "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

@@ -1,150 +0,0 @@
-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

@@ -1,151 +0,0 @@
-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";