@growthub/cli 0.3.54 → 0.3.56

package/assets/worker-kits/growthub-ai-website-cloner-v1/setup/verify-env.mjs

@@ -0,0 +1,78 @@
+#!/usr/bin/env node
+// verify-env.mjs — Verify the AI Website Cloner environment is ready
+import { existsSync } from "node:fs";
+import { execSync } from "node:child_process";
+import { resolve } from "node:path";
+import { homedir } from "node:os";
+
+const FORK_PATH = process.env.AI_CLONER_FORK_PATH || resolve(homedir(), "ai-website-cloner-template");
+
+let passed = 0;
+let failed = 0;
+
+function check(label, pass, detail) {
+  if (pass) {
+    console.log(`  ✓  ${label}`);
+    passed++;
+  } else {
+    console.log(`  ✗  ${label}${detail ? ` — ${detail}` : ""}`);
+    failed++;
+  }
+}
+
+console.log("\nAI Website Cloner — Environment Check");
+console.log("─".repeat(48));
+
+// Check 1: Fork directory
+check(
+  `Fork exists at ${FORK_PATH}`,
+  existsSync(FORK_PATH),
+  `Run: bash setup/clone-fork.sh`
+);
+
+// Check 2: Fork dependencies
+check(
+  "Fork dependencies installed",
+  existsSync(resolve(FORK_PATH, "node_modules")),
+  `Run: cd ${FORK_PATH} && npm install`
+);
+
+// Check 3: Fork structure
+for (const item of ["src/app", "src/components", "src/lib", "package.json", "next.config.ts"]) {
+  check(
+    `Fork has ${item}`,
+    existsSync(resolve(FORK_PATH, item)),
+    "Unexpected fork structure — check fork README"
+  );
+}
+
+// Check 4: Node.js version
+try {
+  const version = process.versions.node.split(".")[0];
+  const isOk = parseInt(version, 10) >= 24;
+  check(
+    `Node.js 24+ (current: ${process.versions.node})`,
+    isOk,
+    "Upgrade at https://nodejs.org/ or use: nvm use 24"
+  );
+} catch {
+  check("Node.js version check", false, "Could not determine version");
+}
+
+// Check 5: Git available
+try {
+  execSync("git --version", { stdio: "ignore" });
+  check("git available", true);
+} catch {
+  check("git available", false, "Install git: https://git-scm.com/");
+}
+
+console.log("─".repeat(48));
+console.log(`  ${passed} passed · ${failed} failed`);
+
+if (failed > 0) {
+  console.log("\n  Run: bash setup/clone-fork.sh  to fix setup issues.\n");
+  process.exit(1);
+} else {
+  console.log("\n  Environment is ready. Start your AI agent and run: /clone-website <url>\n");
+}

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

