create-ollie-shop 1.1.0 → 1.3.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> create-ollie-shop@1.1.0 build /home/runner/work/ollie-shop/ollie-shop/packages/create-ollie-shop
+> create-ollie-shop@1.3.1 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 209ms
+ESM dist/index.js 7.76 KB
+ESM ⚡️ Build success in 176ms

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # create-ollie-shop
 
+## 1.3.1
+
+### Patch Changes
+
+- 7c76974: Remove two orphaned files from `template/.claude/` that no longer have any consumer: `build-component.mjs` (one-shot esbuild wrapper used by the old `capability.studio_harness` skill) and `registry.json` (loading-order manifest for the old `.claude/skills/*.md` + `.claude/agents/*.md` files removed earlier). Both referenced content that lives in the standardized `@ollie-shop/skills` package now.
+
+## 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

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/.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.1.0",
+  "version": "1.3.1",
   "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/.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"
   }

package/dist/template/.claude/agents/ollie_custom_components_frontend.md

@@ -1,18 +0,0 @@
----
-name: ollie_custom_components_frontend
-description: "Use this agent when the user asks to create, build, or implement a React UI component for Ollie Checkout — for example: 'create a coupon input component', 'build this component from the screenshot', or 'implement this Figma design as a component'."
-model: sonnet
-scope: component
----
-
-Before doing anything else, use the Read tool to load your skill files in this exact order:
-
-1. `.claude/skills/core.identity.md`
-2. `.claude/skills/core.rules.md`
-3. `.claude/skills/core.constraints.md`
-4. `.claude/skills/agent.components.md`
-5. `.claude/skills/capability.react.md`
-6. `.claude/skills/capability.sdk.md`
-7. `.claude/skills/capability.component_architecture.md`
-
-After reading all files, follow the instructions defined in `agent.components.md` to assist the user.

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

@@ -1,22 +0,0 @@
-{
-  "version": "1.0.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"
-  },
-  "core": ["core.identity", "core.rules", "core.constraints"],
-  "agents": {
-    "components": [
-      "agent.components",
-      "capability.react",
-      "capability.sdk",
-      "capability.component_architecture"
-    ]
-  }
-}

package/dist/template/.claude/skills/agent.components.md

@@ -1,72 +0,0 @@
----
-name: agent.components
-type: agent
-version: 1.0.0
-description: >
-  Workflow for creating React UI components for Ollie Checkout. Defines the 4-step
-  process: required inputs → clarifying questions → generate files → run lint.
-scope: component
----
-
-# Agent: Components
-
-## Mission
-
-Help a designer build self-contained React UI components for the Ollie Checkout.
-
-## Step 1 — Required Inputs (ask before coding)
-
-Before writing any code, ask the user for:
-
-1. **Component screenshot/print** — the exact UI to implement.
-2. **A `.txt` file with CSS references extracted from Figma** — spacing, typography, colors, radii.
-3. **The component name** — used as the folder name and CSS class prefix.
-
-If any of these are missing, ask for them first.
-
-## Step 2 — Clarifying Questions (ask after receiving inputs)
-
-Ask about what you cannot infer from the screenshot alone. Group related questions together to avoid back-and-forth. Typical topics:
-
-- **States & interactions**: Which states exist (loading, error, success, empty, disabled)? Are there hover/focus effects or animations?
-- **Responsiveness**: Are there layout changes at specific breakpoints, or does it scale fluidly?
-- **Icons**: Will the designer provide SVGs, or should you suggest an icon library?
-
-Skip questions that are clearly answered by the screenshot or Figma file.
-
-## Step 3 — Generate Output
-
-Produce the full folder structure:
-
-```
-ComponentName/
-  index.tsx
-  ComponentName.module.css
-  README.md
-  components/
-    SubComponentName/
-      index.tsx
-      SubComponentName.module.css
-```
-
-See `capability.component_architecture` for structure rules and CSS naming.
-See `capability.react` for React and TypeScript rules.
-See `capability.sdk` for SDK integration patterns and how to document integration points.
-
-## Step 4 — Quality
-
-After generating all files, run `pnpm lint` to fix formatting issues. Only mention it to the designer if there were significant fixes or issues that need attention. Do not let linting block the designer's progress.
-
-## Final Checklist
-
-Before answering, verify:
-
-- [ ] Screenshot/print, Figma CSS `.txt`, and component name were provided.
-- [ ] Clarifying questions were asked about states, behaviors, responsiveness, and icons.
-- [ ] Full folder structure generated (`index.tsx`, `styles.module.css`, README, subcomponents).
-- [ ] Every `.tsx` file includes `import React from 'react';`.
-- [ ] All CSS classes are in camelCase and correctly prefixed.
-- [ ] Images referenced via dedicated `<img>` subcomponents.
-- [ ] No direct use of `window` / `document` / `navigator`.
-- [ ] README is in English with the defined structure, including SDK integration notes.
-- [ ] `pnpm lint` was run.

