@hasna/skills 0.1.62 → 0.1.64

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

@@ -1,134 +0,0 @@
-import type { CliOptions, VariantPlan } from "./types.js";
-
-export function imagePrompts(options: CliOptions, plans: VariantPlan[]): string {
-  return `# Image prompts — ${options.product}
-
-The SVG frames in \`variants/\` are drawn deterministically by this skill and are
-ready to use as-is. This file is the *other* half: written prompts you can paste
-into whichever image model you use. **This skill never calls an image model and
-never needs a key** — copy a prompt out and run it wherever you like.
-
-- Product: ${options.product}
-- Audience: ${options.audience}
-- Style direction: ${options.style}
-- Scene family: ${options.scene}
-
-## Prompt anatomy
-
-\`\`\`
-<subject and surface> , <composition> , <lighting> , <color> , <finish> , <negatives>
-\`\`\`
-
-Keep the subject concrete, name the camera position, and always add negatives —
-image models over-decorate product shots by default.
-
-${plans
-  .map(
-    (plan) => `## ${plan.id} — ${plan.scene}${plan.device ? ` (${plan.device})` : ""}
-
-**Prompt**
-
-> ${promptFor(options, plan)}
-
-**Negative prompt**
-
-> lorem ipsum text, garbled letterforms, watermark, stock-photo people, heavy drop shadows, lens flare, skeuomorphic gradients, cluttered UI, extra fingers, distorted geometry
-
-**Settings to try**: ${plan.width}x${plan.height} (matches \`${plan.file}\`), guidance 5-7, 2 seeds per prompt.
-`,
-  )
-  .join("\n")}
-## Compositing recipe
-
-1. Render the prompt above at the same aspect ratio as the matching SVG.
-2. Open the SVG, delete the \`canvas\` layer, and export the frame with a transparent background.
-3. Place the generated image behind the frame — the SVG layer names in
-   \`asset-metadata.json\` tell you exactly what each group is.
-4. Keep the real UI text in the SVG layer. Image models still cannot render legible product copy.
-`;
-}
-
-function promptFor(options: CliOptions, plan: VariantPlan): string {
-  const surface =
-    plan.scene === "dashboard"
-      ? "a wide analytics dashboard screen floating on a soft studio backdrop"
-      : plan.device === "phone"
-        ? "a modern smartphone held upright, screen facing the camera"
-        : plan.device === "laptop"
-          ? "an open thin-bezel laptop on a clean desk, screen facing the camera"
-          : "a desktop browser window floating in a clean studio space";
-  const tone = plan.tokens.dark ? "low-key lighting, deep charcoal background" : "bright even lighting, soft neutral background";
-  return `Product marketing shot of ${surface} showing ${options.product} for ${options.audience}, ${options.style}, three-quarter camera at eye level with a slight perspective, ${tone}, accent color ${plan.tokens.accent}, crisp focus edge to edge, subtle contact shadow, high-detail render, no text artifacts`;
-}
-
-export function mockupBrief(options: CliOptions, plans: VariantPlan[]): string {
-  return `# Mockup brief — ${options.product}
-
-| Field | Value |
-|-------|-------|
-| Product | ${options.product} |
-| Headline in frame | ${options.title ?? options.product} |
-| Audience | ${options.audience} |
-| Scene | ${options.scene} |
-| Style input | ${options.style} |
-| Style preset matched | ${plans[0].tokens.name} |
-| Variants | ${options.variants} |
-
-## What was generated
-
-${plans
-  .map(
-    (plan) =>
-      `- **${plan.id}** — ${plan.notes} Accent \`${plan.tokens.accent}\`, surface \`${plan.tokens.surface}\`, seed \`${plan.seed}\`.`,
-  )
-  .join("\n")}
-
-## Reproducibility
-
-Variant geometry is seeded from the product text, scene, style, and variant
-index. Re-running the same command reproduces the same SVGs exactly. Change
-\`--style\` or \`--accent\` to move the palette without changing the layout.
-`;
-}
-
-export function usageNotes(options: CliOptions, plans: VariantPlan[]): string {
-  return `# Usage notes
-
-## Editing
-
-Every frame is plain SVG with named groups. Open it in Figma (File > Import),
-Illustrator, Inkscape, or a text editor. The group ids are listed per file in
-\`asset-metadata.json\`; the common ones are:
-
-- \`canvas\` — the full-bleed background rect. Delete it for a transparent export.
-- \`chrome\` / \`device-body\` / \`lid\` — the frame hardware.
-- \`page-content\` / \`app-content\` / \`app-window\` — the screen contents you will
-  usually replace with a real screenshot.
-- \`kpi-row\`, \`chart-bar\`, \`chart-line\`, \`table\` — dashboard modules.
-
-## Dropping in a real screenshot
-
-1. Delete the content group (\`page-content\`, \`app-content\`, or the dashboard modules).
-2. Place your screenshot and clip it to the \`screen\` rect.
-3. Keep the frame hardware on top so the bezel corners stay clean.
-
-## Exporting
-
-\`\`\`bash
-# any SVG renderer works; here are two common ones
-rsvg-convert -w 2560 variants/variant-01.svg -o variant-01@2x.png
-inkscape variants/variant-01.svg --export-type=png --export-width=2560
-\`\`\`
-
-## Sizes in this package
-
-${plans.map((plan) => `- \`${plan.file}\` — ${plan.width}x${plan.height}`).join("\n")}
-
-## Color
-
-The accent rotates per variant so a set reads as a family rather than a repeat.
-Pass \`--accent "#RRGGBB"\` to lock every variant to your brand color.
-`;
-}
-
-

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

