Website Builder#

Autonomously build and ship a polished web app. The idea and design are determined automatically using a dice-based system.

---

Workflow#

0. First-Time Setup (Onboarding Wizard)#

Before doing anything else, check whether the skill has been configured.

Config file location:

text

~/.openclaw/workspace/skills/idle-web-developer/.skill-config

If .skill-config does not exist (or the user explicitly asks to re-run setup with --setup), run the interactive onboarding wizard below.

---

Onboarding Wizard#

Ask the user each question in order. Collect the answers, then write them all to .skill-config at the end. Present each question clearly — one at a time, conversationally.

---

Step A — Vercel Token (required)

"To deploy your sites, I need your Vercel token.

You can find it at: https://vercel.com/account/tokens

What is your Vercel token?"

Save as VERCEL_TOKEN.

---

Step B — Google Analytics (optional)

"Would you like to enable Google Analytics on your sites? This is optional — it lets you track page views and user behaviour.

(yes / no)"

• If no → skip to Step C. Leave GA_MEASUREMENT_ID and GOOGLE_APPLICATION_CREDENTIALS blank.
• If yes → ask:

"What is your Google Application Credentials JSON file path?

(e.g. /home/you/.config/gcloud/service-account.json)"

Save as GOOGLE_APPLICATION_CREDENTIALS.

"What is your GA4 Measurement ID?

(e.g. G-XXXXXXXXXX — found in Google Analytics → Admin → Data Streams)"

Save as GA_MEASUREMENT_ID.

---

Step C — Supabase Waitlist (optional)

"Every site includes a 'Join the Waitlist' section so visitors can sign up.

Would you like to connect this to Supabase so emails are actually saved? This is optional — the section always appears, but without credentials submissions won't be stored.

(yes / no)"

• If no → skip. Leave SUPABASE_URL and SUPABASE_ANON_KEY blank. The waitlist UI will still be included on every site.
• If yes → ask:

"What is your Supabase project URL?

