@growthub/cli 0.3.54 → 0.3.55

package/assets/worker-kits/growthub-ai-website-cloner-v1/docs/parallel-builder-dispatch.md

@@ -0,0 +1,103 @@
+# Parallel Builder Dispatch
+
+**Kit:** `growthub-ai-website-cloner-v1`
+
+---
+
+## Why parallel builders
+
+A modern website has 5–20 distinct sections. Cloning them sequentially would be slow and would block each builder on the previous one. The parallel worktree system lets all builders work simultaneously, each in an isolated branch.
+
+The orchestrator (the Growthub operator running as the main agent) dispatches all builders at once, waits for them to complete, then assembles the results.
+
+---
+
+## Worktree isolation
+
+Each builder gets a dedicated `git worktree` — a separate working directory linked to the same repository but on a different branch:
+
+```bash
+# Create worktrees (orchestrator does this before dispatch)
+git worktree add ../build-navigation build/navigation
+git worktree add ../build-hero-section build/hero-section
+git worktree add ../build-features build/features
+git worktree add ../build-footer build/footer
+```
+
+Each builder's working directory is independent. They cannot conflict with each other during development.
+
+---
+
+## Builder constraints
+
+Builders must follow these rules without exception:
+
+| Rule | Detail |
+|---|---|
+| Write only to `src/components/<section-slug>/` | No writes to shared files |
+| No writes to `src/app/` | The orchestrator owns the page |
+| No writes to `src/lib/` | Shared utilities stay unchanged |
+| No writes to `globals.css` | Tokens are in the design token file |
+| No writes to `src/types/` | Types are defined by the orchestrator |
+| No writes to `layout.tsx` | The root layout is owned by the orchestrator |
+| One component file per section | `src/components/<section-slug>/<ComponentName>.tsx` |
+
+---
+
+## Builder input package
+
+Each builder receives exactly:
+
+1. **Section spec** — the complete component spec from `specs/<section-slug>.md`
+2. **Design token sheet** — `templates/design-token-extraction.md` (full token set)
+3. **Asset manifest** — `templates/asset-manifest.md` (all `public/` asset paths)
+4. **Naming instructions** — component name, output path, export format
+
+---
+
+## Builder output format
+
+Each builder produces a TypeScript React component:
+
+```tsx
+// src/components/hero-section/HeroSection.tsx
+import Image from "next/image";
+
+export function HeroSection() {
+  return (
+    <section className="...">
+      {/* exact content from spec */}
+    </section>
+  );
+}
+```
+
+Requirements:
+- Named export (not default export)
+- TypeScript strict — no `any`
+- Tailwind CSS utility classes (no inline styles)
+- Uses `cn()` from `src/lib/utils.ts` for conditional classes
+- Asset paths from `public/` using Next.js `<Image>` or `<video>` tags
+- Uses design tokens from the Tailwind config (via CSS variables)
+
+---
+
+## Assembly
+
+After all builders complete, the orchestrator:
+
+1. Merges all `build/*` branches into `main`
+2. Resolves any conflicts (should be minimal since builders touch different files)
+3. Writes `src/app/page.tsx` importing all components in order
+4. Updates `src/app/layout.tsx` with correct metadata
+5. Updates `globals.css` with the full design token set from the extraction sheet
+
+---
+
+## Conflict resolution
+
+The most common merge conflicts:
+- `package.json` — if two builders added the same dependency. Orchestrator de-dupes.
+- `src/components/icons.tsx` — if two builders added SVG icons. Orchestrator merges all icons.
+
+These are resolved by the orchestrator with full context about what all builders were doing.

package/assets/worker-kits/growthub-ai-website-cloner-v1/examples/clone-brief-sample.md