@@ -1,182 +0,0 @@
-#!/usr/bin/env bun
-
-import { mkdir, writeFile } from "fs/promises";
-import { join, resolve, relative } from "path";
-
-import { parseArgs } from "./cli.js";
-import { buildTokens, fnv1a, mulberry32, selectPreset, xmlEscape } from "./design.js";
-import { imagePrompts, mockupBrief, usageNotes } from "./docs.js";
-import { renderBrowser, renderDashboard, renderLaptop, renderPhone, round } from "./render.js";
-import type { SceneInput, VariantPlan } from "./types.js";
-
-const VERSION = "0.1.0";
-
-interface WrittenFile {
-  path: string;
-  type: string;
-  bytes: number;
-}
-
-async function writeOutput(
-  outDir: string,
-  relPath: string,
-  contents: string,
-  type: string,
-  files: WrittenFile[],
-): Promise<void> {
-  const target = join(outDir, relPath);
-  await mkdir(join(target, ".."), { recursive: true });
-  await writeFile(target, contents, "utf8");
-  files.push({ path: relPath, type, bytes: Buffer.byteLength(contents, "utf8") });
-}
-
-
-async function main(): Promise<void> {
-  const options = parseArgs(process.argv.slice(2));
-  const product = options.product!.trim();
-  const title = (options.title ?? product).trim();
-  const outDir = resolve(options.output);
-  const preset = selectPreset(options.style);
-
-  const files: WrittenFile[] = [];
-  const plans: VariantPlan[] = [];
-
-  for (let i = 0; i < options.variants; i += 1) {
-    const index = i + 1;
-    const id = `variant-${String(index).padStart(2, "0")}`;
-    const seed = fnv1a(`${product}|${title}|${options.scene}|${options.style}|${index}`);
-    const rng = mulberry32(seed);
-    const tokens = buildTokens(preset, i, options.accent);
-
-    let device: "phone" | "laptop" | undefined;
-    if (options.scene === "device") {
-      device = options.device === "auto" ? (i % 2 === 0 ? "phone" : "laptop") : options.device;
-    }
-
-    const sceneInput: SceneInput = { title, product, url: options.url, tokens, rng, index };
-    const rendered =
-      options.scene === "dashboard"
-        ? renderDashboard(sceneInput)
-        : options.scene === "device"
-          ? device === "laptop"
-            ? renderLaptop(sceneInput)
-            : renderPhone(sceneInput)
-          : renderBrowser(sceneInput);
-
-    const file = `variants/${id}.svg`;
-    const svg = `<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${rendered.width} ${rendered.height}" width="${rendered.width}" height="${rendered.height}" role="img" aria-labelledby="title-${index} desc-${index}">
-  <title id="title-${index}">${xmlEscape(`${title} — ${options.scene} mockup ${index}`)}</title>
-  <desc id="desc-${index}">${xmlEscape(rendered.notes)}</desc>
-${rendered.body}
-</svg>
-`;
-
-    await writeOutput(outDir, file, svg, "image/svg+xml", files);
-
-    plans.push({
-      id,
-      index,
-      seed,
-      scene: options.scene,
-      device,
-      width: rendered.width,
-      height: rendered.height,
-      file,
-      tokens,
-      layers: rendered.layers,
-      notes: rendered.notes,
-    });
-  }
-
-  const scenePlan = {
-    product,
-    title,
-    audience: options.audience,
-    scene: options.scene,
-    style: { input: options.style, preset: preset.name, dark: preset.dark },
-    url: options.url,
-    variants: plans.map((plan) => ({
-      id: plan.id,
-      seed: plan.seed,
-      scene: plan.scene,
-      device: plan.device ?? null,
-      file: plan.file,
-      tokens: plan.tokens,
-      notes: plan.notes,
-    })),
-  };
-
-  const assetMetadata = {
-    generatedAt: new Date().toISOString(),
-    assets: plans.map((plan) => ({
-      file: plan.file,
-      format: "svg",
-      width: plan.width,
-      height: plan.height,
-      viewBox: `0 0 ${plan.width} ${plan.height}`,
-      aspectRatio: round(plan.width / plan.height),
-      layers: plan.layers,
-      accent: plan.tokens.accent,
-      background: plan.tokens.background,
-      dark: plan.tokens.dark,
-    })),
-  };
-
-  await writeOutput(outDir, "scene-plan.json", `${JSON.stringify(scenePlan, null, 2)}\n`, "application/json", files);
-  await writeOutput(
-    outDir,
-    "asset-metadata.json",
-    `${JSON.stringify(assetMetadata, null, 2)}\n`,
-    "application/json",
-    files,
-  );
-  await writeOutput(outDir, "image-prompts.md", imagePrompts(options, plans), "text/markdown", files);
-  await writeOutput(outDir, "mockup-brief.md", mockupBrief(options, plans), "text/markdown", files);
-  await writeOutput(outDir, "usage-notes.md", usageNotes(options, plans), "text/markdown", files);
-
-  const manifest = {
-    skill: "product-mockup",
-    version: VERSION,
-    generatedAt: new Date().toISOString(),
-    deterministic: true,
-    input: {
-      product,
-      title,
-      scene: options.scene,
-      device: options.device,
-      variants: options.variants,
-      style: options.style,
-      stylePreset: preset.name,
-      audience: options.audience,
-      accent: options.accent ?? null,
-      url: options.url,
-    },
-    outputDir: outDir,
-    files: files.slice().sort((a, b) => a.path.localeCompare(b.path)),
-  };
-
-  const manifestPath = join(outDir, "manifest.json");
-  await mkdir(outDir, { recursive: true });
-  await writeFile(manifestPath, `${JSON.stringify(manifest, null, 2)}\n`, "utf8");
-
-  if (options.json) {
-    process.stdout.write(`${JSON.stringify({ ...manifest, scenePlan, assetMetadata }, null, 2)}\n`);
-    return;
-  }
-
-  console.log(`product-mockup: wrote ${files.length + 1} files to ${outDir}`);
-  console.log(`  product    ${product}`);
-  console.log(`  scene      ${options.scene}${options.scene === "device" ? ` (${options.device})` : ""}`);
-  console.log(`  style      ${options.style} -> preset "${preset.name}"${preset.dark ? " (dark)" : ""}`);
-  for (const plan of plans) {
-    console.log(`  ${plan.id}  ${plan.width}x${plan.height}  accent ${plan.tokens.accent}  layers: ${plan.layers.join(", ")}`);
-  }
-  console.log(`  manifest   ${relative(process.cwd(), manifestPath) || manifestPath}`);
-}
-
-main().catch((error) => {
-  const message = error instanceof Error ? error.message : String(error);
-  process.stderr.write(`product-mockup: ${message}\n`);
-  process.exit(1);
-});