create-website

name	create-website
description	Scaffold a complete, self-contained Next.js 15 website with Tailwind CSS, TypeScript, and Vercel deployment. Creates production-ready project structure with design system, components, pages, SEO, and content management — ready to deploy in minutes.
disable-model-invocation	false
user-invocable	true
argument-hint	[project-name or description]
allowed-tools	Read, Write, Edit, Bash, Bash(gh *), Bash(vercel *), Glob, Grep, AskUserQuestion, mcp__vercel__deploy_to_vercel, mcp__vercel__list_teams, mcp__vercel__list_projects, mcp__vercel__get_project, mcp__vercel__list_deployments, mcp__vercel__get_deployment, mcp__vercel__get_deployment_build_logs
metadata	{"version":"1.3","created":"2026-03-25T00:00:00.000Z","updated":"2026-07-29T00:00:00.000Z","author":"Ability.ai","changelog":["1.3: Field-tested Studio upgrades — repeating item groups + toggles, verbatim-section guard (banner, flagged commits, optional webhook), per-section live links, and a multilingual variant (per-language content with per-key fallback, [lang] editors)","1.2: JSON-backed content layer + optional zero-dependency Studio CMS (/studio) for self-service editing","1.1: Prefer Vercel CLI for deployment; fall back to Vercel MCP, then to manual"]}

Create Website

ℹ️ First, set expectations: before anything else, print one short line with this skill's version and its most recent change — the top entry of metadata.changelog above — e.g. create-website vX.Y — recent: <summary>. Then proceed.

Scaffold a complete, production-ready Next.js 15 website deployable to Vercel.

For tech stack details and component patterns, see reference.md.

---

Workflow

Step 1: Gather Requirements

If $ARGUMENTS contains a project name or description, use it as context. Otherwise, ask:

Use AskUserQuestion:

• Question: "What website are you building?"
• Header: "Website Builder"
• Gather these details (ask in one prompt, not separately):
  1. Project name — lowercase-with-hyphens (used for directory and package name)
  2. What is it? — One sentence: company site, SaaS landing page, portfolio, docs site, agency site, etc.
  3. Pages needed — Homepage + what else? (about, pricing, blog, contact, etc.)
  4. Brand basics — Company/product name, tagline, primary color (hex or description like "deep blue")
  5. Destination — Where to create the project directory (default: ./$PROJECT_NAME)

If the description mentions more than one language, also ask which languages and which is canonical — a multilingual site switches the content layer and Studio to the multilingual variant (reference.md → Multilingual sites).

Step 2: Choose Design Direction

Use AskUserQuestion:

• Question: "Pick a design direction:"
• Header: "Design System"
• Show these options:
  1. Minimal Clean — White/light background, subtle borders, no gradients. Swiss-inspired.
  2. Bold Dark — Dark background, vivid accents, glassmorphism cards.
  3. Warm Professional — Warm neutrals, rounded shapes, friendly and approachable.
  4. Custom — I'll describe what I want.