create-ollie-shop 1.0.0 → 1.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> create-ollie-shop@1.0.0 build /home/runner/work/ollie-shop/ollie-shop/packages/create-ollie-shop
+> create-ollie-shop@1.3.0 build /home/runner/work/ollie-shop/ollie-shop/packages/create-ollie-shop
 > tsup
 
 CLI Building entry: src/index.ts
@@ -9,5 +9,5 @@
 CLI Target: es2022
 CLI Cleaning output folder
 ESM Build start
-ESM dist/index.js 5.83 KB
-ESM ⚡️ Build success in 426ms
+ESM dist/index.js 7.76 KB
+ESM ⚡️ Build success in 281ms

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # create-ollie-shop
 
+## 1.3.0
+
+### Minor Changes
+
+- bca53ae: Install Ollie agent skills into the project on scaffolding. After copying the template, `create-ollie-shop` downloads the latest release tag of the public skill mirror at `github.com/ollie-shop/skills`, extracts `skills/ollie-shop/` into the new project's `.claude/skills/ollie-shop/` directory, and stamps `.claude/skills/ollie-shop/.version` with the installed version. The install path matches the default location of `npx skills add ollie-shop/skills` so customers see the same `.claude/skills/ollie-shop/` regardless of which onboarding path they choose. The stale `template/.claude/skills/` and `template/.claude/agents/` are removed in favor of the live download.
+
+## 1.2.0
+
+### Minor Changes
+
+- bac681e: Scaffold an agentic Studio workflow into new projects: an `ollie_checkout_studio` agent plus `capability.design_reference` and `capability.studio_harness` skills, a server-less build helper (`.claude/build-component.mjs`), and a `chrome-devtools` MCP config. This lets an agent ingest a visual reference (a live site, Figma, or screenshot), build the component independently with esbuild, and inject its source into the store's real checkout via the hosted studio harness at `admin.ollie.shop/studio-harness.html` (same-site, so no cookie handling) — iterating from screenshots, then deploying.
+
+## 1.1.0
+
+### Minor Changes
+
+- 3292be9: feat: add create custom component claude prompt to create-ollie-project cli
+
 ## 1.0.0
 
 ### Major Changes

package/dist/index.js

@@ -10,13 +10,21 @@ import { z } from "zod";
 // src/create-project.ts
 import { exec } from "child_process";
 import fs from "fs/promises";
+import os from "os";
 import path from "path";
+import { Readable } from "stream";
+import { pipeline } from "stream/promises";
 import { fileURLToPath } from "url";
 import { promisify } from "util";
 import fsExtra from "fs-extra";
 import slugify from "slugify";
+import * as tar from "tar";
 var execAsync = promisify(exec);
 var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var SKILLS_MIRROR_OWNER = "ollie-shop";
+var SKILLS_MIRROR_REPO = "skills";
+var SKILLS_API_BASE = `https://api.github.com/repos/${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}`;
+var SKILLS_TARBALL_BASE = `https://codeload.github.com/${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}/tar.gz`;
 async function copyWithTemplate(from, to, variables) {
   const dirname = path.dirname(to);
   await fsExtra.ensureDir(dirname);
@@ -66,6 +74,48 @@ async function copyTemplateDir(templateDir, targetDir, variables) {
     }
   }
 }