@@ -0,0 +1,54 @@
+# Clone Brief — Sample
+
+**Project:** Acme Corp Homepage Clone  
+**Client:** Acme Corp  
+**Target URL(s):** `https://acme.example.com`  
+**Date:** 2026-04-15  
+**Operator:** `ai-website-cloner-operator`
+
+---
+
+## Objective
+
+Pixel-perfect clone of the Acme Corp homepage into a modern Next.js 16 codebase. The client needs the source code for a planned migration from their legacy Webflow site to a self-hosted Next.js deployment.
+
+---
+
+## Scope
+
+### Pages to clone
+- [x] `https://acme.example.com` — Homepage
+
+### Sections to include
+- [x] Navigation / Header (sticky, with dropdown menus)
+- [x] Hero — full-viewport with background video
+- [x] Features grid — 3-column, 6 feature cards
+- [x] Social proof — testimonials carousel
+- [x] CTA banner — centered, high-contrast
+- [x] FAQ accordion
+- [x] Footer — 4-column with newsletter signup
+
+### Sections to exclude
+- [x] Login flow — auth-gated, excluded by client request
+- [x] Blog listing — dynamic content, excluded from v1 scope
+
+---
+
+## Constraints
+
+- **Deployment target:** Vercel
+- **Custom domain:** `acme.com` (configured post-handoff)
+- **Proprietary fonts:** "Acme Sans" — not publicly available; replaced with Inter (documented deviation)
+- **Auth-gated content:** Login flow excluded from scope
+- **Terms of Service notes:** Confirmed with client — they own this site and have rights to reproduce it
+
+---
+
+## Deliverables
+
+- [x] Cloned Next.js codebase in `~/ai-website-cloner-template`
+- [x] Reconnaissance report
+- [x] Design token extraction sheet (24 colors, 8 typography combinations)
+- [x] 7 component specs
+- [x] Visual QA checklist — PASS with 1 noted deviation (font)
+- [x] Platform handoff document

package/assets/worker-kits/growthub-ai-website-cloner-v1/examples/component-spec-sample.md

@@ -0,0 +1,123 @@
+# HeroSection — Component Spec (Sample)
+
+**Project:** Acme Corp Homepage Clone  
+**Section slug:** `hero-section`  
+**Output component:** `src/components/hero-section/HeroSection.tsx`  
+**Date:** 2026-04-15
+
+---
+
+## Purpose
+
+Full-viewport hero section with a looping background video, centered headline, subheadline, and two CTA buttons. First visible content above the fold on desktop and mobile.
+
+---
+
+## Layout
+
+- **Container max-width:** 1280px
+- **Container padding (desktop):** 0 80px
+- **Container padding (mobile):** 0 24px
+- **Display:** flex, column, center-aligned
+- **Section min-height:** 100vh
+- **Background:** `#0a0a0a` / `oklch(7% 0 0)` with video overlay
+
+---
+
+## Typography
+
+| Element | Font family | Size | Line height | Weight | Color | Notes |
+|---|---|---|---|---|---|---|
+| Headline | Inter | 72px | 1.1 | 700 | `#ffffff` | Desktop only |
+| Headline | Inter | 40px | 1.15 | 700 | `#ffffff` | Mobile |
+| Subheadline | Inter | 20px | 1.5 | 400 | `rgba(255,255,255,0.7)` | Desktop |
+| Subheadline | Inter | 16px | 1.5 | 400 | `rgba(255,255,255,0.7)` | Mobile |
+| CTA primary | Inter | 16px | 1 | 600 | `#0a0a0a` | — |
+| CTA secondary | Inter | 16px | 1 | 600 | `#ffffff` | — |
+
+---
+
+## Colors
+
+- **Background:** `#0a0a0a` / `oklch(7% 0 0)` (with bg video)
+- **Text primary:** `#ffffff` / `oklch(100% 0 0)`
+- **Text secondary:** `rgba(255,255,255,0.7)` / `oklch(100% 0 0 / 0.7)`
+- **CTA primary bg:** `#ffffff` / `oklch(100% 0 0)`
+- **CTA secondary border:** `rgba(255,255,255,0.3)` / `oklch(100% 0 0 / 0.3)`
+
+---
+
+## States
+
+### Default
+Headline + subheadline centered. Two CTAs side by side. Background video loops silently at `opacity: 0.4`.
+
+### Hover — CTA primary
+- Transform: none
+- Background: `oklch(91% 0 0)` (slight dim)
+- Transition: `background 0.2s ease`
+
+### Hover — CTA secondary
+- Border-color: `oklch(100% 0 0 / 0.6)`
+- Background: `oklch(100% 0 0 / 0.08)`
+- Transition: `all 0.2s ease`
+
+### Focus (both CTAs)
+- Focus ring color: `#3b82f6` / `oklch(59% 0.2 260)`
+- Focus ring offset: 3px
+- Focus ring width: 2px
+
+---
+
+## Responsive behavior
+
+### Desktop (1440px)
+72px headline, two CTAs side by side, background video full-coverage
+
+### Tablet (768px)
+56px headline, CTAs stack vertically, video still full-coverage
+
+### Mobile (375px)
+40px headline, 16px subheadline, CTAs full-width and stacked
+
+---
+
+## Assets
+
+| File | Public path | Source URL |
+|---|---|---|
+| hero-bg.mp4 | `public/videos/hero-bg.mp4` | `https://cdn.acme.example.com/hero-bg.mp4` |
+
+---
+
+## Content
+
+**Headline:**  
+The Future of Work Starts Here
+
+**Subheadline:**  
+Automate your growth with AI. Launch faster, scale smarter, and let your team focus on what matters.
+
+**CTA primary:**  
+Start for free
+
+**CTA secondary:**  
+Watch demo
+
+---
+
+## Accessibility
+
+- **ARIA landmark:** `<section aria-label="Hero">`
+- **Heading level:** `<h1>`
+- **Video:** `<video autoPlay muted loop playsInline aria-hidden="true">` (decorative)
+- **Tab order:** CTA primary → CTA secondary
+- **Reduced motion:** video paused if `prefers-reduced-motion: reduce`
+
+---
+
+## Implementation notes
+
+The background video must use `object-fit: cover` and position `absolute` behind the content. The content must be `relative` with `z-index: 1`.
+
+Tailwind v4 class for the video overlay: use `bg-black/60` over the video to ensure text contrast.

