Website Builder

Name: Website Builder
Author: darblex

darblex/price-compare-israel

1 installs
Updated March 10, 2026
darblex/price-compare-israel

Helps with ai & agent building tasks.

About

website-developer is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

website-builder
AI & Agent Building
AI-coding skill

Website Builder by the numbers

1 all-time installs (skills.sh)
Ranked #14,101 of 16,546 AI & Agent Building skills by installs in the Skillselion catalog
Data as of Jul 7, 2026 (Skillselion catalog sync)

npx skills add https://github.com/darblex/price-compare-israel --skill website-builder

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/darblex/price-compare-israel/website-builder.svg)](https://skillselion.com/skills/darblex/price-compare-israel/website-builder)

Installs	1
Last updated	March 10, 2026
Repository	darblex/price-compare-israel ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

Website Builder

Autonomously research, build, and ship a B2B SaaS website fast.

Workflow

1. Check for Vercel Token:

Verify that the $VERCEL_TOKEN environment variable is set or vercel CLI is authenticated. If not, stop and inform the user.

2. Research Trends & Problems (Do not ask the user):

Search for current trends, complaints, and problems people are having on platforms like GitHub (issues, discussions), Reddit, and HackerNews.
You can use tools like web_search or the gh CLI to find these problems.
Identify ONE clear problem that a lightweight web app can solve.

3. Build the Solution:

Design and build an app (static or Next.js) that specifically solves the problem you found.
static for a single-file landing page or micro-tool.
nextjs for multi-page/app-router projects.

4. Deploy:

Deploy the project to Vercel using your Vercel token.

5. Return:

The deployed URL, the problem you found, and how your app solves it.

Command

bash skills/website-builder/scripts/build-and-deploy.sh --name "my-auto-saas" --mode static --idea "Solution to X based on Y trend"

Optional:

bash scripts/build-and-deploy.sh --name "my-site" --mode nextjs --idea "MVP concept"

Local scaffold test (no deploy):

bash scripts/build-and-deploy.sh --name "my-site" --mode static --skip-deploy

Notes

Require vercel CLI auth beforehand (VERCEL_TOKEN in ~/.bashrc or session).
Never hardcode secrets into source files.
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.

#!/usr/bin/env bash
set -euo pipefail

NAME=""
MODE="static"
IDEA=""
WORKDIR="${PWD}"
SKIP_DEPLOY="false"

usage() {
  echo "Usage: $0 --name <app-name> [--mode static|nextjs] [--idea <text>] [--workdir <path>] [--skip-deploy]"
}

while [[ $# -gt 0 ]]; do
  case "$1" in
    --name) NAME="$2"; shift 2 ;;
    --mode) MODE="$2"; shift 2 ;;
    --idea) IDEA="$2"; shift 2 ;;
    --workdir) WORKDIR="$2"; shift 2 ;;
    --skip-deploy) SKIP_DEPLOY="true"; shift 1 ;;
    -h|--help) usage; exit 0 ;;
    *) echo "Unknown arg: $1"; usage; exit 1 ;;
  esac
done

if [[ -z "$NAME" ]]; then
  usage
  exit 1
fi

if [[ "$MODE" != "static" && "$MODE" != "nextjs" ]]; then
  echo "--mode must be static or nextjs"
  exit 1
fi

if [[ "$SKIP_DEPLOY" != "true" ]]; then
  if ! command -v vercel >/dev/null 2>&1; then
    echo "Missing Vercel CLI. Install with: npm i -g vercel"
    exit 1
  fi
fi

TARGET_DIR="${WORKDIR%/}/${NAME}"
mkdir -p "$TARGET_DIR"

if [[ "$MODE" == "static" ]]; then
  cat > "${TARGET_DIR}/index.html" <<HTML
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <title>${NAME}</title>
  <style>
    :root { color-scheme: dark; }
    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: radial-gradient(1000px 500px at 80% -10%, #3b82f6 0%, transparent 60%), #0b1020;
      color: #e8ecff;
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }
    .card {
      width: min(900px, 100%);
      border: 1px solid #28345f;
      background: rgba(18, 26, 51, 0.85);
      border-radius: 18px;
      padding: 32px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.35);
    }
    h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 3rem); }
    p { margin: 0; color: #b8c2f0; line-height: 1.6; }
    .btn {
      display: inline-block;
      margin-top: 20px;
      background: #4f7cff;
      color: white;
      text-decoration: none;
      border-radius: 12px;
      padding: 10px 14px;
      font-weight: 600;
    }
  </style>
</head>
<body>
  <main class="card">
    <h1>${NAME}</h1>
    <p>${IDEA:-A polished website scaffold deployed with Vercel.}</p>
    <a class="btn" href="#">Get Started</a>
  </main>
</body>
</html>
HTML
elif [[ "$MODE" == "nextjs" ]]; then
  if [[ -n "$(ls -A "$TARGET_DIR" 2>/dev/null)" ]]; then
    echo "Target directory is not empty: $TARGET_DIR"
    echo "Use a fresh --name or clean the directory first."
    exit 1
  fi
  npx create-next-app@latest "$TARGET_DIR" --ts --tailwind --eslint --app --use-npm --yes
fi

cd "$TARGET_DIR"

if [[ "$SKIP_DEPLOY" == "true" ]]; then
  echo "🧪 Scaffold complete (deploy skipped)"
  echo "📁 Folder: $TARGET_DIR"
  exit 0
fi

DEPLOY_URL="$(vercel deploy --prod --yes)"

echo "✅ Deployed: $DEPLOY_URL"
echo "📁 Folder: $TARGET_DIR"