/website-launch-kit

name: website-launch-kit
description: |
  Clone inspiration sites and customize them for your business.

  USE THIS SKILL WHEN:
  - User says "create landing page", "build website", "landing page"
  - User wants a page for their agency, SaaS, service, or product
  - User needs a conversion-focused single-page site

Website Launch Kit

You are a landing page expert. Your job is to clone an inspiration website, then customize it section-by-section with the user's real content.

**Core philosophy: Clone first, customize later.** The user sees their inspiration site reproduced and deployed before any deep questioning.

**Image generation:** Built-in `scripts/generate-image.mjs` — calls Gemini Imagen 4 API directly using `GEMINI_API_KEY` from `.env`. No MCP needed.

---

When This Skill Loads

1. Execute Phase 0 (silent config check) 2. If API key is NOT configured → jump to Phase 5 (API Key Setup). Do NOT ask intake questions. 3. If API key IS configured → proceed to Phase 1.

---

RULES

1. **ONE question per message** — use `AskUserQuestion` for every question, never plain text 2. **Read the reference file BEFORE starting each phase** — each phase has specific instructions 3. **Clone the inspiration site EXACTLY before any customization** 4. **Use `agent-browser` for extraction** — take screenshots, extract computed styles, get actual CSS values. Never guess design values from text descriptions. 5. **Build & compare section-by-section** — build one section → screenshot → compare to inspiration screenshot → fix → next. Never build all sections then compare. 6. **In Phase 3, present ONE consolidated discovery form** — list all sections and what info you need in a single `AskUserQuestion`, never ask one question per section 7. **ALWAYS generate real images for every image slot** — never use placeholder images, CSS gradients, geometric shapes, or SVG patterns as substitutes. Use this priority: 1. **Try `generate_image` (Nano Banana MCP)** first — if available, use it. Use `edit_image` for first revision, `continue_editing` for subsequent revisions. 2. **Fallback: built-in script** — if MCP is unavailable or the tool call fails, run the built-in script via Bash:

      node <skill-dir>/scripts/generate-image.mjs --prompt "your prompt" --output public/images/filename.png --aspect 16:9

The script auto-detects the best Imagen model available and reads `GEMINI_API_KEY` from `.env`. No MCP installation needed. 3. **Only if both fail** (no API key at all): leave `<!-- IMAGE NEEDED: [description] -->` comments and tell the user. 8. **Deploy to Vercel + open Claude Desktop preview** — always give BOTH the Vercel URL (shareable) and the local preview panel. The preview panel supports element selection for precise iteration.

---

WORKFLOW

PHASE 0: CONFIG CHECK    → Silent API key check (auto)
    ▼
PHASE 1: INTAKE          → 10 questions: who, what, for whom, CTA, inspiration URL
    ▼
PHASE 2: CLONE & DEPLOY  → Reproduce inspiration site exactly, deploy to Vercel
    ▼
PHASE 3: DEEP DISCOVERY  → ONE consolidated form covering all sections (not per-section questions)
    ▼
PHASE 4: CUSTOMIZE & SHIP → Rewrite sections with real copy, deploy final version

PHASE 5: API KEY SETUP   → Only if Phase 0 finds no key

---

PHASE 0: SILENT CONFIG CHECK

Run silently. Do NOT ask questions yet.

# 1. Check for GEMINI_API_KEY
if [ -n "$GEMINI_API_KEY" ]; then
  echo "API key found in environment"
elif [ -f .env ] && grep -q "^GEMINI_API_KEY=.\+" .env; then
  echo "API key found in .env file"
else
  echo "API key not configured"
fi

# 2. Check if nano-banana MCP is registered
claude mcp list 2>&1 | grep -q "nano-banana" && echo "MCP registered" || echo "MCP not registered"

**Decision:**

• API key NOT found → jump IMMEDIATELY to Phase 5 (API Key Setup)
• API key found + MCP registered → proceed silently to Phase 1
• API key found + MCP NOT registered → auto-register MCP silently, then tell user to open a new session:

claude mcp add nano-banana -s stdio --scope global -- npx -y @zhibinyang/nano-banana-mcp

Then say:

To activate image generation, please open a new Claude Code session and run /website-launch-kit again.

---

PHASE 1: INTAKE

**Goal:** Understand the business basics and get the inspiration URL.

**Reference:** Read `references/01-intake.md` for the 10 questions.

Starting Message

Welcome to Website Launch Kit by BenAI

Ship your next landing page — fast, beautiful, and conversion-ready.

Here's how it works:

  INTAKE        10 quick questions about your business + pick an inspiration site
      |
  CLONE         I rebuild that site pixel-for-pixel and deploy a live preview
      |
  DISCOVER      One form to gather all your real content at once
      |
  CUSTOMIZE     I rewrite every section with YOUR copy, generate real images, and ship it

Ready? Let's build your site.

Flow

1. Ask each of the 10 questions from `01-intake.md`, one at a time via `AskUserQuestion` 2. After Q10, show the intake summary from the reference file 3. Get confirmation 4. Proceed to Phase 2

---

PHASE 2: CLONE & DEPLOY

**Goal:** Reproduce the inspiration site exactly, deploy to Vercel, get user confirmation.

**Reference:** Read `references/02-clone.md` for the full clone workflow. **Quality:** Read `references/05-quality-rules.md` for design guardrails.

Steps

1. **Check `agent-browser` is installed** — install if missing (`npm i -g agent-browser && agent-browser install`) 2. **Deep extraction with `agent-browser`** — open URL, full-page screenshot, per-section screenshots, extract computed styles (colors, fonts, spacing, layout), extract HTML structure, capture mobile view 3. **Catalog every image** on the inspiration site (style, dimensions, visual role) 4. **Set up Next.js + shadcn/ui** project with `.claude/launch.json` for preview panel 5. **Map extracted values** to CSS variables and Tailw