+async function fetchLatestSkillsTag() {
+  const res = await fetch(`${SKILLS_API_BASE}/tags`);
+  if (!res.ok) {
+    throw new Error(
+      `Failed to list tags from ${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}: ${res.status} ${res.statusText}`
+    );
+  }
+  const tags = await res.json();
+  if (tags.length === 0) {
+    throw new Error(
+      `No release tags published on ${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO} yet.`
+    );
+  }
+  return tags[0].name;
+}
+async function installSkills(projectPath) {
+  const tag = await fetchLatestSkillsTag();
+  const version = tag.startsWith("v") ? tag.slice(1) : tag;
+  const tarballUrl = `${SKILLS_TARBALL_BASE}/refs/tags/${tag}`;
+  const res = await fetch(tarballUrl);
+  if (!res.ok || !res.body) {
+    throw new Error(
+      `Failed to download ${tarballUrl}: ${res.status} ${res.statusText}`
+    );
+  }
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "ollie-skills-"));
+  try {
+    await pipeline(
+      Readable.fromWeb(res.body),
+      tar.x({ cwd: tempDir })
+    );
+    const entries = await fs.readdir(tempDir);
+    const archiveRoot = path.join(tempDir, entries[0]);
+    const skillSrc = path.join(archiveRoot, "skills", "ollie-shop");
+    const skillDest = path.join(projectPath, ".claude", "skills", "ollie-shop");
+    await fsExtra.copy(skillSrc, skillDest);
+    await fs.writeFile(path.join(skillDest, ".version"), `${version}
+`);
+  } finally {
+    await fs.rm(tempDir, { recursive: true, force: true });
+  }
+}
 async function createProject(projectPath, options) {
   const { storeId, versionId } = options;
   const projectName = slugify(path.basename(projectPath), { lower: true });
@@ -89,6 +139,8 @@ async function createProject(projectPath, options) {
     ollieConfig.versionId = versionId;
     await fs.writeFile(ollieConfigPath, JSON.stringify(ollieConfig, null, 2));
   }
+  console.log("\u{1F9E0} Installing Ollie skills...");
+  await installSkills(projectPath);
   console.log("\u{1F527} Initializing git repository...");
   try {
     await execAsync("git init", { cwd: projectPath });

package/dist/template/.claude/build-component.mjs

@@ -0,0 +1,82 @@
+// Server-less, one-shot build for a single checkout component.
+//
+// This is the canonical build the agent runs in the studio loop — no dev server,
+// no websocket. It mirrors the platform build (the options below match
+// @ollie-shop/cli's createBuildContext) so that what you PREVIEW equals what you
+// DEPLOY. Keep these options in sync with the CLI if the platform build changes.
+//
+// Usage:  node .claude/build-component.mjs <ComponentName>
+// Output: JSON on stdout -> { name, id, slot, source, css, errors }
+//   - source: bundled CJS (sets module.exports.default; the checkout runtime
+//     mounts it via new Function). CSS-module class maps are baked in.
+//   - css: bundled stylesheet TEXT (inject via the gateway as a <style>).
+// The agent then posts { id, slot, source, css } through the studio message
+// gateway — text only; URLs/blobs can't cross the iframe origin boundary.
+
+import { readFile } from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { build } from "esbuild";
+
+const name = process.argv[2];
+if (!name) {
+  process.stdout.write(
+    JSON.stringify({
+      errors: ["usage: node .claude/build-component.mjs <ComponentName>"],
+    }),
+  );
+  process.exit(1);
+}
+
+const cwd = process.cwd();
+const dir = path.join(cwd, "components", name);
+
+// meta.json carries the component's linked id (null until `ollieshop component
+// create`) and its target slot.
+let meta = {};
+try {
+  meta = JSON.parse(await readFile(path.join(dir, "meta.json"), "utf8"));
+} catch {
+  // no meta.json yet — fall back to a studio-* id and a null slot
+}
+const id = meta.id ?? `studio-${name}`; // studio merges by slot; a stable id is enough for preview
+const slot = meta.slot ?? null;
+
+try {
+  const result = await build({
+    entryPoints: { [`${name}/index`]: path.join(dir, "index.tsx") },
+    bundle: true,
+    write: false,
+    // outdir is required so CSS imports get an output path; nothing is written to disk.
+    outdir: path.join(os.tmpdir(), "ollie-build-out"),
+    format: "cjs", // runtime mounts module.exports.default
+    platform: "browser",
+    target: "es2020",
+    jsx: "automatic",
+    // provided by the checkout runtime via the require() shim — never bundle these
+    external: ["react", "react-dom", "next", "@ollie-shop/sdk", "next-intl"],
+    loader: {
+      ".tsx": "tsx",
+      ".ts": "ts",
+      ".js": "js",
+      ".jsx": "jsx",
+      ".css": "css",
+    },
+    logLevel: "silent",
+  });
+  const source =
+    result.outputFiles.find((f) => f.path.endsWith(".js"))?.text ?? "";
+  const css =
+    result.outputFiles.find((f) => f.path.endsWith(".css"))?.text ?? "";
+  process.stdout.write(
+    JSON.stringify({ name, id, slot, source, css, errors: [] }),
+  );
+} catch (e) {
+  const errors = e.errors?.map(
+    (x) => `${x.location?.file ?? ""}:${x.location?.line ?? ""} ${x.text}`,
+  ) ?? [e.message];
+  process.stdout.write(
+    JSON.stringify({ name, id, slot, source: "", css: "", errors }),
+  );
+  process.exit(1);
+}

package/dist/template/.claude/registry.json

@@ -0,0 +1,32 @@
+{
+  "version": "1.1.0",
+  "_maintenance": "Ollie Checkout Skill Runtime Registry. Defines the deterministic loading order for all skills. To add a new skill: create the .md file in skills/, add it here in the correct section, and reference it in the agent file.",
+  "_skillDescriptions": {
+    "core.identity": "Agent persona, priorities and communication style",
+    "core.rules": "Agent behavior rules and component code rules",
+    "core.constraints": "SDK usage rules, domain isolation, and hard limits for components",
+    "agent.components": "4-step workflow for component creation (inputs, questions, output, quality)",
+    "capability.react": "React/TypeScript standards: functional components, hooks, naming, prop patterns",
+    "capability.sdk": "Full @ollie-shop/sdk reference: hooks, types, action types, integration pattern",
+    "capability.component_architecture": "Folder structure, CSS naming convention, image handling, README template",
+    "capability.design_reference": "Ingest a live site / Figma / screenshot via the browser, extract structure + tokens, produce a build spec",
+    "capability.studio_harness": "Build a component server-less (esbuild) and inject its source into the real checkout via the hosted studio harness at admin.ollie.shop (chrome-devtools MCP), then screenshot and iterate"
+  },
+  "core": ["core.identity", "core.rules", "core.constraints"],
+  "agents": {
+    "components": [
+      "agent.components",
+      "capability.react",
+      "capability.sdk",
+      "capability.component_architecture"
+    ],
+    "checkout_studio": [
+      "agent.components",
+      "capability.react",
+      "capability.sdk",
+      "capability.component_architecture",
+      "capability.design_reference",
+      "capability.studio_harness"
+    ]
+  }
+}

package/dist/template/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}

package/dist/template/_package.json

@@ -8,9 +8,10 @@
   },
   "devDependencies": {
     "@ollie-shop/cli": "latest",
-    "@ollie-shop/sdk": "latest",
+    "@ollie-shop/sdk": "^1",
     "@types/node": "^22.14.0",
     "@types/react": "^19.2.7",
+    "esbuild": "^0.25.0",
     "react": "^19.0.0",
     "typescript": "^5.7.3"
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ollie-shop",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -10,6 +10,7 @@
   "devDependencies": {
     "@types/fs-extra": "^11.0.4",
     "@types/node": "^22.14.0",
+    "@types/tar": "^6.1.13",
     "tsup": "^8.4.0",
     "typescript": "^5.7.3",
     "vitest": "^3.0.4"
@@ -18,6 +19,7 @@
     "fs-extra": "^11.3.0",
     "meow": "^13.2.0",
     "slugify": "^1.6.6",
+    "tar": "^7.4.3",
     "zod": "^3.24.2"
   },
   "publishConfig": {

package/src/create-project.ts

@@ -1,15 +1,24 @@
 import { exec } from "node:child_process";
 import fs from "node:fs/promises";
+import os from "node:os";
 import path from "node:path";
+import { Readable } from "node:stream";
+import { pipeline } from "node:stream/promises";
 import { fileURLToPath } from "node:url";
 import { promisify } from "node:util";
 import fsExtra from "fs-extra";
 import slugify from "slugify";
+import * as tar from "tar";
 
 const execAsync = promisify(exec);
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
+const SKILLS_MIRROR_OWNER = "ollie-shop";
+const SKILLS_MIRROR_REPO = "skills";
+const SKILLS_API_BASE = `https://api.github.com/repos/${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}`;
+const SKILLS_TARBALL_BASE = `https://codeload.github.com/${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}/tar.gz`;
+
 interface CreateProjectOptions {
   storeId: string;
   versionId?: string;
@@ -101,6 +110,68 @@ async function copyTemplateDir(
   }
 }
 
+/**
+ * Ask the public mirror at github.com/ollie-shop/skills for its newest tag.
+ * Tags are created by the sync workflow on each release (vX.Y.Z); the GitHub
+ * API returns them ordered by creation date descending, so the first entry is
+ * the latest release.
+ */
+async function fetchLatestSkillsTag(): Promise<string> {
+  const res = await fetch(`${SKILLS_API_BASE}/tags`);
+  if (!res.ok) {
+    throw new Error(
+      `Failed to list tags from ${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO}: ${res.status} ${res.statusText}`,
+    );
+  }
+  const tags = (await res.json()) as Array<{ name: string }>;
+  if (tags.length === 0) {
+    throw new Error(
+      `No release tags published on ${SKILLS_MIRROR_OWNER}/${SKILLS_MIRROR_REPO} yet.`,
+    );
+  }
+  return tags[0].name;
+}
+
+/**
+ * Download the ollie-shop skill from the public mirror and install it into
+ * the new project's `.claude/skills/ollie-shop/` directory (the default
+ * install location the vercel-labs/skills CLI uses). The installed version
+ * is recorded in `.claude/skills/ollie-shop/.version` so future updates can
+ * detect drift.
+ */
+async function installSkills(projectPath: string): Promise<void> {
+  const tag = await fetchLatestSkillsTag();
+  const version = tag.startsWith("v") ? tag.slice(1) : tag;
+
+  const tarballUrl = `${SKILLS_TARBALL_BASE}/refs/tags/${tag}`;
+  const res = await fetch(tarballUrl);
+  if (!res.ok || !res.body) {
+    throw new Error(
+      `Failed to download ${tarballUrl}: ${res.status} ${res.statusText}`,
+    );
+  }
+
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "ollie-skills-"));
+  try {
+    // Extract the full tarball; the archive wraps everything in a single
+    // top-level directory like `ollie-shop-skills-<sha>/`.
+    await pipeline(
+      Readable.fromWeb(res.body as never),
+      tar.x({ cwd: tempDir }),
+    );
+
+    const entries = await fs.readdir(tempDir);
+    const archiveRoot = path.join(tempDir, entries[0]);
+    const skillSrc = path.join(archiveRoot, "skills", "ollie-shop");
+    const skillDest = path.join(projectPath, ".claude", "skills", "ollie-shop");
+
+    await fsExtra.copy(skillSrc, skillDest);
+    await fs.writeFile(path.join(skillDest, ".version"), `${version}\n`);
+  } finally {
+    await fs.rm(tempDir, { recursive: true, force: true });
+  }
+}
+
 /**
  * Create a new Ollie Shop project
  */