package/assets/worker-kits/growthub-ai-website-cloner-v1/examples/platform-handoff-sample.md

@@ -0,0 +1,102 @@
+# Platform Handoff — Sample
+
+**Project:** Acme Corp Homepage Clone  
+**Client:** Acme Corp  
+**Date:** 2026-04-15  
+**Clone source:** `https://acme.example.com`  
+**Codebase location:** `~/ai-website-cloner-template`
+
+---
+
+## What was built
+
+A pixel-perfect clone of the Acme Corp homepage, rebuilt in Next.js 16 + shadcn/ui + Tailwind CSS v4. The clone includes all 7 sections of the original page (navigation, hero, features, testimonials, CTA banner, FAQ, footer) with all assets downloaded and all interactive states matched. The only deviation is the proprietary "Acme Sans" font, replaced with Inter (documented below).
+
+---
+
+## Running the clone locally
+
+```bash
+cd ~/ai-website-cloner-template
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000).
+
+---
+
+## Building for production
+
+```bash
+cd ~/ai-website-cloner-template
+npm run build
+npm run start
+```
+
+Expected build output: ~45 static pages + 1 dynamic route.
+
+---
+
+## Deploying to Vercel
+
+```bash
+npm install -g vercel
+cd ~/ai-website-cloner-template
+vercel --prod
+```
+
+The app will be live at `https://ai-website-cloner-template.vercel.app` until you configure a custom domain.
+
+---
+
+## Project structure
+
+```
+src/
+  app/
+    page.tsx                    # Main homepage
+    layout.tsx                  # Root layout with Inter font
+    globals.css                 # Full design token set (24 colors)
+  components/
+    navigation/Navigation.tsx
+    hero-section/HeroSection.tsx
+    features-grid/FeaturesGrid.tsx
+    testimonials/Testimonials.tsx
+    cta-banner/CtaBanner.tsx
+    faq/Faq.tsx
+    footer/Footer.tsx
+    icons.tsx                   # 18 extracted SVG icons
+public/
+  images/                       # 11 downloaded images
+  videos/
+    hero-bg.mp4                 # Hero background video
+  seo/
+    favicon.ico
+    og-image.png
+```
+
+---
+
+## Known deviations from original
+
+| Section | Type | Notes |
+|---|---|---|
+| All headings | Font | "Acme Sans" is a proprietary font not available via CDN. Replaced with Inter (weight 700). Visual difference is subtle — baseline spacing may differ by ~2px on some headings. |
+
+---
+
+## Customization next steps
+
+1. [ ] Replace `public/seo/og-image.png` with the client's actual OG image
+2. [ ] Update `src/app/layout.tsx` metadata: title, description, canonical URL
+3. [ ] Configure Vercel environment variables for any future dynamic features
+4. [ ] If "Acme Sans" is obtained via license, add it to `src/app/layout.tsx` and update `globals.css`
+5. [ ] Remove `public/videos/hero-bg.mp4` and replace with a client-owned video file before redistribution
+
+---
+
+## QA result
+
+See `qa/visual-qa-checklist.md` for the full QA report.
+
+**Overall result:** PASS WITH NOTED DEVIATIONS (font only)

