@hasna/skills 0.1.60 → 0.1.62

package/skills/logo-design/src/geometry.ts

@@ -0,0 +1,324 @@
+import { CANVAS, MARGIN, SAFE } from "./constants.js";
+import { FONT_STACK, initialsOf, pick, polygonPoints, round, xmlEscape } from "./palette.js";
+import type { Geometry, Palette } from "./types.js";
+
+const CONTAINERS = ["circle", "squircle", "hexagon", "shield"] as const;
+
+function containerShape(kind: (typeof CONTAINERS)[number], fill: string): string {
+  const cx = CANVAS / 2;
+  switch (kind) {
+    case "circle":
+      return `  <circle id="container" cx="${cx}" cy="${cx}" r="${SAFE / 2}" fill="${fill}"/>`;
+    case "squircle":
+      return `  <rect id="container" x="${MARGIN}" y="${MARGIN}" width="${SAFE}" height="${SAFE}" rx="${round(
+        SAFE * 0.26,
+      )}" fill="${fill}"/>`;
+    case "hexagon":
+      return `  <polygon id="container" points="${polygonPoints(cx, cx, SAFE / 2, 6, -Math.PI / 2)}" fill="${fill}"/>`;
+    default:
+      return `  <path id="container" d="M ${cx} ${MARGIN} L ${CANVAS - MARGIN} ${MARGIN + 26} L ${
+        CANVAS - MARGIN
+      } ${cx + 18} Q ${CANVAS - MARGIN} ${CANVAS - MARGIN} ${cx} ${CANVAS - MARGIN} Q ${MARGIN} ${
+        CANVAS - MARGIN
+      } ${MARGIN} ${cx + 18} L ${MARGIN} ${MARGIN + 26} Z" fill="${fill}"/>`;
+  }
+}
+
+export const GEOMETRIES: Geometry[] = [
+  {
+    name: "monogram",
+    build: ({ rng, palette, brand }) => {
+      const container = pick(rng, CONTAINERS);
+      const initials = initialsOf(brand);
+      const fontSize = initials.length > 1 ? 92 : 118;
+      const barY = CANVAS - MARGIN - 14;
+      return {
+        description: `Brand initials "${initials}" knocked out of a solid ${container} container with an accent underline.`,
+        body: [
+          containerShape(container, palette.primary),
+          `  <text id="monogram" x="${CANVAS / 2}" y="${CANVAS / 2 + 2}" text-anchor="middle" dominant-baseline="central" font-family="${FONT_STACK}" font-size="${fontSize}" font-weight="700" letter-spacing="-2" fill="${palette.background}">${xmlEscape(
+            initials,
+          )}</text>`,
+          `  <rect id="accent-bar" x="${CANVAS / 2 - 26}" y="${barY}" width="52" height="8" rx="4" fill="${palette.accent}"/>`,
+        ].join("\n"),
+      };
+    },
+  },
+  {
+    name: "glyph-grid",
+    build: ({ rng, palette }) => {
+      const cells = rng() > 0.5 ? 4 : 3;
+      const gap = 10;
+      const size = (SAFE - gap * (cells - 1)) / cells;
+      const parts: string[] = [];
+      const half = Math.ceil(cells / 2);
+      const plan: string[][] = [];
+      for (let row = 0; row < cells; row += 1) {
+        const rowPlan: string[] = [];
+        for (let col = 0; col < half; col += 1) {
+          const roll = rng();
+          rowPlan.push(roll < 0.22 ? "none" : roll < 0.52 ? "square" : roll < 0.8 ? "circle" : "triangle");
+        }
+        for (let col = 0; col < cells; col += 1) {
+          rowPlan[col] = rowPlan[col] ?? rowPlan[cells - 1 - col];
+        }
+        plan.push(rowPlan);
+      }
+      let filled = 0;
+      for (let row = 0; row < cells; row += 1) {
+        for (let col = 0; col < cells; col += 1) {
+          const shape = plan[row][col];
+          if (shape === "none") continue;
+          filled += 1;
+          const x = MARGIN + col * (size + gap);
+          const y = MARGIN + row * (size + gap);
+          const fill = (row + col) % 2 === 0 ? palette.primary : palette.accent;
+          if (shape === "square") {
+            parts.push(
+              `  <rect x="${round(x)}" y="${round(y)}" width="${round(size)}" height="${round(size)}" rx="${round(
+                size * 0.22,
+              )}" fill="${fill}"/>`,
+            );
+          } else if (shape === "circle") {
+            parts.push(
+              `  <circle cx="${round(x + size / 2)}" cy="${round(y + size / 2)}" r="${round(size / 2)}" fill="${fill}"/>`,
+            );
+          } else {
+            parts.push(
+              `  <polygon points="${round(x + size / 2)},${round(y)} ${round(x + size)},${round(
+                y + size,
+              )} ${round(x)},${round(y + size)}" fill="${fill}"/>`,
+            );
+          }
+        }
+      }
+      return {
+        description: `${cells}x${cells} modular glyph grid, mirrored across the vertical axis, ${filled} active cells alternating primary and accent.`,
+        body: `  <g id="glyph-grid">\n${parts.join("\n")}\n  </g>`,
+      };
+    },
+  },
+  {
+    name: "orbit",
+    build: ({ rng, palette }) => {
+      const cx = CANVAS / 2;
+      const ringWidth = 14 + Math.floor(rng() * 8);
+      const outer = SAFE / 2 - ringWidth / 2;
+      const gapDegrees = 40 + Math.floor(rng() * 50);
+      const circumference = 2 * Math.PI * outer;
+      const dash = circumference * (1 - gapDegrees / 360);
+      const rotation = Math.floor(rng() * 360);
+      const dotAngle = ((rotation - 90 + gapDegrees / 2) * Math.PI) / 180;
+      return {
+        description: `Open orbital ring with a ${gapDegrees} degree aperture, a solid accent core, and a satellite dot on the ring path.`,
+        body: [
+          `  <g id="orbit" transform="rotate(${rotation} ${cx} ${cx})">`,
+          `    <circle cx="${cx}" cy="${cx}" r="${round(outer)}" fill="none" stroke="${palette.primary}" stroke-width="${ringWidth}" stroke-linecap="round" stroke-dasharray="${round(
+            dash,
+          )} ${round(circumference - dash)}"/>`,
+          `  </g>`,
+          `  <circle id="core" cx="${cx}" cy="${cx}" r="${round(outer * 0.42)}" fill="${palette.accent}"/>`,
+          `  <circle id="satellite" cx="${round(cx + outer * Math.cos(dotAngle))}" cy="${round(
+            cx + outer * Math.sin(dotAngle),
+          )}" r="${round(ringWidth * 0.62)}" fill="${palette.secondary}"/>`,
+        ].join("\n"),
+      };
+    },
+  },
+  {
+    name: "chevron-stack",
+    build: ({ rng, palette }) => {
+      const layers = 3 + Math.floor(rng() * 2);
+      const thickness = 16 + Math.floor(rng() * 6);
+      const spacing = SAFE / (layers + 1);
+      const parts: string[] = [];
+      for (let i = 0; i < layers; i += 1) {
+        const y = MARGIN + spacing * (i + 0.5);
+        const inset = i * 10;
+        const fill = i % 2 === 0 ? palette.primary : palette.accent;
+        parts.push(
+          `    <polyline points="${round(MARGIN + inset)},${round(y)} ${CANVAS / 2},${round(
+            y + spacing * 0.58,
+          )} ${round(CANVAS - MARGIN - inset)},${round(y)}" fill="none" stroke="${fill}" stroke-width="${thickness}" stroke-linecap="round" stroke-linejoin="round"/>`,
+        );
+      }
+      return {
+        description: `${layers} nested chevrons with ${thickness}px strokes reading as forward motion or an upward stack.`,
+        body: `  <g id="chevron-stack">\n${parts.join("\n")}\n  </g>`,
+      };
+    },
+  },
+  {
+    name: "prism",
+    build: ({ rng, palette }) => {
+      const cx = CANVAS / 2;
+      const radius = SAFE / 2;
+      const rotationA = Math.floor(rng() * 60);
+      const rotationB = rotationA + 120 + Math.floor(rng() * 60);
+      return {
+        description: `Two overlapping equilateral triangles rotated ${rotationA} and ${rotationB} degrees, forming a translucent prism intersection.`,
+        body: [
+          `  <g id="prism">`,
+          `    <polygon points="${polygonPoints(cx, cx, radius, 3, -Math.PI / 2)}" fill="${palette.primary}" transform="rotate(${rotationA} ${cx} ${cx})"/>`,
+          `    <polygon points="${polygonPoints(cx, cx, radius, 3, -Math.PI / 2)}" fill="${palette.accent}" fill-opacity="0.78" transform="rotate(${rotationB} ${cx} ${cx})"/>`,
+          `  </g>`,
+        ].join("\n"),
+      };
+    },
+  },
+  {
+    name: "aperture",
+    build: ({ rng, palette }) => {
+      const cx = CANVAS / 2;
+      const blades = 5 + Math.floor(rng() * 3);
+      const inner = SAFE * 0.16;
+      const outer = SAFE / 2;
+      const parts: string[] = [];
+      for (let i = 0; i < blades; i += 1) {
+        const angle = (360 / blades) * i;
+        const fill = i % 2 === 0 ? palette.primary : palette.accent;
+        parts.push(
+          `    <path d="M ${round(cx)} ${round(cx - inner)} L ${round(cx + outer * 0.62)} ${round(
+            cx - outer * 0.78,
+          )} A ${round(outer)} ${round(outer)} 0 0 1 ${round(cx + outer * 0.95)} ${round(cx - outer * 0.2)} Z" fill="${fill}" transform="rotate(${round(
+            angle,
+          )} ${cx} ${cx})"/>`,
+        );
+      }
+      return {
+        description: `${blades}-blade aperture rotating around a hollow center, alternating primary and accent fills.`,
+        body: [
+          `  <g id="aperture">`,
+          ...parts,
+          `    <circle cx="${cx}" cy="${cx}" r="${round(inner * 0.9)}" fill="${palette.secondary}"/>`,
+          `  </g>`,
+        ].join("\n"),
+      };
+    },
+  },
+  {
+    name: "layer-stack",
+    build: ({ rng, palette }) => {
+      const layers = 3;
+      const height = 34 + Math.floor(rng() * 10);
+      const skew = 18 + Math.floor(rng() * 14);
+      const parts: string[] = [];
+      for (let i = 0; i < layers; i += 1) {
+        const y = MARGIN + 18 + i * (height + 12);
+        const fill = i === 1 ? palette.accent : palette.primary;
+        const opacity = i === 2 ? "0.72" : "1";
+        parts.push(
+          `    <polygon points="${round(MARGIN + skew)},${round(y)} ${round(CANVAS - MARGIN)},${round(
+            y,
+          )} ${round(CANVAS - MARGIN - skew)},${round(y + height)} ${MARGIN},${round(y + height)}" fill="${fill}" fill-opacity="${opacity}"/>`,
+        );
+      }
+      return {
+        description: `Three offset parallelogram layers with a ${skew}px shear, reading as stacked planes or data layers.`,
+        body: `  <g id="layer-stack">\n${parts.join("\n")}\n  </g>`,
+      };
+    },
+  },
+  {
+    name: "arc-mark",
+    build: ({ rng, palette }) => {
+      const cx = CANVAS / 2;
+      const strokes = 2 + Math.floor(rng() * 2);
+      const width = 18 + Math.floor(rng() * 8);
+      const parts: string[] = [];
+      for (let i = 0; i < strokes; i += 1) {
+        const radius = SAFE / 2 - i * (width + 10);
+        if (radius < width) break;
+        const sweep = i % 2 === 0 ? 1 : 0;
+        const fill = i % 2 === 0 ? palette.primary : palette.accent;
+        parts.push(
+          `    <path d="M ${round(cx - radius)} ${cx} A ${round(radius)} ${round(radius)} 0 0 ${sweep} ${round(
+            cx + radius,
+          )} ${cx}" fill="none" stroke="${fill}" stroke-width="${width}" stroke-linecap="round"/>`,
+        );
+      }
+      return {
+        description: `${parts.length} alternating half-arcs of ${width}px weight forming a rising, balanced mark.`,
+        body: `  <g id="arc-mark">\n${parts.join("\n")}\n  </g>`,
+      };
+    },
+  },
+];
+
+/* ------------------------------------------------------------------ */
+/* document assembly                                                   */
+/* ------------------------------------------------------------------ */
+
+export function svgDocument(options: {
+  width: number;
+  height: number;
+  title: string;
+  description: string;
+  background?: string;
+  body: string;
+}): string {
+  const backdrop = options.background
+    ? `  <rect id="backdrop" width="${options.width}" height="${options.height}" fill="${options.background}"/>\n`
+    : "";
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${options.width} ${options.height}" width="${options.width}" height="${options.height}" role="img" aria-labelledby="title desc">
+  <title id="title">${xmlEscape(options.title)}</title>
+  <desc id="desc">${xmlEscape(options.description)}</desc>
+${backdrop}${options.body}
+</svg>
+`;
+}
+
+export function buildLockup(options: {
+  brand: string;
+  tagline: string;
+  markBody: string;
+  palette: Palette;
+  background: boolean;
+}): string {
+  const width = 720;
+  const height = 200;
+  const scale = 0.55;
+  const markSize = CANVAS * scale;
+  const markX = 40;
+  const markY = (height - markSize) / 2;
+  const textX = markX + markSize + 36;
+  const brandSize = 60;
+  const hasTagline = options.tagline.trim().length > 0;
+  const brandY = hasTagline ? height / 2 - 10 : height / 2;
+
+  const body = [
+    `  <g id="mark" transform="translate(${markX} ${round(markY)}) scale(${scale})">`,
+    options.markBody
+      .split("\n")
+      .map((line) => (line ? `  ${line}` : line))
+      .join("\n"),
+    `  </g>`,
+    `  <text id="wordmark" x="${textX}" y="${round(brandY)}" dominant-baseline="central" font-family="${FONT_STACK}" font-size="${brandSize}" font-weight="700" letter-spacing="-1.5" fill="${options.palette.primary}">${xmlEscape(
+      options.brand,
+    )}</text>`,
+  ];
+
+  if (hasTagline) {
+    body.push(
+      `  <text id="tagline" x="${textX}" y="${round(height / 2 + 40)}" dominant-baseline="central" font-family="${FONT_STACK}" font-size="22" font-weight="500" letter-spacing="0.5" fill="${options.palette.secondary}">${xmlEscape(
+        options.tagline,
+      )}</text>`,
+    );
+  }
+
+  return svgDocument({
+    width,
+    height,
+    title: `${options.brand} horizontal lockup`,
+    description: `Horizontal lockup pairing the ${options.brand} mark with the wordmark.`,
+    background: options.background ? options.palette.background : undefined,
+    body: body.join("\n"),
+  });
+}
+
+/* ------------------------------------------------------------------ */
+/* cli                                                                 */
+/* ------------------------------------------------------------------ */
+
+

package/skills/logo-design/src/index.ts

@@ -0,0 +1,212 @@
+#!/usr/bin/env bun
+
+import { mkdir, writeFile, stat } from "fs/promises";
+import { join, resolve, relative } from "path";
+
+import { parseArgs } from "./cli.js";
+import { CANVAS, VERSION } from "./constants.js";
+import { briefDoc, usageNotes } from "./docs.js";
+import { buildLockup, GEOMETRIES, svgDocument } from "./geometry.js";
+import { buildPalette, fnv1a, mulberry32, shuffle } from "./palette.js";
+import type { Concept } from "./types.js";
+
+async function loadSharp(): Promise<unknown | null> {
+  try {
+    return (await import("sharp")).default;
+  } catch {
+    return null;
+  }
+}
+
+
+
+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 brief = options.brief!.trim();
+  const outDir = resolve(options.output);
+
+  const seedInput = `${brief}|${options.brand}|${options.style}|${options.palette}`;
+  const masterSeed = fnv1a(seedInput);
+  const palette = buildPalette(
+    options.palette
+      .split(",")
+      .map((token) => token.trim())
+      .filter(Boolean),
+    masterSeed,
+  );
+
+  const selectorRng = mulberry32(masterSeed);
+  const order = shuffle(selectorRng, GEOMETRIES);
+
+  const files: WrittenFile[] = [];
+  const concepts: Concept[] = [];
+  const markBodies: string[] = [];
+
+  for (let i = 0; i < options.variations; i += 1) {
+    const index = i + 1;
+    const id = `logo-${String(index).padStart(2, "0")}`;
+    const geometry = order[i % order.length];
+    const seed = fnv1a(`${seedInput}|${index}|${geometry.name}`);
+    const rng = mulberry32(seed);
+    const { body, description } = geometry.build({ rng, palette, brand: options.brand });
+    markBodies.push(body);
+
+    const markFile = `vector/${id}.svg`;
+    const lockupFile = `vector/${id}-lockup.svg`;
+
+    const markSvg = svgDocument({
+      width: CANVAS,
+      height: CANVAS,
+      title: `${options.brand} logo mark ${index}`,
+      description,
+      background: options.background ? palette.background : undefined,
+      body,
+    });
+
+    const lockupSvg = buildLockup({
+      brand: options.brand,
+      tagline: options.style,
+      markBody: body,
+      palette,
+      background: options.background,
+    });
+
+    await writeOutput(outDir, markFile, markSvg, "image/svg+xml", files);
+    await writeOutput(outDir, lockupFile, lockupSvg, "image/svg+xml", files);
+
+    concepts.push({
+      id,
+      index,
+      seed,
+      geometry: geometry.name,
+      description,
+      markFile,
+      lockupFile,
+      palette: {
+        primary: palette.primary,
+        secondary: palette.secondary,
+        accent: palette.accent,
+        background: palette.background,
+      },
+      rationale: `Seeded from "${brief}" with the ${geometry.name} construction; reproducible from seed ${seed}.`,
+    });
+  }
+
+  let pngNote = "PNG export skipped (--png not set).";
+  if (options.png) {
+    const sharp = (await loadSharp()) as
+      | ((input: Buffer) => { png(): { toFile(path: string): Promise<unknown> }; resize(w: number, h: number): unknown })
+      | null;
+    if (!sharp) {
+      pngNote =
+        "PNG export skipped: optional dependency 'sharp' is not installed. Run `bun add sharp` in this skill directory to enable --png. All SVG outputs were written normally.";
+      console.error(`logo-design: ${pngNote}`);
+    } else {
+      await mkdir(join(outDir, "png"), { recursive: true });
+      for (const concept of concepts) {
+        const svg = svgDocument({
+          width: CANVAS,
+          height: CANVAS,
+          title: `${options.brand} logo mark ${concept.index}`,
+          description: concept.description,
+          background: options.background ? palette.background : undefined,
+          body: markBodies[concept.index - 1],
+        });
+        const pngPath = `png/${concept.id}.png`;
+        const target = join(outDir, pngPath);
+        const pipeline = sharp(Buffer.from(svg)) as unknown as {
+          resize(width: number, height: number): { png(): { toFile(path: string): Promise<unknown> } };
+        };
+        await pipeline.resize(options.pngSize, options.pngSize).png().toFile(target);
+        const info = await stat(target);
+        files.push({ path: pngPath, type: "image/png", bytes: info.size });
+        concept.pngFile = pngPath;
+      }
+      pngNote = `Rasterized ${concepts.length} PNG(s) at ${options.pngSize}x${options.pngSize} via sharp.`;
+    }
+  }
+
+  await writeOutput(
+    outDir,
+    "concepts.json",
+    `${JSON.stringify(
+      {
+        brief,
+        brand: options.brand,
+        style: options.style,
+        masterSeed,
+        palette,
+        concepts,
+      },
+      null,
+      2,
+    )}\n`,
+    "application/json",
+    files,
+  );
+
+  await writeOutput(outDir, "logo-brief.md", briefDoc(options, palette, masterSeed, concepts), "text/markdown", files);
+  await writeOutput(outDir, "usage-notes.md", usageNotes(options.brand, palette, concepts), "text/markdown", files);
+
+  const manifest = {
+    skill: "logo-design",
+    version: VERSION,
+    generatedAt: new Date().toISOString(),
+    deterministic: true,
+    masterSeed,
+    input: {
+      brief,
+      brand: options.brand,
+      style: options.style,
+      palette: palette.requested,
+      variations: options.variations,
+      background: options.background,
+      png: options.png,
+    },
+    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, pngNote, concepts }, null, 2)}\n`);
+    return;
+  }
+
+  console.log(`logo-design: wrote ${files.length + 1} files to ${outDir}`);
+  console.log(`  brand      ${options.brand}`);
+  console.log(`  seed       ${masterSeed} (deterministic)`);
+  console.log(`  palette    ${palette.primary} / ${palette.secondary} / ${palette.accent} on ${palette.background}`);
+  console.log(`  concepts   ${concepts.map((c) => `${c.id}:${c.geometry}`).join(", ")}`);
+  if (options.png) console.log(`  png        ${pngNote}`);
+  console.log(`  manifest   ${relative(process.cwd(), manifestPath) || manifestPath}`);
+}
+
+main().catch((error) => {
+  const message = error instanceof Error ? error.message : String(error);
+  process.stderr.write(`logo-design: ${message}\n`);
+  process.exit(1);
+});