@@ -144,6 +215,11 @@ export async function createProject(
     await fs.writeFile(ollieConfigPath, JSON.stringify(ollieConfig, null, 2));
   }
 
+  // Install Ollie skills from the public mirror into .claude/skills/ollie-shop/
+  // (the default location vercel-labs/skills CLI uses for `npx skills add`)
+  console.log("🧠 Installing Ollie skills...");
+  await installSkills(projectPath);
+
   // Initialize git
   console.log("🔧 Initializing git repository...");
   try {

package/template/.claude/build-component.mjs

@@ -0,0 +1,82 @@
+// Server-less, one-shot build for a single checkout component.
+//
+// This is the canonical build the agent runs in the studio loop — no dev server,
+// no websocket. It mirrors the platform build (the options below match
+// @ollie-shop/cli's createBuildContext) so that what you PREVIEW equals what you
+// DEPLOY. Keep these options in sync with the CLI if the platform build changes.
+//
+// Usage:  node .claude/build-component.mjs <ComponentName>
+// Output: JSON on stdout -> { name, id, slot, source, css, errors }
+//   - source: bundled CJS (sets module.exports.default; the checkout runtime
+//     mounts it via new Function). CSS-module class maps are baked in.
+//   - css: bundled stylesheet TEXT (inject via the gateway as a <style>).
+// The agent then posts { id, slot, source, css } through the studio message
+// gateway — text only; URLs/blobs can't cross the iframe origin boundary.
+
+import { readFile } from "node:fs/promises";
+import os from "node:os";
+import path from "node:path";
+import { build } from "esbuild";
+
+const name = process.argv[2];
+if (!name) {
+  process.stdout.write(
+    JSON.stringify({
+      errors: ["usage: node .claude/build-component.mjs <ComponentName>"],
+    }),
+  );
+  process.exit(1);
+}
+
+const cwd = process.cwd();
+const dir = path.join(cwd, "components", name);
+
+// meta.json carries the component's linked id (null until `ollieshop component
+// create`) and its target slot.
+let meta = {};
+try {
+  meta = JSON.parse(await readFile(path.join(dir, "meta.json"), "utf8"));
+} catch {
+  // no meta.json yet — fall back to a studio-* id and a null slot
+}
+const id = meta.id ?? `studio-${name}`; // studio merges by slot; a stable id is enough for preview
+const slot = meta.slot ?? null;
+
+try {
+  const result = await build({
+    entryPoints: { [`${name}/index`]: path.join(dir, "index.tsx") },
+    bundle: true,
+    write: false,
+    // outdir is required so CSS imports get an output path; nothing is written to disk.
+    outdir: path.join(os.tmpdir(), "ollie-build-out"),
+    format: "cjs", // runtime mounts module.exports.default
+    platform: "browser",
+    target: "es2020",
+    jsx: "automatic",
+    // provided by the checkout runtime via the require() shim — never bundle these
+    external: ["react", "react-dom", "next", "@ollie-shop/sdk", "next-intl"],
+    loader: {
+      ".tsx": "tsx",
+      ".ts": "ts",
+      ".js": "js",
+      ".jsx": "jsx",
+      ".css": "css",
+    },
+    logLevel: "silent",
+  });
+  const source =
+    result.outputFiles.find((f) => f.path.endsWith(".js"))?.text ?? "";
+  const css =
+    result.outputFiles.find((f) => f.path.endsWith(".css"))?.text ?? "";
+  process.stdout.write(
+    JSON.stringify({ name, id, slot, source, css, errors: [] }),
+  );
+} catch (e) {
+  const errors = e.errors?.map(
+    (x) => `${x.location?.file ?? ""}:${x.location?.line ?? ""} ${x.text}`,
+  ) ?? [e.message];
+  process.stdout.write(
+    JSON.stringify({ name, id, slot, source: "", css: "", errors }),
+  );
+  process.exit(1);
+}

package/template/.claude/registry.json

@@ -0,0 +1,32 @@
+{
+  "version": "1.1.0",
+  "_maintenance": "Ollie Checkout Skill Runtime Registry. Defines the deterministic loading order for all skills. To add a new skill: create the .md file in skills/, add it here in the correct section, and reference it in the agent file.",
+  "_skillDescriptions": {
+    "core.identity": "Agent persona, priorities and communication style",
+    "core.rules": "Agent behavior rules and component code rules",
+    "core.constraints": "SDK usage rules, domain isolation, and hard limits for components",
+    "agent.components": "4-step workflow for component creation (inputs, questions, output, quality)",
+    "capability.react": "React/TypeScript standards: functional components, hooks, naming, prop patterns",
+    "capability.sdk": "Full @ollie-shop/sdk reference: hooks, types, action types, integration pattern",
+    "capability.component_architecture": "Folder structure, CSS naming convention, image handling, README template",
+    "capability.design_reference": "Ingest a live site / Figma / screenshot via the browser, extract structure + tokens, produce a build spec",
+    "capability.studio_harness": "Build a component server-less (esbuild) and inject its source into the real checkout via the hosted studio harness at admin.ollie.shop (chrome-devtools MCP), then screenshot and iterate"
+  },
+  "core": ["core.identity", "core.rules", "core.constraints"],
+  "agents": {
+    "components": [
+      "agent.components",
+      "capability.react",
+      "capability.sdk",
+      "capability.component_architecture"
+    ],
+    "checkout_studio": [
+      "agent.components",
+      "capability.react",
+      "capability.sdk",
+      "capability.component_architecture",
+      "capability.design_reference",
+      "capability.studio_harness"
+    ]
+  }
+}

package/template/.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp@latest"]
+    }
+  }
+}

package/template/_package.json

@@ -8,9 +8,10 @@
   },
   "devDependencies": {
     "@ollie-shop/cli": "latest",
-    "@ollie-shop/sdk": "latest",
+    "@ollie-shop/sdk": "^1",
     "@types/node": "^22.14.0",
     "@types/react": "^19.2.7",
+    "esbuild": "^0.25.0",
     "react": "^19.0.0",
     "typescript": "^5.7.3"
   }