package/dist/template/.claude/skills/capability.component_architecture.md

@@ -1,102 +0,0 @@
----
-name: capability.component_architecture
-type: capability
-version: 1.0.0
-description: >
-  Rules for folder structure, file naming, CSS class naming, image handling,
-  README format, and accessibility guidelines.
-loads_with:
-  - agent.components
----
-
-# Capability: Component Architecture
-
-## Folder Structure
-
-```
-ComponentName/
-  index.tsx                       ← parent component (named export)
-  ComponentName.module.css        ← parent styles
-  README.md                       ← English docs
-  components/
-    SubComponentName/
-      index.tsx
-      SubComponentName.module.css
-      components/                 ← only if SubComponentName has nested children
-        NestedSubComponent/
-          index.tsx
-          NestedSubComponent.module.css
-```
-
-- Parent file: always `index.tsx`, never `ComponentName.tsx`.
-- Always create subcomponents — keep parent JSX readable and maintainable.
-- Each subcomponent has its own `styles.module.css`.
-
-## CSS Class Naming
-
-All classes must be **camelCase** and **prefixed**:
-
-- Each component uses its **own name** as the prefix → `freeShippingTopBannerRoot`, `messageRotatorRoot`
-
-### Figma `.txt` References
-
-- Use Figma values as source of truth for spacing, typography, colors, radii.
-- Rename all Figma class names to match the prefix convention above.
-- If values conflict, prefer the ones that match the screenshot.
-
-## Styling Rules
-
-- Use CSS Modules (`styles.module.css`) for all styles.
-- Prefer HTML + CSS over JS-driven styling.
-- Use flex, grid, gap, padding, margin, border, etc.
-- Implement responsiveness with CSS media queries, not `isMobile` props.
-
-## Images
-
-If the component uses images, create a dedicated image subcomponent:
-
-```tsx
-// ComponentName/components/BrandLogoImage/index.tsx
-import React from 'react';
-import styles from './BrandLogoImage.module.css';
-
-export type BrandLogoImageProps = { src: string; alt: string };
-
-export function BrandLogoImage({ src, alt }: BrandLogoImageProps) {
-  return <img className={styles.brandLogoImageRoot} src={src} alt={alt} />;
-}
-```
-
-- Use plain `<img>`. Do not assume Next.js `<Image />`.
-- Pass `src` as a prop so integrators can wire real assets.
-
-## README Structure
-
-```md
-# ComponentName
-
-## Overview
-Short description of what the component is and where it fits in the checkout flow.
-
-## Props
-List each prop, its type, and what it controls visually.
-
-## States / Behaviors
-Describe the main visual states (default, hover, focus, error, success, disabled, loading).
-
-## Usage
-Minimal example with fake data and handlers.
-
-## Notes for Developers
-Which props map to which SDK hooks/actions. See `capability.sdk` for the SDK reference.
-```
-
-## Accessibility
-
-Good to have, not a blocker:
-
-- `<button>` for clickable actions.
-- `<label>` with `htmlFor` linked to inputs.
-- `<ul>/<li>` for lists.
-- `aria-invalid`, `aria-describedby` for form fields when natural.
-- Basic keyboard support for complex interactive elements.

package/dist/template/.claude/skills/capability.react.md

@@ -1,40 +0,0 @@
----
-name: capability.react
-type: capability
-version: 1.0.0
-description: >
-  React and TypeScript standards for generated components. Covers functional components,
-  named exports, hook usage, and prop naming conventions.
-loads_with:
-  - agent.components
----
-
-# Capability: React
-
-## Rules
-
-- **Functional components only.** No class components.
-- **TypeScript required.** All files are `.tsx` with explicit types.
-- **Named exports only.** No default exports for components.
-- **Every `.tsx` file must start with:** `import React from 'react';`
-  - This includes `index.tsx` and all subcomponent files.
-
-## Internal State
-
-- `useState` is allowed for UI-only state (focused, open, hovered, animations).
-- `useEffect` is allowed only for visual concerns (focus management, animations).
-- No `useEffect` for data fetching or business logic.
-
-## Naming
-
-- Components: PascalCase (e.g., `CouponInput`)
-- Props interface: `<ComponentName>Props` (e.g., `CouponInputProps`)
-- Handler props: `on<Action>` (e.g., `onApply`, `onChange`)
-- Boolean props: `is<State>` or `has<Feature>` (e.g., `isLoading`, `isDisabled`)
-
-## Props Patterns
-
-- Inputs/fields: `value`, `onChange`, optional `placeholder`, `label`, `helperText`, `errorMessage`, `isDisabled`
-- Actions: `onApplyCoupon`, `onRemoveItem`, `onToggle` — callbacks only, parent decides behavior
-- Async UI: `isLoading`, `errorMessage`, `successMessage` — toggle visuals only
-- Lists: `items` (array), `onSelectItem`, `onRemoveItem`