package/assets/worker-kits/growthub-ai-website-cloner-v1/examples/visual-qa-sample.md

@@ -0,0 +1,119 @@
+# Visual QA Checklist — Sample
+
+**Project:** Acme Corp Homepage Clone  
+**Clone URL:** `http://localhost:3000`  
+**Original URL:** `https://acme.example.com`  
+**Date:** 2026-04-15  
+**QA reviewer:** `ai-website-cloner-operator`
+
+---
+
+## Build checks
+
+- [x] `npm run build` exits 0
+- [x] `npm run lint` exits 0
+- [x] `npm run typecheck` exits 0
+- [x] Dev server starts without errors: `npm run dev`
+- [x] No 404s in browser console for assets
+
+---
+
+## Layout QA — Desktop (1440px)
+
+| Section | Status | Notes |
+|---|---|---|
+| Navigation | Pass | Sticky behavior matches; dropdowns exact |
+| Hero | Pass | Video loops, overlays correct, headlines match |
+| Features grid | Pass | 3-column layout, spacing matches |
+| Testimonials | Pass | Carousel transitions match |
+| CTA Banner | Pass | High-contrast colors exact |
+| FAQ accordion | Pass | Open/close transitions match |
+| Footer | Pass | 4-column layout, links correct |
+
+---
+
+## Layout QA — Tablet (768px)
+
+| Section | Status | Notes |
+|---|---|---|
+| Navigation | Pass | Hamburger appears, menu overlay works |
+| Hero | Pass | 56px headline, CTAs stack correctly |
+| Features grid | Pass | 2-column at tablet |
+| Testimonials | Pass | Single column at tablet |
+| CTA Banner | Pass | — |
+| FAQ accordion | Pass | — |
+| Footer | Pass | 2-column at tablet |
+
+---
+
+## Layout QA — Mobile (375px)
+
+| Section | Status | Notes |
+|---|---|---|
+| Navigation | Pass | Hamburger, overlay, full-screen nav match |
+| Hero | Pass | 40px headline, full-width CTAs |
+| Features grid | Pass | 1-column at mobile |
+| Testimonials | Pass | Swipe gesture works |
+| CTA Banner | Pass | — |
+| FAQ accordion | Pass | Touch targets 44px minimum |
+| Footer | Pass | Single column, stacked |
+
+---
+
+## Color fidelity
+
+| Token | Expected | Actual | Pass |
+|---|---|---|---|
+| Background | `#0a0a0a` | `oklch(7% 0 0)` | Pass |
+| Text primary | `#ffffff` | `oklch(100% 0 0)` | Pass |
+| Accent | `#3b82f6` | `oklch(59% 0.2 260)` | Pass |
+| Border | `rgba(255,255,255,0.1)` | Match | Pass |
+
+---
+
+## Typography fidelity
+
+| Element | Expected font | Actual | Expected size | Actual | Pass |
+|---|---|---|---|---|---|
+| H1 | Inter | Inter (system fallback) | 72px | 72px | Pass |
+| Body | Inter | Inter (system fallback) | 20px | 20px | Pass |
+
+---
+
+## Asset completeness
+
+- [x] All images loading (no broken images)
+- [x] Hero background video loading and looping
+- [x] All SVG icons rendering
+- [x] Fonts loading (Inter via Next.js font optimization)
+
+---
+
+## Interaction states
+
+| Element | State | Expected | Actual | Pass |
+|---|---|---|---|---|
+| CTA primary | Hover | Dims slightly | Dims `oklch(91%)` | Pass |
+| CTA secondary | Hover | Border brightens | Border `opacity 0.6` | Pass |
+| Navigation | Hover | Underline appears | Underline `2px` | Pass |
+| Mobile nav | Tap | Overlay opens | Full-screen overlay | Pass |
+| FAQ items | Click | Accordion expands | Smooth height transition | Pass |
+
+---
+
+## Deviations
+
+| Section | Type | Reason | Resolution |
+|---|---|---|---|
+| All headings | Font | "Acme Sans" not publicly available | Replaced with Inter; noted in handoff |
+
+---
+
+## Final QA result
+
+- [ ] PASS
+- [x] PASS WITH NOTED DEVIATIONS — see Deviations table above
+- [ ] FAIL
+
+**Reviewer notes:**  
+The only deviation is the proprietary font. All layout, color, interaction, and asset checks pass. Client has been informed that the font replacement is the only visual difference.

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