(e.g. https://abcdefgh.supabase.co)"

Save as SUPABASE_URL.

"What is your Supabase anon/public key?

(found in Supabase → Project Settings → API → Project API Keys)"

Save as SUPABASE_ANON_KEY.

---

Saving the Config

After collecting all answers, write the config file:

bash

CONFIG="~/.openclaw/workspace/skills/idle-web-developer/.skill-config"

cat > "$CONFIG" <<EOF
VERCEL_TOKEN="${VERCEL_TOKEN}"
GOOGLE_APPLICATION_CREDENTIALS="${GOOGLE_APPLICATION_CREDENTIALS}"
GA_MEASUREMENT_ID="${GA_MEASUREMENT_ID}"
SUPABASE_URL="${SUPABASE_URL}"
SUPABASE_ANON_KEY="${SUPABASE_ANON_KEY}"
EOF

Confirm to the user:

"✅ Setup complete! Your config has been saved.

You can re-run setup anytime by saying 'set up the website builder' or passing --setup to the script."

Then proceed with the rest of the workflow.

---

If .skill-config already exists#

Load it and continue. No questions needed.

bash

source ~/.openclaw/workspace/skills/idle-web-developer/.skill-config

---

1. Check for Vercel Token#

Verify that deployment is possible.

• Confirm $VERCEL_TOKEN is set (from config or environment).
• If not available: stop and inform the user to run setup.

Never deploy without authentication.

---

2. 🎲 Roll 1 — What to Build#

Generate a number from 1–5:

bash

python3 -c "import random; print(random.randint(1,5))"

RollWhat to build1, 2🤖 AI Tool3🏗️ OpenClaw Web Tool4, 5💰 Niche Clone

---

If Roll = 1 or 2 → AI Tool#

Research current AI opportunities.

Search:

text

web_search "trending AI tools 2026"

Find something original and useful that can realistically be built as a web app.

Examples:

• AI workflow generators
• AI niche productivity tools
• AI dev utilities
• AI writing or research helpers

The result must be practical and usable, not just a landing page.

---

If Roll = 3 → OpenClaw Tool#

Research inspiration from the OpenClaw project.

Run:

text

gh issue list -R openclaw/openclaw --limit 20

Then build something that extends or promotes the OpenClaw ecosystem, such as:

• Interactive docs
• Prompt playground
• Demo tool
• Developer utility
• Visual onboarding experience

The result should help developers understand or use OpenClaw faster.

---

If Roll = 4 or 5 → Niche Clone#

Do not use a predefined list. Research what's actually making money right now.

Run multiple searches across these sources:

text

web_search "most profitable micro SaaS 2025 site:starterstory.com"
web_search "bootstrapped SaaS revenue 2025 site:starterstory.com"
web_search "fastest growing AI SaaS startups 2025 site:crunchbase.com"
web_search "profitable niche SaaS ideas 2025"

Look for:

• StarterStory.com — real founders sharing actual MRR, growth, and what's working
• Crunchbase — recently funded startups (seed/Series A) in AI/SaaS — funding = validated demand
• Indie Hackers — $10k–$100k MRR solo/small-team products
• Product Hunt — trending tools with strong upvote momentum

Selection criteria:

1. The product has demonstrated revenue or traction (not just hype)
2. A clear underserved niche exists (industry, role, geography, workflow)
3. The niche version can be meaningfully differentiated — not just a rebrand

Then:

1. Pick the most promising product with clear revenue signal

2. Identify a specific underserved niche — be precise:

   • ❌ "small businesses"
   • ✅ "independent veterinary clinics"

3. Build a focused version targeting that niche exactly

The niche is the moat — the narrower, the better.

Example:

Research finds → Otter.ai ($50M ARR, meeting transcription)

Instead of:

AI meeting transcription

Build:

AI meeting transcription for real estate showings — auto-generates buyer feedback summaries and follow-up emails for agents

---

3. 🎲 Roll 2 — Color Palette#

Roll two more times.

Primary Color#

bash

python3 -c "import random; print(random.randint(1,6))"

RollColorHexVibe1Electric Blue#2563EBTrustworthy, tech, precise2Deep Violet#7C3AEDCreative, premium, mysterious3Emerald#059669Growth, calm, fresh4Crimson Red#DC2626Bold, urgent, powerful5Amber#D97706Confident, warm, energetic6Cyan / Teal#0891B2Clean, modern, sharp

---

Background Mode#

bash

python3 -c "import random; print(random.randint(1,6))"

RollModeStyle1, 2, 3☀️ LightWhite or #FAFAFA base, dark text4, 5, 6🌙 Dark#070B14 or deep neutral base, light text

Pair the primary with 1–2 derived accent colors and a neutral set. The palette should feel curated and intentional — never generic.

---

4. 🔨 Building Web Apps#

Before building, check previous builds:

text

memory/side-hustle-builds.md

Do not duplicate existing ideas.

---

Stack#

• React + TypeScript + Vite
• Tailwind CSS (via npm)
• Framer Motion for animations
• lucide-react for icons
• Pexels for stock photos (link only, never download)

---

Design Standards (non-negotiable)#

• Full-viewport animated Hero — bold headline, subheadline, primary CTA
• Fixed Nav with smooth scroll and CTA button
• Features / How It Works with icons or a 3-step flow
• Social Proof — testimonials, logos, or user counts
• Waitlist Signup Section — ALWAYS included, no exceptions (see below)
• CTA section mid-page + bottom — urgent, outcome-focused copy
• Footer — links, legal, socials
• Optional: Demo section (interactive product simulation), Pricing, FAQ
• Apple/Stripe level polish — every page a bespoke masterpiece
• 8px grid, fluid responsive, mobile-first
• Scroll-triggered animations, hover states, microinteractions
• Benefit-driven copy — outcomes not features

---

✉️ Waitlist Signup Section (Required — Always)#

Every single site must include a waitlist signup section. This is non-negotiable, regardless of whether Supabase credentials are configured.

The section should be visually prominent — a full-width band, typically placed between the main CTA and the footer. It should:

• Have a compelling headline (e.g. "Be the first to know", "Get early access", "Join the waitlist")
• Have a subheadline matching the product's value proposition
• Have an email input + submit button
• Show a success state after submission

Placement: Between the mid-page CTA and the Footer (or at the bottom of the hero if the page is short).

Component file: src/components/Waitlist.tsx

---

Project Structure#

text

apps/<app-name>/
  package.json
  vite.config.ts
  tailwind.config.ts
  tsconfig.json
  index.html
  src/
    main.tsx
    App.tsx
    components/
      Nav.tsx
      Hero.tsx
      Features.tsx
      Waitlist.tsx       ← always present
      Testimonials.tsx
      CTA.tsx
      Footer.tsx
      (+ Demo.tsx, Pricing.tsx, FAQ.tsx as needed)

---

Wiring: With Supabase Credentials

If $SUPABASE_URL and $SUPABASE_ANON_KEY are set, the form should POST to Supabase.

Assume the table is named waitlist with columns email, app_name, and app_url. The agent should note in the output that the user may need to create this table in Supabase if it doesn't exist.

SQL to create the table:

sql

create table if not exists waitlist (
  id uuid default gen_random_uuid() primary key,
  email text not null unique,
  app_name text not null,
  app_url text,
  created_at timestamptz default now()
);

The fetch call in the component — always include app_name and app_url:

typescript

const res = await fetch(`${SUPABASE_URL}/rest/v1/waitlist`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'apikey': SUPABASE_ANON_KEY,
    'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,
    'Prefer': 'return=minimal',
  },
  body: JSON.stringify({ email, app_name: APP_NAME, app_url: window.location.origin }),
});

