@growthub/cli 0.3.53 → 0.3.55

package/assets/worker-kits/growthub-ai-website-cloner-v1/.env.example

@@ -0,0 +1,7 @@
+# AI Website Cloner Worker Kit — Environment Config
+# Copy this file to .env and adjust values only if needed.
+# No API key is required for this kit.
+
+# Optional: override local fork path.
+# Default: ~/ai-website-cloner-template
+AI_CLONER_FORK_PATH=~/ai-website-cloner-template

package/assets/worker-kits/growthub-ai-website-cloner-v1/QUICKSTART.md

@@ -0,0 +1,116 @@
+# AI Website Cloner — Quickstart
+
+**Kit:** `growthub-ai-website-cloner-v1`  
+**Fork:** [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
+
+---
+
+## Prerequisites
+
+- Node.js 24+ — [nodejs.org](https://nodejs.org/)
+- An AI coding agent (Claude Code recommended) — `npm install -g @anthropic-ai/claude-code`
+- Git
+
+---
+
+## Step 1 — Set up the fork
+
+```bash
+bash setup/clone-fork.sh
+```
+
+This clones the `ai-website-cloner-template` fork to `~/ai-website-cloner-template` and runs `npm install`.
+
+---
+
+## Step 2 — Copy the env file (optional — no API key required)
+
+```bash
+cp .env.example .env
+```
+
+The cloner works without an API key. The `.env` file is used for optional configuration (custom fork path, default agent).
+
+---
+
+## Step 3 — Verify the environment
+
+```bash
+node setup/verify-env.mjs
+```
+
+---
+
+## Step 4 — Point your AI agent at this kit
+
+In Claude Code:
+```bash
+cd <path-to-this-kit>
+claude --chrome
+```
+
+In Cursor or other agents, open this directory as the project root.
+
+---
+
+## Step 5 — Run the clone skill
+
+In your AI agent chat:
+```
+/clone-website https://example.com
+```
+
+Or provide multiple URLs for a multi-page clone:
+```
+/clone-website https://example.com https://example.com/about https://example.com/pricing
+```
+
+---
+
+## What happens next
+
+The agent will:
+1. Screenshot the target at desktop, tablet, and mobile viewports
+2. Extract all design tokens using `getComputedStyle()`
+3. Inventory all assets (images, videos, fonts, SVGs)
+4. Write a component spec for every section
+5. Dispatch parallel builder agents in git worktrees
+6. Assemble and merge all builder outputs
+7. Run visual QA against the original screenshots
+8. Produce a platform handoff document
+
+---
+
+## Output location
+
+All artifacts land in:
+```
+~/ai-website-cloner-template/output/<client-slug>/<project-slug>/
+```
+
+The cloned Next.js components live in:
+```
+~/ai-website-cloner-template/src/components/
+```
+
+---
+
+## Running the cloned site
+
+```bash
+cd ~/ai-website-cloner-template
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) to view the clone.
+
+---
+
+## Docs
+
+- `skills.md` — Full skill and pipeline reference
+- `docs/ai-website-cloner-fork-integration.md` — Fork integration details
+- `docs/multi-phase-pipeline.md` — Pipeline architecture deep-dive
+- `docs/parallel-builder-dispatch.md` — Worktree builder system
+- `docs/design-token-system.md` — Token extraction and Tailwind v4 mapping
+- `validation-checklist.md` — Pre-handoff validation checklist

package/assets/worker-kits/growthub-ai-website-cloner-v1/brands/NEW-CLIENT.md

@@ -0,0 +1,22 @@
+# New Client Setup
+
+To start a project for a new client:
+
+1. Create a brand kit directory:
+   ```bash
+   mkdir -p brands/<client-slug>
+   cp brands/_template/brand-kit.md brands/<client-slug>/brand-kit.md
+   ```
+
+2. Edit `brands/<client-slug>/brand-kit.md` with the client's details.
+
+3. Create the output directory:
+   ```bash
+   mkdir -p output/<client-slug>/<project-slug>/research
+   mkdir -p output/<client-slug>/<project-slug>/specs
+   mkdir -p output/<client-slug>/<project-slug>/qa
+   ```
+
+4. Start your AI agent session and point it at this kit directory.
+
+5. Run the clone skill: `/clone-website <target-url>`

package/assets/worker-kits/growthub-ai-website-cloner-v1/brands/_template/brand-kit.md

@@ -0,0 +1,27 @@
+# Brand Kit — [CLIENT NAME]
+
+**Created:** YYYY-MM-DD  
+**Kit:** `growthub-ai-website-cloner-v1`
+
+---
+
+## Client details
+
+- **Client:** [CLIENT NAME]
+- **Website:** [https://example.com]
+- **Industry:** [Industry]
+- **Primary contact:** [Name / email]
+
+---
+
+## Project history
+
+| Date | Deliverable | Output path |
+|---|---|---|
+| YYYY-MM-DD | AI Website Clone v1 — [Project Name] | `output/<client-slug>/<project-slug>/` |
+
+---
+
+## Notes
+
+[Any standing notes about this client's preferences, constraints, or requirements]

package/assets/worker-kits/growthub-ai-website-cloner-v1/brands/growthub/brand-kit.md

@@ -0,0 +1,26 @@
+# Brand Kit — Growthub
+
+**Created:** 2026-04-15  
+**Kit:** `growthub-ai-website-cloner-v1`
+
+---
+
+## Client details
+
+- **Client:** Growthub
+- **Website:** [https://growthub.com](https://growthub.com)
+- **Industry:** AI-powered growth tooling
+
+---
+
+## Project history
+
+| Date | Deliverable | Output path |
+|---|---|---|
+| — | — | — |
+
+---
+
+## Notes
+
+Example brand kit for operator reference. Replace with your client's details.

package/assets/worker-kits/growthub-ai-website-cloner-v1/bundles/growthub-ai-website-cloner-v1.json

@@ -0,0 +1,53 @@
+{
+  "schemaVersion": 2,
+  "bundle": {
+    "id": "growthub-ai-website-cloner-v1",
+    "version": "1.0.0",
+    "kitId": "growthub-ai-website-cloner-v1",
+    "workerId": "ai-website-cloner-operator"
+  },
+  "briefType": "ai-website-clone-project",
+  "publicExampleBrandPaths": [
+    "brands/growthub/brand-kit.md"
+  ],
+  "requiredFrozenAssets": [
+    "QUICKSTART.md",
+    ".env.example",
+    "skills.md",
+    "output-standards.md",
+    "runtime-assumptions.md",
+    "validation-checklist.md",
+    "workers/ai-website-cloner-operator/CLAUDE.md",
+    "brands/_template/brand-kit.md",
+    "brands/growthub/brand-kit.md",
+    "brands/NEW-CLIENT.md",
+    "setup/clone-fork.sh",
+    "setup/verify-env.mjs",
+    "setup/check-deps.sh",
+    "output/README.md",
+    "templates/clone-brief.md",
+    "templates/reconnaissance-report.md",
+    "templates/component-spec.md",
+    "templates/builder-dispatch-plan.md",
+    "templates/asset-manifest.md",
+    "templates/visual-qa-checklist.md",
+    "templates/platform-handoff.md",
+    "templates/design-token-extraction.md",
+    "examples/clone-brief-sample.md",
+    "examples/component-spec-sample.md",
+    "examples/visual-qa-sample.md",
+    "examples/platform-handoff-sample.md",
+    "docs/ai-website-cloner-fork-integration.md",
+    "docs/multi-phase-pipeline.md",
+    "docs/parallel-builder-dispatch.md",
+    "docs/design-token-system.md",
+    "growthub-meta/README.md",
+    "growthub-meta/kit-standard.md"
+  ],
+  "optionalPresets": [],
+  "export": {
+    "folderName": "growthub-agent-worker-kit-ai-website-cloner-v1",
+    "zipFileName": "growthub-agent-worker-kit-ai-website-cloner-v1.zip"
+  },
+  "activationModes": ["export"]
+}

package/assets/worker-kits/growthub-ai-website-cloner-v1/docs/ai-website-cloner-fork-integration.md

@@ -0,0 +1,118 @@
+# AI Website Cloner — Fork Integration
+
+**Kit:** `growthub-ai-website-cloner-v1`  
+**Fork:** [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template)
+
+---
+
+## What the fork is
+
+`ai-website-cloner-template` is a production-grade Next.js 16 + shadcn/ui + Tailwind CSS v4 template purpose-built for AI coding agents. It provides:
+
+- A pre-scaffolded Next.js codebase at the correct version and configuration
+- The `/clone-website` skill — a multi-phase pipeline for cloning any website
+- Built-in multi-agent / parallel worktree support for builder dispatch
+- Support for 13+ AI coding agents (Claude Code, Cursor, Copilot, Codex, Gemini CLI, etc.)
+
+The template is a **git repository you clone locally** — the AI agent operates inside it as its working directory.
+
+---
+
+## How this kit integrates with the fork
+
+This Growthub worker kit provides the **operator layer** on top of the fork:
+
+| Layer | What it does |
+|---|---|
+| Fork (`ai-website-cloner-template`) | Scaffold, skill definitions, parallel builder infrastructure |
+| This kit (Growthub operator) | Workflow methodology, templates, QA standards, brand management |
+
+The Growthub operator (`workers/ai-website-cloner-operator/CLAUDE.md`) reads the fork's skill definition and applies a structured 8-phase workflow with:
+- Strict phase ordering
+- Mandatory reconnaissance before spec writing
+- Explicit builder dispatch plan with worktree isolation
+- Formal QA standards with diff requirements
+- Brand kit management
+
+---
+
+## Fork setup path
+
+The fork is set up by `setup/clone-fork.sh`:
+
+```
+git clone https://github.com/JCodesMore/ai-website-cloner-template.git ~/ai-website-cloner-template
+cd ~/ai-website-cloner-template
+npm install
+```
+
+Default path: `~/ai-website-cloner-template`  
+Override: set `AI_CLONER_FORK_PATH` environment variable.
+
+---
+
+## Fork tech stack (locked)
+
+| Layer | Version |
+|---|---|
+| Next.js | 16 (App Router, React 19) |
+| TypeScript | strict mode |
+| shadcn/ui | Latest at fork commit |
+| Tailwind CSS | v4 |
+| Design tokens | oklch color space |
+| Icons | Lucide React + extracted SVGs |
+| Node.js requirement | 24+ |
+
+---
+
+## Agent support
+
+The fork's skill is defined in `.claude/skills/clone-website/SKILL.md` (synced to other agents). Supported agents:
+
+- Claude Code (recommended — `--chrome` flag enables browser automation)
+- Cursor, Windsurf, Copilot, Cline, Roo Code, Continue, Codex, OpenCode, Gemini CLI, Amazon Q, Augment Code, Aider
+
+---
+
+## How the `/clone-website` skill works
+
+When invoked, the skill:
+
+1. Opens Chrome (Claude Code) or uses Playwright/browser integration for other agents
+2. Navigates to each target URL
+3. Takes screenshots at desktop (1440px), tablet (768px), mobile (375px)
+4. Executes `getComputedStyle()` extraction in the browser console
+5. Downloads all external assets to `public/`
+6. Writes component spec files to `docs/research/components/`
+7. Dispatches parallel builder subagents — each works in a `git worktree` branch
+8. Merges all builder branches and assembles the page
+9. Runs `npm run build`, `npm run lint`, and `npm run typecheck`
+
+---
+
+## Fork structure (relevant paths for the operator)
+
+```
+~/ai-website-cloner-template/
+  .claude/
+    skills/
+      clone-website/
+        SKILL.md             # The core skill definition
+  AGENTS.md                  # Agent project instructions
+  src/
+    app/
+      page.tsx               # Main cloned page (written by orchestrator)
+      layout.tsx             # Root layout
+      globals.css            # Design tokens and base styles
+    components/
+      <section-slug>/        # One directory per cloned section (written by builders)
+      icons.tsx              # Extracted SVG icons
+    lib/
+      utils.ts               # cn() utility
+  public/
+    images/                  # Downloaded images
+    videos/                  # Downloaded videos
+    seo/                     # Favicon, OG, webmanifest
+  docs/
+    research/                # Reconnaissance output (created by operator)
+```

package/assets/worker-kits/growthub-ai-website-cloner-v1/docs/design-token-system.md

@@ -0,0 +1,135 @@
+# Design Token System
+
+**Kit:** `growthub-ai-website-cloner-v1`
+
+---
+
+## Overview
+
+The clone's design system uses Tailwind CSS v4 with oklch color tokens. All design values extracted from the target site are expressed as CSS custom properties in the `@theme` block of `globals.css`.
+
+---
+
+## Token extraction methodology
+
+The operator uses `getComputedStyle()` in the browser DevTools console to extract exact computed values from the live target site.
+
+### Color extraction
+
+```js
+// Run in browser DevTools console on the target site
+// Extract all unique colors in use
+[...document.querySelectorAll('*')].flatMap(el => {
+  const s = getComputedStyle(el);
+  return [s.color, s.backgroundColor, s.borderColor, s.outlineColor]
+    .filter(c => c && c !== 'rgba(0, 0, 0, 0)' && c !== 'transparent');
+}).filter((v, i, a) => a.indexOf(v) === i).sort();
+```
+
+### Typography extraction
+
+```js
+// Extract all typography combinations
+[...document.querySelectorAll('*')].map(el => {
+  const s = getComputedStyle(el);
+  return `${s.fontFamily} | ${s.fontSize} | ${s.fontWeight} | ${s.lineHeight}`;
+}).filter((v, i, a) => a.indexOf(v) === i).sort();
+```
+
+### Spacing extraction
+
+```js
+// Extract spacing values from a specific element
+const el = document.querySelector('.hero-section');
+const s = getComputedStyle(el);
+console.log({
+  padding: s.padding,
+  margin: s.margin,
+  gap: s.gap,
+  columnGap: s.columnGap,
+  rowGap: s.rowGap,
+});
+```
+
+---
+
+## Converting to oklch
+
+Tailwind CSS v4 uses oklch as the primary color format. Convert extracted hex/rgb values:
+
+```js
+// Paste into browser console to convert RGB to oklch approximation
+// (or use https://oklch.com/ for manual conversion)
+function rgbToOklch(r, g, b) {
+  // Simplified — use the oklch.com tool for production values
+  const L = (0.2126 * r + 0.7152 * g + 0.0722 * b) / 255;
+  return `oklch(${(L * 100).toFixed(0)}% 0 0)`;
+}
+```
+
+Use [oklch.com](https://oklch.com/) for precise conversion during token extraction.
+
+---
+
+## Tailwind CSS v4 `@theme` configuration
+
+All extracted tokens go into `src/app/globals.css`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  /* Colors */
+  --color-primary: oklch(12% 0 0);
+  --color-bg: oklch(100% 0 0);
+  --color-text: oklch(15% 0 0);
+  --color-text-secondary: oklch(45% 0 0);
+  --color-accent: oklch(50% 0.2 260);
+  --color-border: oklch(91% 0 0);
+
+  /* Typography */
+  --font-sans: "Inter", system-ui, sans-serif;
+  --font-heading: "Geist", "Inter", system-ui, sans-serif;
+
+  /* Spacing scale */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+
+  /* Border radius */
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px oklch(0% 0 0 / 0.05);
+  --shadow-md: 0 4px 6px oklch(0% 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px oklch(0% 0 0 / 0.1);
+}
+```
+
+---
+
+## How builders use tokens
+
+Builders use Tailwind utility classes that reference the tokens:
+
+```tsx
+// Using color tokens
+<div className="bg-[var(--color-bg)] text-[var(--color-text)]">
+
+// Using spacing tokens
+<section className="px-[var(--spacing-xl)] py-[var(--spacing-2xl)]">
+
+// Using radius tokens
+<button className="rounded-[var(--radius-md)]">
+
+// Using shadow tokens
+<div className="shadow-[var(--shadow-md)]">
+```
+
+All token references are from the extraction sheet. No builder should invent new token names.

package/assets/worker-kits/growthub-ai-website-cloner-v1/docs/multi-phase-pipeline.md

@@ -0,0 +1,129 @@
+# Multi-Phase Pipeline Architecture
+
+**Kit:** `growthub-ai-website-cloner-v1`
+
+---
+
+## Overview
+
+The clone pipeline runs in strict phase order. No phase may be skipped. Each phase produces artifacts consumed by the next.
+
+```
+Phase 0: Environment gate
+    ↓
+Phase 1: Load methodology + project context
+    ↓
+Phase 2: Load runtime docs
+    ↓
+Phase 3: Reconnaissance (screenshots, tokens, assets, interactions)
+    ↓
+Phase 4: 3-question gate (objective, exclusions, deployment target)
+    ↓
+Phase 5: Component spec writing (one spec per section)
+    ↓
+Phase 6: Builder dispatch (parallel worktrees)
+    ↓
+Phase 7: Assembly + Visual QA
+    ↓
+Phase 8: Platform handoff
+```
+
+---
+
+## Phase 0 — Environment gate
+
+**Gate criteria:**
+1. Fork exists at `~/ai-website-cloner-template` (or `AI_CLONER_FORK_PATH`)
+2. Node.js 24+ available
+3. Fork `node_modules/` installed
+4. AI agent active
+
+**If any check fails:** stop, report the specific issue, do not proceed.
+
+---
+
+## Phase 3 — Reconnaissance (most critical phase)
+
+Reconnaissance is the most time-sensitive phase. It must be thorough because all subsequent work depends on it.
+
+### Screenshot protocol
+The agent opens Chrome (or a Playwright browser) and captures:
+- Desktop screenshots at every viewport height of content (scroll the page)
+- Tablet and mobile screenshots at the same scroll depths
+- Hover state screenshots for all interactive elements
+
+### Token extraction
+The agent runs `getComputedStyle()` extraction calls in the browser console. The exact calls are defined in `skills.md`. Tokens are extracted for:
+- All colors in use (background, text, borders, accents)
+- All typography combinations (family, size, weight, line-height)
+- All spacing values (margin, padding)
+- All border-radius, box-shadow, and transition values
+
+### Asset download
+All external assets are downloaded to `public/` immediately during reconnaissance — before spec writing. This prevents broken image references during building.
+
+---
+
+## Phase 5 — Component spec writing
+
+Each spec is a complete, standalone brief for one builder. It must include:
+- Exact computed CSS values (not estimates)
+- Multi-state content for all interactive states
+- Responsive behavior at all three breakpoints
+- Exact asset paths in `public/`
+- Exact content (no placeholders)
+
+The spec is the builder's only source of truth. It must be self-contained.
+
+---
+
+## Phase 6 — Parallel builder dispatch
+
+The orchestrator creates a `git worktree` for each builder:
+
+```bash
+# Orchestrator creates worktrees
+git worktree add ../build-navigation build/navigation
+git worktree add ../build-hero-section build/hero-section
+# ... one per section
+```
+
+Each builder is dispatched as a subagent with:
+1. Their section spec (inline)
+2. The design token extraction sheet
+3. The asset manifest
+4. Clear output constraints (only write to `src/components/<section-slug>/`)
+
+Builders run in parallel — the orchestrator does not wait for one before starting the next.
+
+---
+
+## Phase 7 — Assembly and visual QA
+
+**Assembly:**
+1. All builder branches are merged into `main` (or the integration branch)
+2. The orchestrator writes `src/app/page.tsx` to import and wire all components
+3. `npm run build` is run to confirm no errors
+4. `npm run lint` and `npm run typecheck` must pass
+
+**Visual QA:**
+1. `npm run dev` is started
+2. The agent opens the clone in the browser
+3. Side-by-side comparison with original screenshots
+4. Each section is checked at all three breakpoints
+5. All hover/focus/active states are exercised interactively
+6. Findings are documented in `visual-qa-checklist.md`
+
+---
+
+## Phase 8 — Platform handoff
+
+The platform handoff document (`platform-handoff.md`) is the final deliverable. It includes:
+- What was built (summary)
+- How to run locally
+- How to build for production
+- Deployment instructions for the target platform
+- All known deviations from the original
+- Next customization steps
+
+The brand kit is updated with a deliverable line.