@@ -0,0 +1,71 @@
+# Growthub Agent Worker Kit — AI Website Cloner v1
+
+**Kit ID:** `growthub-ai-website-cloner-v1`  
+**Version:** `1.0.0`  
+**Type:** `worker`  
+**Execution mode:** `export`
+
+---
+
+## What this kit does
+
+This kit gives an agent a self-contained environment for cloning any website into a modern Next.js codebase using AI coding agents backed by the `ai-website-cloner-template` fork.
+
+It packages:
+- agent operating instructions
+- a locked 8-phase clone pipeline methodology
+- fork setup scripts and verification tools
+- component spec templates with exact CSS extraction methodology
+- parallel builder dispatch system documentation
+- design token extraction workflow
+- visual QA standards
+- output standards
+- examples and contributor metadata
+
+The intended operator is an AI coding agent orchestrator working against the `ai-website-cloner-template` fork to produce pixel-perfect website clones for platform migration, design reference, or modernization projects.
+
+---
+
+## Folder structure
+
+```text
+growthub-ai-website-cloner-v1/
+├── kit.json
+├── bundles/
+├── workers/
+├── brands/
+├── templates/
+├── examples/
+├── docs/
+├── growthub-meta/
+├── setup/
+├── output/
+├── skills.md
+├── output-standards.md
+├── runtime-assumptions.md
+└── validation-checklist.md
+```
+
+---
+
+## Activation
+
+1. Export the kit via `growthub kit download growthub-ai-website-cloner-v1`
+2. Run `bash setup/clone-fork.sh` to set up the upstream fork
+3. Point the agent working directory at the expanded kit folder
+4. The agent reads `workers/ai-website-cloner-operator/CLAUDE.md`
+5. `skills.md` provides the working method for every session
+6. Run `/clone-website <target-url>` in your AI agent chat
+
+---
+
+## Supported output categories
+
+- clone brief
+- reconnaissance report
+- design token extraction sheet
+- component specs (one per section)
+- asset manifest
+- builder dispatch plan
+- visual QA checklist
+- platform handoff document

package/assets/worker-kits/growthub-ai-website-cloner-v1/growthub-meta/kit-standard.md

@@ -0,0 +1,47 @@
+# Kit Standard — AI Website Cloner v1
+
+This document defines the locked contract for this kit.
+
+---
+
+## Required files contract
+
+Every path in `kit.json -> frozenAssetPaths` must exist in every valid release.
+
+---
+
+## Bundle contract
+
+The bundle manifest must remain aligned with `kit.json`:
+- `bundle.kitId` matches `kit.id`
+- `bundle.workerId` matches `entrypoint.workerId`
+- `requiredFrozenAssets` stays a subset of `frozenAssetPaths`
+
+---
+
+## Agent operating rules
+
+The entrypoint file is the operating law. `skills.md` is the methodology.
+
+Required invariants:
+- strict 8-phase workflow order (no phase may be skipped)
+- reconnaissance before any spec writing (no memory-only specs)
+- one builder per section in its own worktree
+- visual QA required before platform handoff
+- ethical use check before initiating any clone
+
+---
+
+## Runtime rules
+
+- no API keys or credentials stored in kit files
+- the fork path defaults to `~/ai-website-cloner-template` but is overridable via `AI_CLONER_FORK_PATH`
+- all AI work is done by the local agent — no external service calls from this kit
+- outputs are Markdown files except component code (produced in the fork repo, not in this kit directory)
+- brand assets and cloned site assets must not be committed to this kit
+
+---
+
+## Versioning rules
+
+Additive template/docs changes are minor-version work. Entry-point path changes, fork URL changes, or export-name changes require a major version bump. The CLI compatibility minimum version in `kit.json` must be updated on every published kit version bump.