@@ -0,0 +1,186 @@
+# AI Website Cloner Operator — Skills
+
+**Kit:** `growthub-ai-website-cloner-v1`  
+**Worker ID:** `ai-website-cloner-operator`
+
+---
+
+## SKILL: `/clone-website`
+
+The primary skill. Accepts one or more target URLs and executes the full clone pipeline.
+
+### Invocation
+
+```
+/clone-website <target-url1> [<target-url2> ...]
+```
+
+### Pipeline phases (strict order)
+
+| Phase | Name | Key output |
+|---|---|---|
+| 0 | Environment gate | Pass/fail — fork exists, Node 24+, deps installed |
+| 1 | Reconnaissance | Screenshots, design tokens, interaction map, asset inventory |
+| 2 | Foundation | Design token extraction sheet, fonts, globals, layout scaffold |
+| 3 | Component specs | One spec file per section with exact computed CSS values |
+| 4 | Asset download | All images, videos, SVGs, fonts downloaded to `public/` |
+| 5 | Builder dispatch | Parallel worktrees — one per section/component |
+| 6 | Assembly | Merge all worktrees, wire up route, resolve conflicts |
+| 7 | Visual QA | Diff against original screenshots, document deviations |
+| 8 | Platform handoff | Build verified, deployment instructions, client deliverable |
+
+---
+
+## RECONNAISSANCE CHECKLIST
+
+Before writing any spec, capture all of the following:
+
+### Screenshots
+- Desktop: 1440px wide, full scroll depth (every viewport height of content)
+- Tablet: 768px wide, same depth
+- Mobile: 375px wide, same depth
+- Interactive states: hover states on navigation, CTAs, cards
+
+### Design token extraction
+- Color palette: exact hex values + oklch equivalents for CSS
+- Typography: every font family, size, weight, line-height, letter-spacing combination in use
+- Spacing: all margin/padding values used in the layout (identify the scale)
+- Border radius: all border-radius values
+- Box shadows: all box-shadow definitions
+- Transitions: all transition/animation timing values
+
+### Interaction sweep
+- Navigation: all hover states, dropdowns, mobile hamburger
+- CTAs and buttons: hover, active, focus, disabled states
+- Cards: hover transforms, shadows
+- Scroll-triggered: parallax, fade-ins, stickiness
+- Forms: focus, validation, error states
+
+### Asset inventory
+- All `<img>` src values (CDN URLs)
+- All `<video>` src values
+- All background-image URLs
+- All SVG icons (inline or file)
+- All custom webfont sources
+
+---
+
+## DESIGN TOKEN EXTRACTION METHODOLOGY
+
+Use `getComputedStyle()` in the browser DevTools console to extract exact values:
+
+```js
+// Get all colors used in the page
+[...document.querySelectorAll('*')].flatMap(el => {
+  const s = getComputedStyle(el);
+  return [s.color, s.backgroundColor, s.borderColor].filter(c => c && c !== 'rgba(0, 0, 0, 0)');
+}).filter((v, i, a) => a.indexOf(v) === i);
+```
+
+Document all values in `templates/design-token-extraction.md`. Convert to oklch for Tailwind CSS v4.
+
+---
+
+## COMPONENT SPEC FORMAT
+
+Each spec file must include these sections:
+
+```markdown
+# <SectionName> — Component Spec
+
+## Purpose
+What this section does for the user.
+
+## Layout
+- Container max-width: <value>
+- Padding: <top> <right> <bottom> <left>
+- Display: <flex|grid|block>
+- Grid columns (desktop/tablet/mobile): <values>
+- Gap: <value>
+
+## Typography
+- Heading: <font-family>, <size>/<line-height>, weight <weight>
+- Body: <font-family>, <size>/<line-height>, weight <weight>
+- Caption: <font-family>, <size>/<line-height>, weight <weight>
+
+## Colors
+- Background: <hex> / oklch(<value>)
+- Text primary: <hex> / oklch(<value>)
+- Text secondary: <hex> / oklch(<value>)
+- Accent: <hex> / oklch(<value>)
+- Border: <hex> / oklch(<value>)
+
+## States
+- Default: [describe]
+- Hover: [describe — exact transform, color change, transition timing]
+- Active: [describe]
+- Focus: [describe — focus ring color, offset]
+
+## Responsive
+- Desktop (1440px): [layout description]
+- Tablet (768px): [layout changes]
+- Mobile (375px): [layout changes]
+
+## Assets
+- Image: public/images/<filename>.<ext> — originally from <cdn-url>
+- Icon: src/components/icons.tsx as <IconName>
+
+## Content
+[Exact text content from the target — no placeholders]
+
+## Accessibility
+- ARIA role: <role>
+- Landmark: <nav|main|aside|footer>
+- Tab order: [describe]
+- Keyboard navigation: [describe]
+```
+
+---
+
+## BUILDER DISPATCH RULES
+
+1. Each builder receives exactly one component spec
+2. Each builder works in a fresh `git worktree` on a dedicated branch: `build/<section-slug>`
+3. Builders output files ONLY to `src/components/<section-slug>/`
+4. No builder writes to: `src/app/`, `src/lib/`, `src/types/`, `globals.css`, `layout.tsx`
+5. The orchestrator owns all assembly and shared file writes
+6. After all builders complete, orchestrator merges all `build/*` branches
+7. Merge conflicts are resolved by the orchestrator with full spec context
+8. Assembly order follows the spec list in the dispatch plan
+
+---
+
+## VISUAL QA STANDARDS
+
+A clone passes QA when:
+
+| Criterion | Threshold |
+|---|---|
+| Layout accuracy | All major sections within 2px of original |
+| Color fidelity | All token values match extracted values |
+| Typography | Font family, size, weight identical for all text |
+| Asset completeness | All images, videos, icons present and loading |
+| Responsive | No layout breaks at 1440, 768, 375px |
+| Interaction | All hover/focus/active states visually match |
+| Build | `npm run build` exits 0 with no errors |
+| Lint | `npm run lint` exits 0 |
+
+Any deviation must be documented in `visual-qa-checklist.md` with a reason and resolution.
+
+---
+
+## OUTPUT NAMING
+
+All outputs use the pattern:
+```
+output/<client-slug>/<project-slug>/<artifact-type>.<extension>
+```
+
+Examples:
+```
+output/acme-corp/homepage-clone/research/reconnaissance-report.md
+output/acme-corp/homepage-clone/specs/hero-section.md
+output/acme-corp/homepage-clone/specs/navigation.md
+output/acme-corp/homepage-clone/qa/visual-qa-checklist.md
+output/acme-corp/homepage-clone/platform-handoff.md
+```