APP_NAME should be a constant at the top of the Waitlist component, set to the product name (e.g. const APP_NAME = 'ErrorLens').

Inject the values at build time via Vite env vars — never hardcode in source:

In vite.config.ts, expose:

typescript

define: {
  __SUPABASE_URL__: JSON.stringify(process.env.SUPABASE_URL ?? ''),
  __SUPABASE_ANON_KEY__: JSON.stringify(process.env.SUPABASE_ANON_KEY ?? ''),
}

Use __SUPABASE_URL__ and __SUPABASE_ANON_KEY__ in the component.

---

Wiring: Without Supabase Credentials

If credentials are absent, still include the full waitlist UI. The form should render and look identical, but on submit show:

"✅ Thanks! We'll be in touch soon."

(The submission does nothing server-side — it's a polished placeholder.)

Log a note in build output:

text

⚠️  Waitlist is UI-only — set SUPABASE_URL and SUPABASE_ANON_KEY to enable real sign-ups

---

Analytics (Optional)#

Check for both conditions before adding any analytics code:

1. $GA_MEASUREMENT_ID is set
2. $GOOGLE_APPLICATION_CREDENTIALS is set or the file exists

If either is missing → skip analytics entirely. Do not add any tracking code.

Only when both are present, add the following to index.html before </body>, replacing <MEASUREMENT_ID> with the actual value:

html

<script async src="https://www.googletagmanager.com/gtag/js?id=<MEASUREMENT_ID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<MEASUREMENT_ID>', { page_title: document.title, page_location: location.href });
  gtag('event', 'page_view', { product_id: location.hostname });
</script>

Check at build time:

bash

if [ -n "$GA_MEASUREMENT_ID" ] && ([ -n "$GOOGLE_APPLICATION_CREDENTIALS" ] || [ -f "$HOME/.openclaw/workspace/secrets/ga-service-account.json" ]); then
  echo "✅ Analytics enabled — Measurement ID: $GA_MEASUREMENT_ID"
else
  echo "⚠️  Analytics skipped — set GA_MEASUREMENT_ID and GOOGLE_APPLICATION_CREDENTIALS to enable"
fi

---

5. Deploy#

Important: Deploy the pre-built dist/ folder, NOT the project root. Vercel rebuilds from source on their servers where your env vars don't exist — Supabase credentials and analytics would be baked in as empty strings. Deploying dist/ sends the already-built static files with credentials properly baked in.

bash

cd apps/<app-name>

# Load credentials from config
source ~/.openclaw/workspace/skills/idle-web-developer/.skill-config

# Export for Vite build (bakes values into the JS bundle locally)
export SUPABASE_URL SUPABASE_ANON_KEY GA_MEASUREMENT_ID GOOGLE_APPLICATION_CREDENTIALS

npm install
npm run build

# Tell Vercel: skip server-side build, serve static files as-is
cat > dist/vercel.json <<'EOF'
{ "buildCommand": "", "outputDirectory": "." }
EOF

# Deploy the LOCAL build output — NOT the source
vercel deploy dist/ --prod --yes --token "$VERCEL_TOKEN"

Why this works: npm run build runs locally where env vars are set, so Vite's define bakes Supabase/GA values into the JS bundle. The vercel.json in dist/ tells Vercel to skip rebuilding and serve the files directly.

---

6. After Every Build#

• Add to memory/side-hustle-builds.md (name, URL or path, idea, date)
• Log in memory/YYYY-MM-DD.md
• Update lastBuild in memory/heartbeat-state.json

---

7. After Deployment Return#

• Deployed URL
• Dice roll results
• The generated idea
• How the product works
• Why it could succeed
• Color palette used
• Analytics: enabled or skipped (state which env var was missing if skipped)
• Waitlist: confirm the section is included; state whether Supabase is wired or placeholder mode. If wired, remind the user to create the waitlist table in Supabase if not already done. The table must include app_name text not null and app_url text columns.

---

Commands#

bash

# Normal build + deploy
bash skills/idle-web-developer/scripts/build-and-deploy.sh --name "my-auto-saas"

# Re-run onboarding setup
bash skills/idle-web-developer/scripts/build-and-deploy.sh --setup

# Skip deploy (scaffold only)
bash skills/idle-web-developer/scripts/build-and-deploy.sh --name "my-site" --skip-deploy

---

Notes#

• Onboarding runs once — after setup, the config is reused automatically.
• Re-setup: say "set up the website builder" or pass --setup to the script.
• Waitlist section is mandatory on every site — no exceptions.
• Never hardcode secrets or tokens into source files.
• Never embed the Supabase anon key directly in JSX — always use Vite define injection.
• Prefer polished dark UI defaults unless user asks otherwise.
• For larger projects, scaffold first, then iterate in follow-up turns.

See references/workflow.md for detailed operational guidance.