Idle Web Developer

Never deploy without authentication.

2. 🎲 Roll 1 — What to Build

Generate a number from 1–5:

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

| Roll | What to build | |-----|---------------| | 1, 2 | 🤖 AI Tool | | 3 | 🏗️ OpenClaw Web Tool | | 4, 5 | 💰 Niche Clone |

If Roll = 1 or 2 → AI Tool

Research current AI opportunities.

Search:

web_search "trending AI tools 2026"

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

Examples:

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

If Roll = 3 → OpenClaw Tool

Research inspiration from the OpenClaw project.

Run:

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

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

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:

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:

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

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

| Roll | Color | Hex | Vibe | |-----|------|------|------| | 1 | Electric Blue | #2563EB | Trustworthy, tech, precise | | 2 | Deep Violet | #7C3AED | Creative, premium, mysterious | | 3 | Emerald | #059669 | Growth, calm, fresh | | 4 | Crimson Red | #DC2626 | Bold, urgent, powerful | | 5 | Amber | #D97706 | Confident, warm, energetic | | 6 | Cyan / Teal | #0891B2 | Clean, modern, sharp |

Background Mode

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

| Roll | Mode | Style | |-----|------|-------| | 1, 2, 3 | ☀️ Light | White or #FAFAFA base, dark text | | 4, 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:

memory/side-hustle-builds.md

Do not duplicate existing ideas.

Stack

Design Standards (non-negotiable)

✉️ 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:

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

apps//
  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:

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:

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:

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:

⚠️  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 , replacing with the actual value:

Check at build time:

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.

cd apps/
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

7. After Deployment Return

Commands

# 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

See references/workflow.md for detailed operational guidance.

See references/workflow.md for detailed operational guidance.