package/assets/worker-kits/growthub-ai-website-cloner-v1/templates/asset-manifest.md

@@ -0,0 +1,57 @@
+# Asset Manifest
+
+**Project:** [PROJECT NAME]  
+**Target URL:** [https://example.com]  
+**Date:** YYYY-MM-DD
+
+---
+
+## Images
+
+| File | Public path | Source URL | Section used | Notes |
+|---|---|---|---|---|
+| [filename.ext] | `public/images/[filename.ext]` | [CDN URL] | [section-slug] | — |
+
+---
+
+## Videos
+
+| File | Public path | Source URL | Section used | Notes |
+|---|---|---|---|---|
+| [filename.ext] | `public/videos/[filename.ext]` | [CDN URL] | [section-slug] | — |
+
+---
+
+## SVG icons
+
+| Icon name | Component name | Source | Section used | Notes |
+|---|---|---|---|---|
+| [icon name] | `[IconName]` in `src/components/icons.tsx` | [inline / file URL] | [sections] | — |
+
+---
+
+## Custom fonts
+
+| Font family | Weights | Source | How used |
+|---|---|---|---|
+| [Font Name] | [400, 700] | [CDN URL / system] | [heading, body] |
+
+---
+
+## SEO assets
+
+| File | Public path | Notes |
+|---|---|---|
+| favicon.ico | `public/seo/favicon.ico` | — |
+| og-image.png | `public/seo/og-image.png` | — |
+| site.webmanifest | `public/seo/site.webmanifest` | — |
+
+---
+
+## Download status
+
+- [ ] All images downloaded to `public/images/`
+- [ ] All videos downloaded to `public/videos/`
+- [ ] All SEO assets downloaded to `public/seo/`
+- [ ] All SVG icons extracted and added to `src/components/icons.tsx`
+- [ ] Custom fonts added to `src/app/layout.tsx` or `globals.css`

package/assets/worker-kits/growthub-ai-website-cloner-v1/templates/builder-dispatch-plan.md

@@ -0,0 +1,92 @@
+# Builder Dispatch Plan
+
+**Project:** [PROJECT NAME]  
+**Date:** YYYY-MM-DD  
+**Total builders:** [N]
+
+---
+
+## Dispatch rules
+
+1. Each builder works in `git worktree` on branch `build/<section-slug>`
+2. Each builder receives: section spec + design token extraction + asset manifest
+3. Builders output ONLY to `src/components/<section-slug>/`
+4. No builder touches: `src/app/`, `src/lib/`, `src/types/`, `globals.css`, `layout.tsx`
+5. Orchestrator assembles the page and resolves merge conflicts
+
+---
+
+## Builder assignments
+
+| Builder | Branch | Section | Spec file | Est. complexity |
+|---|---|---|---|---|
+| 1 | `build/navigation` | Navigation | `specs/navigation.md` | [low/med/high] |
+| 2 | `build/hero-section` | Hero | `specs/hero-section.md` | [low/med/high] |
+| 3 | `build/[slug]` | [Section] | `specs/[slug].md` | [low/med/high] |
+| N | `build/footer` | Footer | `specs/footer.md` | [low/med/high] |
+
+---
+
+## Shared context for all builders
+
+All builders receive the following files inline:
+- `templates/design-token-extraction.md` (full token set)
+- `templates/asset-manifest.md` (all downloaded assets)
+- Their section's spec file
+
+---
+
+## Assembly order
+
+After all builders complete, the orchestrator assembles in this order:
+
+```tsx
+// src/app/page.tsx
+import { Navigation } from "@/components/navigation/Navigation";
+import { HeroSection } from "@/components/hero-section/HeroSection";
+// ... in section order
+import { Footer } from "@/components/footer/Footer";
+
+export default function Page() {
+  return (
+    <>
+      <Navigation />
+      <main>
+        <HeroSection />
+        {/* sections in order */}
+      </main>
+      <Footer />
+    </>
+  );
+}
+```
+
+---
+
+## Merge instructions
+
+After all `build/*` branches are complete:
+
+```bash
+cd ~/ai-website-cloner-template
+git checkout main
+
+# Merge each builder branch
+git merge build/navigation --no-ff -m "feat: navigation component"
+git merge build/hero-section --no-ff -m "feat: hero section"
+# ... continue for all builders
+
+# Assemble the page
+# Edit src/app/page.tsx to import and wire all components
+
+# Run quality checks
+npm run build
+npm run lint
+npm run typecheck
+```
+
+---
+
+## Conflict resolution notes
+
+[Document any merge conflicts encountered and how they were resolved]

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

@@ -0,0 +1,59 @@
+# Clone Brief
+
+**Project:** [PROJECT NAME]  
+**Client:** [CLIENT NAME]  
+**Target URL(s):** [https://example.com]  
+**Date:** YYYY-MM-DD  
+**Operator:** `ai-website-cloner-operator`
+
+---
+
+## Objective
+
+[Describe what success looks like — pixel-perfect clone, design reference, migration to modern stack, etc.]
+
+---
+
+## Scope
+
+### Pages to clone
+- [ ] [https://example.com] — [page description]
+- [ ] [https://example.com/about] — [page description]
+
+### Sections to include
+- [ ] Navigation / Header
+- [ ] Hero / Above-the-fold
+- [ ] [Additional sections…]
+- [ ] Footer
+
+### Sections to exclude
+- [ ] Login / auth flows
+- [ ] Payment pages
+- [ ] [Any other exclusions with reason]
+
+---
+
+## Constraints
+
+- **Deployment target:** [Vercel / self-hosted / static export]
+- **Custom domain:** [domain or TBD]
+- **Proprietary fonts:** [List any fonts that may not be available]
+- **Auth-gated content:** [Any content not accessible without login]
+- **Terms of Service notes:** [Any ToS constraints noted before starting]
+
+---
+
+## Deliverables
+
+- [ ] Cloned Next.js codebase in `~/ai-website-cloner-template`
+- [ ] Reconnaissance report
+- [ ] Design token extraction sheet
+- [ ] Component specs for all sections
+- [ ] Visual QA checklist
+- [ ] Platform handoff document
+
+---
+
+## Timeline
+
+[Technical complexity description — number of sections, interactive components, asset volume]

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

@@ -0,0 +1,124 @@
+# [SectionName] — Component Spec
+
+**Project:** [PROJECT NAME]  
+**Section slug:** `[section-slug]`  
+**Output component:** `src/components/[section-slug]/[ComponentName].tsx`  
+**Date:** YYYY-MM-DD
+
+---
+
+## Purpose
+
+[What this section does for the user — one paragraph.]
+
+---
+
+## Layout
+
+- **Container max-width:** [value]
+- **Container padding (desktop):** [top right bottom left]
+- **Container padding (mobile):** [top right bottom left]
+- **Display:** [flex | grid | block]
+- **Grid columns (desktop):** [value]
+- **Grid columns (tablet):** [value]
+- **Grid columns (mobile):** [value]
+- **Gap:** [value]
+- **Section min-height:** [value]
+- **Background:** [color token]
+
+---
+
+## Typography
+
+| Element | Font family | Size | Line height | Weight | Color | Notes |
+|---|---|---|---|---|---|---|
+| Heading | [family] | [size] | [lh] | [weight] | [color] | — |
+| Subheading | [family] | [size] | [lh] | [weight] | [color] | — |
+| Body | [family] | [size] | [lh] | [weight] | [color] | — |
+| Caption | [family] | [size] | [lh] | [weight] | [color] | — |
+| Button label | [family] | [size] | [lh] | [weight] | [color] | — |
+
+---
+
+## Colors
+
+- **Background:** [hex] / [oklch]
+- **Text primary:** [hex] / [oklch]
+- **Text secondary:** [hex] / [oklch]
+- **Accent / CTA:** [hex] / [oklch]
+- **Border:** [hex] / [oklch]
+
+---
+
+## States
+
+### Default
+[Describe normal rendering]
+
+### Hover
+- **Trigger:** [what element triggers the state]
+- **Transform:** [e.g. `translateY(-2px)`]
+- **Color change:** [describe]
+- **Transition:** [e.g. `all 0.2s ease`]
+- **Shadow change:** [describe]
+
+### Active
+[Describe active/pressed state]
+
+### Focus
+- **Focus ring color:** [hex / oklch]
+- **Focus ring offset:** [value]
+- **Focus ring width:** [value]
+
+---
+
+## Responsive behavior
+
+### Desktop (1440px)
+[Describe layout]
+
+### Tablet (768px)
+[Describe layout changes from desktop]
+
+### Mobile (375px)
+[Describe layout changes from tablet]
+
+---
+
+## Assets
+
+| Asset | Type | Public path | Source URL |
+|---|---|---|---|
+| [image name] | image | `public/images/[filename].[ext]` | [original CDN URL] |
+| [icon name] | SVG | `src/components/icons.tsx` as `[IconName]` | [inline / file] |
+
+---
+
+## Content
+
+[Paste the exact text content from the target site. No placeholder text.]
+
+**Heading:**  
+[exact heading text]
+
+**Body copy:**  
+[exact body text]
+
+**CTA label:**  
+[exact button/link text]
+
+---
+
+## Accessibility
+
+- **ARIA landmark:** `[nav | main | aside | section]`
+- **Heading level:** `[h1 | h2 | h3]`
+- **Image alt text:** [describe required alt text]
+- **Tab order:** [describe keyboard navigation path through this section]
+- **Screen reader notes:** [any special ARIA labels, descriptions]
+
+---
+
+## Implementation notes
+
+[Any tricky implementation details, browser quirks, or decisions made during spec writing]

package/assets/worker-kits/growthub-ai-website-cloner-v1/templates/design-token-extraction.md

@@ -0,0 +1,89 @@
+# Design Token Extraction
+
+**Project:** [PROJECT NAME]  
+**Target URL:** [https://example.com]  
+**Date:** YYYY-MM-DD
+
+---
+
+## Color palette
+
+| Token name | Hex | oklch | Usage |
+|---|---|---|---|
+| `color-primary` | `#000000` | `oklch(0% 0 0)` | [CTAs, headings] |
+| `color-bg` | `#ffffff` | `oklch(100% 0 0)` | [Page background] |
+| `color-text` | `#1a1a1a` | `oklch(12% 0 0)` | [Body text] |
+| `color-text-secondary` | `#666666` | `oklch(45% 0 0)` | [Secondary text] |
+| `color-accent` | `#0070f3` | `oklch(50% 0.2 260)` | [Links, hover states] |
+| `color-border` | `#e5e5e5` | `oklch(91% 0 0)` | [Dividers, borders] |
+
+---
+
+## Typography
+
+| Token name | Font family | Size | Line height | Weight | Usage |
+|---|---|---|---|---|---|
+| `text-h1` | [family] | [size] | [lh] | [weight] | [page heading] |
+| `text-h2` | [family] | [size] | [lh] | [weight] | [section heading] |
+| `text-h3` | [family] | [size] | [lh] | [weight] | [card heading] |
+| `text-body` | [family] | [size] | [lh] | [weight] | [body copy] |
+| `text-caption` | [family] | [size] | [lh] | [weight] | [captions, labels] |
+| `text-button` | [family] | [size] | [lh] | [weight] | [button labels] |
+
+---
+
+## Spacing scale
+
+| Token name | Value | Usage |
+|---|---|---|
+| `spacing-xs` | [value] | [usage] |
+| `spacing-sm` | [value] | [usage] |
+| `spacing-md` | [value] | [usage] |
+| `spacing-lg` | [value] | [usage] |
+| `spacing-xl` | [value] | [usage] |
+| `spacing-2xl` | [value] | [usage] |
+
+---
+
+## Border radius
+
+| Token name | Value | Usage |
+|---|---|---|
+| `radius-sm` | [value] | [buttons, inputs] |
+| `radius-md` | [value] | [cards] |
+| `radius-lg` | [value] | [modals, sections] |
+| `radius-full` | `9999px` | [pills, avatars] |
+
+---
+
+## Box shadows
+
+| Token name | Value | Usage |
+|---|---|---|
+| `shadow-sm` | [value] | [subtle cards] |
+| `shadow-md` | [value] | [elevated cards] |
+| `shadow-lg` | [value] | [modals, dropdowns] |
+
+---
+
+## Transitions
+
+| Token name | Value | Usage |
+|---|---|---|
+| `transition-fast` | [duration easing] | [hover color changes] |
+| `transition-base` | [duration easing] | [transform, opacity] |
+| `transition-slow` | [duration easing] | [page transitions] |
+
+---
+
+## Tailwind CSS v4 config snippet
+
+```css
+@theme {
+  --color-primary: oklch(0% 0 0);
+  --color-bg: oklch(100% 0 0);
+  --color-text: oklch(12% 0 0);
+  --color-accent: oklch(50% 0.2 260);
+  /* Add all extracted tokens here */
+}
+```