Website builder

This skill works for any business: a dentist, a law firm, a contractor, a coach, a software company, a bakery, a church, a course creator. Never assume a trade, a place, or a page type. Everything specific comes from the interview and from research. The examples in these files are examples, nothing more.

The person is probably not technical. They answer questions, click buttons you describe, and approve what you show them. You do everything else.

Pick how to work (ask once, at the start)

Unless the person's request already makes it obvious, ask with the AskUserQuestion tool (in plain words if that tool isn't available). Question: "How would you like to work?" Two options:

Normal interview. "I'll guide you step by step: what your pages give away, keyword research, a full site with contracts and checks, published on Cloudflare for free."
Freeform. "You tell me what you want and I build it your way, on any setup or host you choose. I still use good copywriting, conversion, SEO and AI-search habits, but I won't push back or put you on a track."

Remember the answer in content/notes.md (or the project's notes file) so you don't ask again. The person can switch at any time by saying so.

Freeform mode

Follow references/any-stack.md. In short:

Their words decide. Build what they ask, in the order they ask, on the stack, platform and host they name or already have. If they name none, pick something sensible for the job and say what you picked in one sentence. Don't run the interview, don't require contracts or archives, and don't argue with layout or design choices.
The conventions are your defaults, not rules. Write copy with references/copywriting.md (including the AI-tells sweep), shape pages with references/conversion.md, and apply references/technical-seo.md, references/geo-aeo.md and references/indexing.md wherever they fit. If a request clearly works against its own goal (two competing buttons, a blocked AI crawler, a page hidden from search), mention it once, in one sentence, then do it their way.
The Lead Desk works in Freeform too, for any site on any host: forms post to it and one script tag goes in the site footer (references/lead-desk.md).
Lead magnets work the same way in Freeform. "Make me a lead magnet" goes straight to references/lead-magnets.md and scripts/build-magnet.mjs, for any site or none at all.
Use any other reference when it helps (keyword research, archives, success pages, contracts), and only when they ask for it or it plainly serves what they asked.
Checks still run where they can: point scripts/check-site.mjs --freeform at the site's built HTML folder, or fetch a live site first with scripts/fetch-site.mjs. In freeform, layout conventions show as suggestions, not failures.
Still always: the "How to work with the person" rules below, no invented facts, no handling of passwords or keys, and asking before anything that costs money, changes a domain or deletes something.

Everything from "Choose the job" onward is the Normal interview. In Freeform, use those sections only as reference.

The goal: convert the action

Every landing page exists to get one action taken: the booking, the form, the download, the registration, the purchase. Search, AI answers, social posts and ads only bring people to the page. The page works when they act. When a choice helps ranking but hurts conversion, conversion wins. Read references/conversion.md before designing or writing any page, and measure every page by its conversion rate.

The idea behind the site (explain it in these words)

Your website is a collection of landing pages. Each landing page is built for one kind of visitor who wants one thing, and it asks them to do one thing: book a call, get a quote, download a guide, save a seat, buy. Everything they need to decide is on the first screen, and there is no menu to distract them. After they act, they land on a success page that delivers what they asked for and offers one next step.

Landing pages of the same kind are grouped into an archive, which is a simple page that lists them all. Your archives depend on what you give away or sell. They might be places you serve, your services, the people you help, free guides, events, or something else entirely. The footer at the bottom of every page links to every archive. Visitors who want to look around can scroll down and find everything, and Google and AI assistants follow those footer links to discover every page.

The site grows by adding landing pages, never by adding menu items. Every page follows a contract (a checklist of required facts and rules), so new pages are quick to add and always meet the standard.

How to work with the person (always)

Self-serve: do the thinking yourself and offer short menus of concrete options to pick from (AskUserQuestion), with your recommendation first. Ask open questions only for facts only they know.
One step at a time. Plain words. Wait for "done" before the next step.
When they must click something, say exactly what the button says and where it is on screen.
Never handle passwords, API keys or tokens. Never ask for them in the chat, and never read them from files or the computer. Services that need a login are connected by the person themselves: Cloudflare through its browser login, other tools through their own Claude connectors or CSV exports. Lead Desk passwords and webhook links are typed by the person into their own Lead Desk pages, never into the chat.
Ask before anything that costs money, changes a domain, or deletes something.
After each step, say what you did in one sentence. No jargon.
Show, don't describe: start the local preview and give them the link whenever there is something to see.
Never invent facts: no made-up numbers, reviews, places, credentials or search volumes. If a fact is missing, ask.

Choose the job (Normal interview)

Build a new site. Every phase, in order.
Make a lead magnet (and, if wanted, its landing page, success page, posts, ads and emails). Follow references/lead-magnets.md.
Add a landing page of any kind, in any existing archive. Follow "Adding a page" in references/contracts.md.
Add a new archive (a new kind of landing page). Follow "Adding an archive" in references/contracts.md.
Find keywords and places, and plan new pages. Phase 4, then hand back the page plan.
Check, fix and index an existing site. Phases 8, 9 and 10.
Set up the Lead Desk, the business's own lead inbox with admin logins, results and alerts, on its Cloudflare account. Follow references/lead-desk.md. Works with any website.
Set up a routine that adds pages on a schedule. See "Routines" in references/contracts.md.

Phase 1: What should I make for you? (always first in the interview)

Follow references/offers-and-archives.md. Keep it self-serve: you do the thinking and offer menus to pick from.

Ask what they sell, then "What lead magnets do you want me to make for you?" with 3-4 ideas worked out for their business (references/lead-magnets.md), then which pages to make.
Build the offer inventory from their picks: everything the site will offer or give away, and the one action each asks for.
Learn the business model, where customers come from, and the social media plan. Every social post that promises something needs a landing page that delivers it.
Decide whether places matter at all. Many businesses have no location pages.
Choose the archives from the templates. Name them in the business's own words and get the person's okay.

Phase 2: Gather the facts

Read about.md and voice.md first if they exist, and skip anything they already answer. Then ask, one question at a time, only for what the chosen archives need:

Proof: years in business, numbers served, credentials or licences, guarantees, awards, rating and review count, and 3+ testimonials with name, place (if relevant) and a specific result.
Prices or ranges they are happy to publish, and how long things take.
For each offer, the specific facts its page needs (the contract's fields tell you which).
Where leads go. Offer a menu: their own Lead Desk (recommended: free, on their Cloudflare account, shows where every lead came from and which became customers; references/lead-desk.md), the CRM or email tool they already use (the Lead Desk can pass leads on to it), or a booking tool for calls.
Brand: logo, colours, real photos of their work and people.
Name, address (if public) and phone exactly as on their Google Business Profile, plus links to every official profile.
Whether they own a domain, and where they bought it.

Save everything in content/business.yaml, content/offers.md and content/notes.md so nothing is asked twice.

Phase 3: Set up and connect Cloudflare

Follow references/cloudflare-setup.md: Node (if missing), a free Cloudflare account, Wrangler installed into the site at a fixed version, npm run cf:login, then npm run cf:whoami to confirm.

Phase 4: Keyword research, place discovery and page plan

Follow references/keyword-research.md:

Build candidates from the offer inventory, the customers' own words, and (only if places matter) the places discovered at the right level of detail.
Get real demand from a named source and check real competition in the actual search results.
Group keywords that share search results into one page, and run each page through the gate.
Save research/keywords.csv, research/places.csv (if places matter) and research/page-plan.md. Show the person the plan in plain words and get their okay.

Phase 5: Set up the contracts

Follow references/contracts.md:

Create contracts/archives/<id>.json for each chosen archive from assets/contracts/archive-templates/, with the business's own id, label, path and goal.
Copy the success contracts the site needs from assets/contracts/success/.
Copy scripts/contracts.mjs, scripts/new-page.mjs, scripts/check-site.mjs and scripts/build-magnet.mjs into the site's scripts/ folder.
Scaffold every planned page with node scripts/new-page.mjs.

Phase 6: Build the site

Follow references/site-structure.md. The stack is Astro + Tailwind with static output. Content collections are generated from the contracts, so the build refuses any page that breaks its contract.

The rules that matter most:

One conversion goal per landing page. Every button and form leads to the same action, marked data-cta="<goal>" and data-success="/thanks/<goal>/". A second offer gets its own page.
Everything important on the first screen: logo, a headline that names the problem and contains the page's main keyword, two lines of sub text at most, the one conversion, and trust (badges plus 2-3 short testimonials). The page may scroll, but nobody should need to.
No top navigation menu. The header holds the logo and the call to action only.
Archives list every landing page of their kind. The footer on every page links to every archive.
Each archive has a role. search archives are built to rank and be quoted by AI (keyword gate, full SEO/AEO/GEO). resource archives hold things linked from content, social posts and email; their pages focus on showing exactly what the visitor gets (a preview is required) and skip the keyword gate. both means a resource that also passed the gate.
Success pages follow their success contract: deliver what was promised, offer one next step, never indexed.

Phase 6b: Make the lead magnets

For each lead magnet they ordered, follow references/lead-magnets.md: write lead-magnets/<slug>/magnet.md, run node scripts/build-magnet.mjs lead-magnets/<slug> --site public, show them the PDF and cover, and use the cover as the landing page preview. Write promo.md (posts, comment-to-DM flow, ads and follow-up emails) if they want it.

Phase 7: Write the copy

Follow references/copywriting.md and references/conversion.md: problem-aware, solution-focused, built around the page's keyword, short plain sentences, facts instead of adjectives. Run the AI-tells sweep on every page before showing it.

Phase 8: Checks

references/geo-aeo.md: the full AI search checklist. Apply all of it.
references/technical-seo.md: metadata, structured data, sitemap, robots.txt, llms.txt, speed.
Add "check": "node scripts/contracts.mjs check && astro build && node scripts/check-site.mjs dist" to package.json and run npm run check after every change. Never publish with a FAIL line. Fix warnings unless there is a stated reason not to, and tell the person which ones you left and why.

Phase 8b: Lead Desk

If they chose the Lead Desk, set it up with references/lead-desk.md before publishing: database, address (their subdomain if the domain is on Cloudflare), owner invite, forms posting to it with _success set to each page's success page, the helper script on every page, and at least one alert. Send a test lead from the local preview and show it arriving.

Phase 9: Publish

Show the local preview and wait for their okay.
npm run deploy (it runs the checks first; the first time, create the project as in the setup guide).
Give them the live link, then open each archive, one landing page with its success page, /sitemap-index.xml and /llms.txt.
Offer to connect their own domain (setup guide, Part 5). Indexing needs the final domain, so do this before phase 10 if they want one.
After publishing, run the live speed check in references/technical-seo.md.

Phase 10: Get indexed

Follow references/indexing.md: pre-flight checks, Google Search Console, Bing Webmaster Tools, IndexNow, map listings, and keeping the .pages.dev copy out of search. Check progress with the person on days 3, 7 and 14.

Phase 11: Hand off

Three short lines:
- To add a page: "Tell Claude: add a landing page for [the thing] to [the archive]."
- To publish changes: "Tell Claude: publish my site."
- To check health: "Tell Claude: check my site."
Write SITE-GUIDE.md: those lines, the live links (including the Lead Desk's /admin/ address, if they have one), every archive with its pages, goals and success pages, and where each kind of content lives.
Offer the monthly routine (the Lead Desk's Results page or the analytics tool: conversion rate per page and one improvement at a time, new page ideas from Search Console, indexing check, AI visibility check) and, if they want, a scheduled Claude routine that adds pages under the contracts.

Never

In both modes:

Invent search volumes, reviews, testimonials, statistics, credentials, places or local details.
Handle passwords, API keys or tokens.
Block AI crawlers, or leave a host's AI-bot blocking on, without asking.

In the Normal interview (in Freeform, mention these once if relevant, then follow the person):

Assume the business has places, services, or any particular archive.
Build two pages that only swap a place or offering name. The checker fails near-duplicates.
Put two conversion goals on one landing page, or add a top menu.
Hide content behind JavaScript, tabs that load text later, or client-side rendering. AI crawlers do not run JavaScript.
Publish with a FAIL line, or with TODO left in any content file.
Use em dashes in site copy.

cartcodes/website-builder

What is website-builder?

Ask in your favorite AI

Documentation