Website Operations Playbook
The complete 20-step linear workflow for how we build, QA, launch, and hand off every client website at Dotcom Design. Every step must be completed in order. No step may be skipped.
How This Playbook Works
This is a linear workflow. Each step has an Entry Condition (what must be true before you start) and a Completion Gate (the exact deliverables that must exist before you move forward). You cannot enter a step until its Entry Condition is met. You cannot leave a step until its Completion Gate is satisfied. This is not a reference wiki — it is a play-by-play that enforces quality at every handoff.
The 20-Step Workflow
| # | Step | Phase | Time |
|---|---|---|---|
| 1 | Kickoff Call | Intake | 45 min |
| 2 | Content Scraping | Intake | 30 min |
| 3 | Domain & Hosting Intake | Intake | 15 min |
| 4 | SEO Strategy | Intake | 5 min |
| 5 | Brief Preparation | Build | 30 min |
| 6 | Site Build | Build | 2–4 hrs |
| 7 | Visual QA | QA | 30 min |
| 8 | Technical QA | QA | 20 min |
| 9 | SEO Readiness Audit | QA | 20 min |
| 10 | Performance Optimization | QA | 30 min |
| 11 | AI Friendliness Audit | QA | 15 min |
| 12 | Content QA | Review | 20 min |
| 13 | Deploy to Preview | Review | 15 min |
| 14 | Client Review | Review | 48 hr window |
| 15 | Revisions | Launch | 1–2 hrs |
| 16 | Go Live | Launch | 30 min |
| 17 | Post-Launch Monitoring | Launch | 30 min |
| 18 | GBP Sync | Handoff | 20 min |
| 19 | Quarterback Handoff | Handoff | 15 min |
| 20 | Ongoing Maintenance | Handoff | Ongoing |
Step 1: Kickoff Call
- Signed contract received from the client
- Client contact name, phone, and email confirmed
- Kickoff call scheduled and confirmed with client
The kickoff call is the foundation of every build. Everything that follows — the brief, the build, the SEO strategy — depends on the quality of information gathered here. The call should run 45 minutes. Do not rush it. A thorough kickoff prevents revision loops later.
Before the Call
Look up the client's existing website (if they have one) and spend 10 minutes reviewing it. Note the services they list, the cities they mention, and any obvious gaps or outdated content. This preparation allows you to ask better questions and catch inconsistencies during the call.
Call Structure (45 Minutes)
| Time | Topic | What to Capture |
|---|---|---|
| 0–5 min | Introductions & overview | Confirm contact info, confirm timeline expectations |
| 5–15 min | Business overview | Exact business name, years in business, number of employees, license numbers, service area, HQ city |
| 15–25 min | Services | Complete list of every service offered, primary vs. secondary services, services they want to emphasize |
| 25–35 min | Design direction | Design slider scores (see below), reference sites they like, colors or fonts they prefer, logo files |
| 35–45 min | Content & logistics | Photos available, testimonials/reviews, team bios, special offers, any content they want to keep from old site |
Design Sliders
Ask the client to score each slider from 1 to 10. These scores directly inform the build prompt in Step 5. Record all six scores.
| Slider | 1 (Left) | 10 (Right) |
|---|---|---|
| Style | Classic / Traditional | Modern / Contemporary |
| Tone | Light & Airy | Dark & Bold |
| Complexity | Simple & Clean | Rich & Layered |
| Voice | Friendly & Approachable | Authoritative & Expert |
| Market Position | Economical & Accessible | Premium & Exclusive |
| Aesthetic | Polished & Refined | Gritty & Industrial |
Client Brief Fields
Every field in the client brief must be filled before leaving this step. Do not leave any field blank. If the client does not know the answer, note "TBD — follow up" and schedule a follow-up before Step 5.
| Field | Notes |
|---|---|
| Business name (exact) | As it appears on their license and Google Business Profile |
| Phone number | Primary contact number for the website |
| Address | Full street address including ZIP |
| Business hours | Day-by-day, including holiday exceptions if known |
| Service area | Cities, counties, or radius served |
| Services list | Complete list, ordered by importance |
| Years in business | Used in trust signals and schema |
| License numbers | Contractor license, bonding, insurance — whatever applies |
| Design slider scores | All six sliders, 1–10 |
| Reference site URL | A site they like the look of (optional but valuable) |
| Logo files | Request PNG or SVG; note if unavailable |
| Photos available | Yes/No and approximate count |
| Testimonials/reviews | Count and source (Google, Yelp, etc.) |
- Client brief fully populated — all fields filled or marked TBD with follow-up scheduled
- All six design slider scores recorded
- Reference site URL noted (or confirmed not applicable)
- Logo files received or follow-up scheduled
- Photos status confirmed (available count or "client will send")
Step 2: Content Scraping & Site Inventory
- Step 1 Completion Gate satisfied
- Client's existing website URL confirmed (if they have one)
- Manus task open and ready
If the client has an existing website, use Manus to extract all usable content before it is replaced. This step ensures no copy, imagery, or data is lost during the transition. Even a poorly designed old site often contains accurate business information that would take hours to re-gather.
Manus Scrape Prompt
Open a Manus task and submit the following prompt, replacing the URL with the client's actual site:
Please scrape the following website and extract all content for a rebuild:
[CLIENT WEBSITE URL]
Extract and organize the following:
1. All page copy (home, about, services, contact, and any other pages)
2. All images — download and save as WebP where possible
3. Logo files — save as PNG and SVG if available
4. Business information: name, phone, address, hours, service area
5. All existing services and service descriptions
6. Any testimonials or reviews displayed on the site
7. Team member names and bios
8. Any license numbers, certifications, or trust badges
9. Existing page structure (list all pages found)
10. Any existing integrations (contact forms, chat widgets, booking tools)
Organize everything into a folder called /assets/ and provide a summary
of what was found and what was missing or inaccessible.
What to Do With the Output
Review the Manus output carefully. Cross-reference the extracted business information against the client brief from Step 1. Any discrepancies — different phone numbers, different service lists, different addresses — must be resolved with the client before Step 5. Do not assume the website is correct; the client brief takes precedence.
If the Client Has No Existing Website
If this is a brand-new website with no existing site to scrape, skip the Manus scrape. Instead, use the client brief from Step 1 as the sole content source. Note in the brief that no existing site was available. Proceed directly to Step 3.
Site Inventory Checklist
| Item | Found? | Notes |
|---|---|---|
| All page copy | Yes / No / Partial | Note any pages that were blocked or inaccessible |
| Images | Yes / No / Partial | Note count and quality |
| Logo files | Yes / No | Note format (PNG, SVG, JPG) |
| Business info (NAP) | Yes / No | Cross-reference against client brief |
| Services list | Yes / No / Partial | Note any services on old site not in brief |
| Testimonials | Yes / No | Note count |
| Team info | Yes / No | Names, titles, bios |
| License/cert numbers | Yes / No | Verify against brief |
| Existing integrations | Yes / No | Note any to replicate |
- All extractable content saved to /assets/ folder in Manus task
- Site inventory checklist completed
- Discrepancies between old site and client brief identified and flagged for resolution
- Client brief updated with any new information found during scrape
Step 3: Domain & Hosting Intake
- Step 2 Completion Gate satisfied
- Client contact available to provide or look up credentials
Before any build work begins, you need access to the client's domain registrar. DNS changes are required at launch (Step 16), and discovering access problems on launch day creates delays and client frustration. Resolve access now, while there is time to recover.
Domain Registrar Access
Ask the client: "Who manages your domain — where did you originally register it?" Common registrars include GoDaddy, Namecheap, Google Domains (now Squarespace), Network Solutions, and Bluehost. Once identified, the client needs to either share login credentials or add you as an authorized user.
What to Document
| Item | Where to Find It | Why It Matters |
|---|---|---|
| Domain registrar name | Client provides; or run whois clientdomain.com | Tells you where to make DNS changes at launch |
| Registrar login credentials | Client provides | Required to add DNS records at launch |
| Current nameservers | Registrar DNS settings | Determines if DNS is managed at registrar or elsewhere (e.g., Cloudflare) |
| Current DNS records | Registrar DNS settings | Document all existing A, CNAME, MX, TXT records before making changes |
| Domain expiration date | Registrar dashboard | Alert client if domain expires within 90 days |
| Current hosting provider | Client provides or DNS lookup | Needed to understand what will be replaced |
If the Client Uses Cloudflare
Some clients already have their domain on Cloudflare. If so, the DNS changes at launch are made in the Cloudflare dashboard instead of the registrar. Confirm whether Cloudflare is being used and document the login credentials accordingly.
New Domains
If the client does not have a domain yet, register one on their behalf through Namecheap or Cloudflare Registrar. Use the client's business name as the basis for the domain. Confirm the domain with the client before purchasing. Document the registrar login credentials immediately after registration.
- Domain registrar identified and documented
- Registrar login credentials confirmed and accessible
- Current DNS records documented (screenshot or text copy)
- Domain expiration date noted; client alerted if within 90 days
Step 4: SEO Strategy
- Step 3 Completion Gate satisfied
- Client website URL available (existing site or confirmed new domain)
- Client's plan level confirmed (SEO Booster, Plan A, Plan B, etc.)
The SEO strategy produces the keyword-city matrix that drives the site architecture. Every service page and location page built in Step 6 corresponds to a row in this matrix. The strategy must be completed before the build begins — it is not optional and it is not done after the fact.
How to Run the SEO Strategy
Navigate to the SEO Portal at seo.dotcomdesignops.com and click "Build New Strategy." Enter the client's website URL and plan level. The system will run automatically and produce a live strategy site within 5 minutes. The full process is documented in the SEO Operations Playbook.
What the Strategy Produces
| Output | What It Is | How It's Used |
|---|---|---|
| Keyword-city matrix | A grid of selected keywords x selected markets | Pasted directly into Section 7 of the build prompt in Step 5 |
| Live strategy site URL | A branded client-facing site at seo-strategy.dotcomdesign.com/{domain} | Shared with client to show what pages will be built and why |
| Selected keywords | The 1–5 keywords chosen for this client | Used to name service pages and write meta titles |
| Selected markets | The cities targeted in the strategy | Used to name location pages and write meta titles |
Plan Levels Reference
| Plan | Price | Combinations |
|---|---|---|
| SEO Booster | $399/mo | 10 |
| Plan A | $600/mo | 20 |
| Plan B | $900/mo | 30 |
| Plan C | $1,200/mo | 40 |
| Plan D | $1,600/mo | 50 |
| Plan E | $2,000/mo | 60 |
- Keyword-city matrix generated with correct combination count for the plan level
- Live strategy site URL saved to the client brief
- Matrix copied and ready to paste into the build prompt
Step 5: Brief Preparation
- Steps 1–4 Completion Gates all satisfied
- Client brief fully populated
- Keyword-city matrix ready to paste
- Logo files and any available photos on hand
The build brief is the single document that drives the entire Manus build session. A well-written brief produces a site that needs minimal revision. A vague or incomplete brief produces a site that requires multiple revision loops. Invest the time here — it pays back tenfold in Step 6.
Brief Anatomy
The brief has eight required sections. Every section must be completed before opening the Manus build task. Do not start the build with a partial brief.
| # | Section | What Goes Here |
|---|---|---|
| 1 | Business Identity | Exact business name, phone, address, hours, years in business, license numbers |
| 2 | Service Area | Primary city, all cities/counties served, HQ city |
| 3 | Services | Complete ordered list of all services; note primary vs. secondary |
| 4 | Design Direction | All six slider scores, reference site URL, any specific color or font preferences |
| 5 | Content Assets | Logo file location, photo count and source, testimonials text, team info |
| 6 | Trust Signals | Years in business, license numbers, certifications, awards, associations |
| 7 | SEO Matrix | Full keyword-city matrix pasted from Step 4 |
| 8 | Special Instructions | Anything unique to this client: specific pages requested, content to keep, integrations needed |
Build Prompt Template
See the Build Prompt Template in the Appendix for the full fill-in template. Copy it, fill in every field, and use it as the opening message in your Manus build task.
Opening the Manus Task
Before submitting the brief, read the Multi-Agent Workflow page in the Appendix. It contains the exact opening prompt to paste at the start of every Manus build session, which loads the correct skills and sets the right context before the brief is submitted.
- All eight brief sections completed — no blank fields
- SEO matrix pasted into Section 7
- Build prompt template filled and ready to submit
- Manus task opened with the correct opening prompt
Step 6: Site Build
- Step 5 Completion Gate satisfied
- Build brief submitted to Manus and acknowledged
- All eight brief sections confirmed complete
The site build is executed entirely inside Manus using the static site stack (HTML, CSS, vanilla JS). Manus builds the full site based on the brief. Your role during the build is to review output as it comes in, catch issues early, and provide corrections before the full site is assembled.
Build Stack
All client websites are built as static HTML/CSS/JS sites deployed to Cloudflare Pages. This is the only acceptable stack. Do not use WordPress, Webflow, Squarespace, Wix, or any other CMS. Do not use React, Vue, or any JavaScript framework. The site must be pure static HTML.
| Layer | Technology | Notes |
|---|---|---|
| Markup | HTML5 (semantic) | Use proper heading hierarchy, landmark elements, ARIA labels |
| Styling | CSS3 (no frameworks) | No Bootstrap, no Tailwind — hand-written CSS only |
| Interactivity | Vanilla JavaScript | No jQuery, no React — plain JS only |
| Images | WebP format | All images must be converted to WebP before deployment |
| Fonts | Self-hosted or Google Fonts | No Adobe Fonts — use Google Fonts CDN or self-host |
| Hosting | Cloudflare Pages | All sites deploy to Cloudflare Pages via GitHub repo |
| DNS | Cloudflare DNS | All domains use Cloudflare for DNS management |
| Forms | Formspree | All contact forms use Formspree for submission handling |
Required Pages
Every site must include the following pages at minimum. Additional pages are added based on the SEO matrix from Step 4.
| Page | Required? | Notes |
|---|---|---|
Home (/) | Always | Full homepage with hero, services overview, trust signals, CTA |
About (/about) | Always | Company story, team, years in business, mission |
Contact (/contact) | Always | Contact form, phone, address, map embed, hours |
| Service pages | Per matrix | One page per keyword in the SEO matrix (e.g., /roofing) |
| Location pages | Per matrix | One page per city in the SEO matrix (e.g., /omaha-ne) |
Gallery (/gallery) | If photos available | Required if client has 6+ photos; skip if no photos |
Homepage SOP
The homepage must contain all of the following sections in this order. Manus will build them — this list is your review checklist.
- Navigation bar — Logo, all main nav links, phone number as a CTA button. Must be sticky on scroll.
- Hero section — Headline with primary keyword, subheadline, primary CTA button (phone), secondary CTA (contact form). Background image or strong visual.
- Trust bar — Years in business, license number, service area, key differentiators. Displayed as icon + stat pairs.
- Services overview — Grid of service cards. Each card links to the corresponding service page.
- About teaser — 2–3 sentences about the company, photo of owner or team, link to full About page.
- Gallery teaser — 3–6 photos in a grid. Link to full Gallery page. Skip if no photos available.
- Testimonials — 3–5 testimonials. Star ratings if available. Source attribution (Google, etc.).
- Service area map or list — Either an embedded Google Map or a list of cities served.
- Contact CTA section — Final call to action with phone number and link to contact form.
- Footer — Logo, nav links, phone, address, hours, copyright, license number.
Mobile SOP
Every page must be fully responsive. The following mobile-specific requirements apply to every build. These are not optional — they are checked in Step 7 (Visual QA).
| Requirement | Standard |
|---|---|
| Breakpoints | Mobile: 375px, Tablet: 768px, Desktop: 1200px. Test at all three. |
| Navigation | Hamburger menu on mobile. Menu must open as a full overlay or slide-in drawer. All nav links must be tappable (min 44px touch target). |
| Sticky call bar | A fixed bottom bar on mobile with the phone number as a tap-to-call button. Required on every page. Height: 56px minimum. |
| Font sizes | Body: min 16px on mobile. Headings scale down proportionally. Never below 14px for any readable text. |
| Images | All images use width: 100% and height: auto on mobile. No horizontal overflow. |
| Forms | All form inputs min 44px height. Labels above inputs (not placeholder-only). Submit button full-width on mobile. |
| Tables | Tables must scroll horizontally on mobile or reformat to stacked layout. No horizontal page overflow from tables. |
| Touch targets | All interactive elements (buttons, links, nav items) must have a minimum 44×44px touch target. |
| No horizontal scroll | The page must not scroll horizontally on any mobile viewport. Check with Chrome DevTools. |
Interior Page SOP
All service pages and location pages follow the same interior page structure. Manus builds these automatically from the SEO matrix. Review each one against this structure.
- Page hero — H1 with the exact keyword + city (e.g., "Roofing Contractor in Omaha, NE"). Subheadline. CTA button.
- Intro section — 2–3 paragraphs of unique copy about this service or location. Must not be copied from another page.
- Services list — Bulleted or card list of specific services offered in this context.
- Why choose us — 3–4 differentiators relevant to this service or market.
- Gallery or photo — At least one relevant image. Use a gallery if photos are available.
- Testimonial — At least one testimonial, ideally from a client in this city or for this service.
- Contact CTA — Phone number, contact form link, or embedded form.
- FAQ section — 3–5 FAQs relevant to this service or location. These become FAQ schema in Step 9.
- Internal links — At least 2 links to related service pages or location pages.
Gallery SOP
If the client has 6 or more photos, a gallery page is required. The gallery must meet the following standards.
| Requirement | Standard |
|---|---|
| Image format | All images converted to WebP before upload |
| Grid layout | 2-column on mobile, 3-column on tablet, 4-column on desktop |
| Lightbox | Clicking an image opens a full-screen lightbox with prev/next navigation |
| Alt text | Every image must have descriptive alt text including the business name and service type |
| Lazy loading | All gallery images use loading="lazy" |
| Captions | Optional but recommended if client can provide project descriptions |
- All required pages built and accessible in the Manus preview
- Homepage contains all 10 required sections in correct order
- All service pages and location pages from the SEO matrix are built
- All images are in WebP format
- Sticky mobile call bar present on all pages
- No horizontal scroll on mobile viewports
- Contact form connected to Formspree and tested (submission received)
Step 7: Visual QA
- Step 6 Completion Gate satisfied
- All pages accessible in Manus preview URL
- Chrome DevTools available for responsive testing
Visual QA is a systematic page-by-page review of the site at three viewports: mobile (375px), tablet (768px), and desktop (1200px). Every page is checked. No page is skipped. Issues found here are fixed before moving to Technical QA.
Visual QA Checklist — Every Page
Run this checklist on every page of the site. Check all three viewports for each item.
| Check | Pass Criteria |
|---|---|
| No horizontal scroll | Page does not overflow horizontally at 375px, 768px, or 1200px |
| Navigation renders correctly | Desktop nav shows full links; mobile shows hamburger that opens correctly |
| Sticky call bar visible on mobile | Fixed bottom bar with phone number visible on all mobile pages |
| All images load | No broken image icons; all images display correctly |
| All images are WebP | Right-click → Inspect → check src attribute ends in .webp |
| Text is readable | No text is white-on-white, black-on-black, or otherwise invisible |
| Font sizes appropriate | Body text ≥ 16px on mobile; headings scale proportionally |
| Buttons are tappable | All buttons ≥ 44×44px touch target |
| Links work | All navigation links, CTA buttons, and internal links go to the correct destination |
| Contact form visible | Form is present on Contact page and renders correctly on all viewports |
| Phone number is tap-to-call | Phone numbers are wrapped in <a href="tel:..."> links |
| Address links to Google Maps | Address wrapped in Google Maps link |
| Footer complete | Logo, nav, phone, address, hours, copyright, license number all present |
| No placeholder content | No "Lorem ipsum", "Your Business Name", or "[INSERT]" text anywhere |
| Logo displays correctly | Logo is crisp, correct size, not stretched or pixelated |
Homepage-Specific Checks
| Check | Pass Criteria |
|---|---|
| Hero headline contains primary keyword | H1 includes the main service keyword |
| Trust bar present | Years in business, license, service area displayed |
| All 10 homepage sections present | Cross-reference against the Homepage SOP in Step 6 |
| Counter animations work | Number counters animate when scrolled into view |
| Testimonials display | At least 3 testimonials visible with star ratings |
- All pages reviewed at 375px, 768px, and 1200px
- All Visual QA checklist items pass on all pages
- All issues found during review fixed and re-checked
- No placeholder content remaining anywhere on the site
Step 8: Technical QA
- Step 7 Completion Gate satisfied
- Site accessible at a live preview URL (Manus or Cloudflare Pages preview)
Technical QA checks the underlying code and infrastructure of the site — things that are invisible in a visual review but affect performance, accessibility, and search engine indexing. Run these checks against the live preview URL.
Technical QA Checklist
| Check | Tool | Pass Criteria |
|---|---|---|
| No broken links | Chrome DevTools Console | Zero 404 errors in the console on any page |
| No JavaScript errors | Chrome DevTools Console | Zero JS errors in the console on any page |
| Contact form submits | Manual test | Submit a test entry; confirm receipt in Formspree dashboard |
| robots.txt present | Navigate to /robots.txt | File exists and does not block all crawlers |
| sitemap.xml present | Navigate to /sitemap.xml | File exists and lists all pages |
| Canonical tags present | View source | Every page has a <link rel="canonical"> tag |
| Meta descriptions present | View source | Every page has a unique <meta name="description"> |
| Open Graph tags present | View source | og:title, og:description, og:image on every page |
| Favicon present | Browser tab | Favicon displays in browser tab |
| HTTPS enforced | Browser address bar | Site loads over HTTPS; no mixed content warnings |
| 404 page exists | Navigate to /nonexistent-page | Custom 404 page displays (not a blank page) |
| Images have alt text | View source or DevTools | Every <img> tag has a non-empty alt attribute |
| Heading hierarchy correct | View source | One H1 per page; H2s and H3s used in logical order |
- All Technical QA checklist items pass
- Zero console errors on all pages
- Contact form submission confirmed in Formspree
- robots.txt and sitemap.xml both present and valid
Step 9: SEO Readiness Audit
- Step 8 Completion Gate satisfied
- SEO matrix from Step 4 on hand for reference
The SEO readiness audit verifies that every on-page SEO element is correctly implemented before the site goes live. This is the last opportunity to catch missing schema, incorrect meta titles, or missing keywords before the site is indexed.
On-Page SEO Checklist
| Check | Pass Criteria |
|---|---|
| H1 contains primary keyword | Every page H1 includes the target keyword for that page |
| Meta title format | Format: [Keyword] in [City] | [Business Name] — max 60 characters |
| Meta description format | Includes keyword, city, phone number — 150–160 characters |
| URL slugs match keywords | Service pages: /roofing; Location pages: /roofing-omaha-ne |
| LocalBusiness schema present | JSON-LD schema block on every page with name, address, phone, geo, openingHours |
| FAQ schema present | FAQ JSON-LD on every service and location page (from FAQ sections built in Step 6) |
| Internal linking | Every service page links to at least 2 related location pages; every location page links to at least 2 service pages |
| NAP consistency | Business name, address, and phone number are identical on every page and match the Google Business Profile |
| Image alt text includes keywords | Hero and key images include the primary keyword in alt text |
| Page titles are unique | No two pages have the same meta title |
| Meta descriptions are unique | No two pages have the same meta description |
Schema Validation
After confirming schema is present in the source, validate it using Google's Rich Results Test at search.google.com/test/rich-results. Paste the preview URL and confirm no errors are returned for LocalBusiness and FAQ schema.
- All on-page SEO checklist items pass on all pages
- LocalBusiness schema validates without errors in Rich Results Test
- FAQ schema validates without errors on all service and location pages
- NAP is consistent across all pages and matches Google Business Profile
Step 10: Performance Optimization
- Step 9 Completion Gate satisfied
- Site accessible at a live preview URL
Run PageSpeed Insights on the homepage and at least two interior pages. The target score is 90+ on both mobile and desktop. If the score is below 90, identify the failing items and fix them before proceeding.
PageSpeed Insights
Run the test at pagespeed.web.dev. Test the homepage, one service page, and one location page. Record all four scores (Performance, Accessibility, Best Practices, SEO) for each page.
Score Targets
| Category | Mobile Target | Desktop Target |
|---|---|---|
| Performance | ≥ 85 | ≥ 95 |
| Accessibility | ≥ 95 | ≥ 95 |
| Best Practices | ≥ 90 | ≥ 90 |
| SEO | ≥ 95 | ≥ 95 |
Common Performance Fixes
| Issue | Fix |
|---|---|
| Images not in WebP format | Convert all images to WebP using Manus or cwebp |
| Images not sized correctly | Resize images to the maximum display size before upload; use srcset for responsive images |
| Render-blocking resources | Move non-critical CSS to <link rel="preload">; defer non-critical JS |
| No lazy loading | Add loading="lazy" to all below-the-fold images |
| Large CSS file | Inline critical CSS in <style> in the <head>; load the rest asynchronously |
| Google Fonts blocking | Use display=swap parameter; preconnect to fonts.googleapis.com |
| No font preloading | Add <link rel="preload"> for the primary font file |
- Homepage scores: Performance ≥ 85 mobile / ≥ 95 desktop; all other categories ≥ 90
- At least two interior pages tested and meeting targets
- All PageSpeed scores recorded for the project record
Step 11: AI Friendliness Audit
- Step 10 Completion Gate satisfied
- Site accessible at a live preview URL
AI search engines (ChatGPT, Perplexity, Google AI Overviews) are increasingly the first point of discovery for local services. An AI-friendly site is structured so that AI systems can accurately extract and cite business information. This step ensures the site is optimized for AI discoverability in addition to traditional search.
AI Friendliness Checklist
| Check | Pass Criteria |
|---|---|
llms.txt present | File exists at /llms.txt and contains a plain-text summary of the business, services, and contact info |
| Structured data complete | LocalBusiness schema includes all fields: name, address, phone, geo coordinates, openingHours, priceRange, areaServed |
| Clear entity signals | Business name appears in H1 on the homepage; NAP appears in the footer of every page |
| Service descriptions are specific | Each service page describes the service in plain language without jargon; AI can extract what the business does |
| FAQ content is clear | FAQ questions are phrased as natural language questions; answers are concise and factual |
| No AI-blocking directives | robots.txt does not block GPTBot, PerplexityBot, or other AI crawlers |
| Author/entity attribution | About page clearly identifies the business owner or team |
llms.txt Template
Create a file at /llms.txt with the following structure, filled in for the client:
# [Business Name]
[Business Name] is a licensed [trade] contractor based in [City, State].
We serve [primary service area] and surrounding communities.
## Services
[List all services, one per line]
## Service Area
[List all cities served, one per line]
## Contact
Phone: [phone number]
Address: [full address]
Hours: [business hours]
Website: [domain]
## About
[2-3 sentences about the business: years in business, owner name, mission]
## License & Insurance
[License number, bonding status, insurance status]
- llms.txt present and populated at
/llms.txt - All AI Friendliness checklist items pass
- robots.txt confirmed to not block AI crawlers
Step 12: Content QA
- Step 11 Completion Gate satisfied
- Client brief on hand for reference
Content QA is a final human review of all copy on the site before the client sees it. This step catches factual errors, tone inconsistencies, and AI-generated copy that sounds generic or inaccurate. You are reading every page — not skimming.
Content QA Checklist
| Check | Pass Criteria |
|---|---|
| Business name spelled correctly | Exact match to the signed contract and Google Business Profile |
| Phone number correct | Matches client brief; tap-to-call link uses correct digits |
| Address correct | Full address including ZIP matches client brief |
| Business hours correct | Day-by-day hours match client brief exactly |
| Services list accurate | All services from the brief are present; no services listed that were not in the brief |
| Service area accurate | All cities from the brief and SEO matrix are represented |
| License numbers correct | Numbers match client brief exactly |
| Years in business correct | Matches client brief; math is correct (founded year to current year) |
| Testimonials accurate | Testimonial text matches source; reviewer names correct |
| No factual claims that cannot be verified | Remove any claims like "#1 in the city" or "best in the state" unless client can verify |
| Tone matches slider scores | Copy tone aligns with the design slider scores from Step 1 |
| No generic filler copy | No "We are committed to excellence" type filler — all copy is specific to this business |
- All Content QA checklist items pass
- All factual information verified against client brief
- All corrections made and re-checked
Step 13: Deploy to Preview
- Step 12 Completion Gate satisfied
- GitHub repo for this client exists under the dotcomdesigniowa organization
- Cloudflare Pages project created for this client
Before sending the site to the client for review, deploy it to a Cloudflare Pages preview URL. This gives the client a real browsing experience — not a screenshot or a Manus preview link. The preview URL is what you send in the client review email.
Deployment Steps
- Push the final site files to the client's GitHub repo under
dotcomdesigniowa - Confirm the Cloudflare Pages project is connected to this GitHub repo and auto-deploys on push
- Wait for the Cloudflare Pages build to complete (typically 1–2 minutes)
- Copy the Cloudflare Pages preview URL (format:
https://[project].pages.dev) - Test the preview URL in an incognito window to confirm it loads correctly
- Test on a real mobile device if possible
Cloudflare Pages Setup (First Time)
If this is the first deployment for this client, create the Cloudflare Pages project before pushing. Connect it to the GitHub repo, set the build command to blank (static site — no build step), and set the output directory to / (root).
- Site deployed to Cloudflare Pages preview URL
- Preview URL tested in incognito window — loads correctly
- Preview URL ready to share with client
Step 14: Client Review
- Step 13 Completion Gate satisfied
- Preview URL confirmed working
- Client contact email confirmed
Send the preview URL to the client with clear instructions on how to review it and what to look for. Set a 48-hour response window. If no response is received within 48 hours, follow up once. If no response after 72 hours, proceed to Step 15 with zero revisions.
Client Review Email Template
Subject: Your New Website Is Ready for Review — [Business Name]
Hi [Client Name],
Your new website is ready for your review! Please take a look at the
preview link below and let us know if you have any changes.
Preview Link: [CLOUDFLARE PAGES URL]
How to review:
- Check all pages using the navigation menu
- Review on both your phone and your computer
- Check that all your services, contact info, and hours are correct
- Note any text changes, photo swaps, or additions you'd like
Please send all feedback by [DATE — 48 hours from now]. We'll make
your requested changes and then proceed to launch.
If everything looks great and you're ready to go live, just reply
with "Approved" and we'll schedule the launch.
[Your name]
Dotcom Design
Scope of Revisions
The client is entitled to one round of revisions as part of the build. Revisions include text corrections, photo swaps, and minor layout adjustments. Revisions do not include adding new pages, changing the design direction, or rebuilding sections from scratch. If the client requests out-of-scope changes, note them as a separate project.
- Client review email sent with preview URL
- Client feedback received (or 72-hour window elapsed)
- Revision list compiled and categorized (in-scope vs. out-of-scope)
Step 15: Revisions
- Step 14 Completion Gate satisfied
- Client revision list compiled
Implement all in-scope client revisions. After implementing, re-run Visual QA (Step 7 checklist) on any pages that were changed. Do not skip the re-check — revisions sometimes introduce new issues. Once revisions are complete and re-checked, get client approval before proceeding to launch.
Revision Process
- Work through the revision list item by item in Manus
- After all revisions are made, push to GitHub and confirm the Cloudflare Pages preview updates
- Re-run Visual QA on all changed pages
- Send the updated preview URL to the client with a note that revisions are complete
- Request final approval: "Please reply with 'Approved' to proceed to launch"
- All in-scope revisions implemented
- Visual QA re-run on all changed pages — all checks pass
- Updated preview URL sent to client
- Written client approval received
Step 16: Go Live
- Step 15 Completion Gate satisfied
- Written client approval received
- Domain registrar credentials accessible (from Step 3)
- Cloudflare Pages custom domain not yet configured
Go Live connects the client's domain to the Cloudflare Pages deployment. DNS propagation typically takes 5–30 minutes but can take up to 48 hours in rare cases. Do not schedule a launch for Friday afternoon or before a holiday weekend.
Launch Sequence
- In Cloudflare Pages, add the client's custom domain to the project (Settings → Custom Domains)
- Cloudflare will provide the DNS records needed (typically a CNAME pointing to
pages.dev) - Log into the client's domain registrar (from Step 3 credentials)
- Add the CNAME record provided by Cloudflare Pages
- If the domain uses Cloudflare DNS already, the record is added automatically — just confirm
- Wait 5–30 minutes for DNS propagation
- Test the live domain in an incognito window: confirm the site loads, HTTPS is active, and no redirect loops
- Submit the sitemap to Google Search Console:
https://search.google.com/search-console - Request indexing for the homepage in Google Search Console
Post-DNS Checks
| Check | Pass Criteria |
|---|---|
| Site loads on custom domain | https://clientdomain.com loads the site correctly |
| HTTPS active | Padlock icon in browser; no "Not Secure" warning |
| www redirects to non-www (or vice versa) | Both www and non-www resolve to the same URL without error |
| Old site is no longer showing | The new site is displayed, not the old site |
| Contact form works on live domain | Submit a test form entry; confirm receipt in Formspree |
| Sitemap submitted | Sitemap URL submitted in Google Search Console |
- Site live at client's custom domain with HTTPS
- All post-DNS checks pass
- Sitemap submitted to Google Search Console
- Client notified that the site is live
Step 17: Post-Launch Monitoring
- Step 16 Completion Gate satisfied
- Site confirmed live at custom domain
Within 24 hours of launch, set up uptime monitoring and verify that Google has begun crawling the site. These steps take 30 minutes but provide ongoing protection and early warning of any issues.
Monitoring Setup
| Tool | Setup | Alert Threshold |
|---|---|---|
| UptimeRobot | Add monitor for the homepage URL; set check interval to 5 minutes | Alert on any downtime |
| Google Search Console | Confirm property is verified; check Coverage report for any indexing errors | Alert on coverage errors |
| Cloudflare Analytics | Confirm traffic is being recorded in Cloudflare Pages analytics | Visual check only |
48-Hour Check
Return to the site 48 hours after launch and run the following quick checks:
- Homepage loads correctly — no errors
- Contact form still submits correctly
- Google Search Console shows no new coverage errors
- UptimeRobot shows 100% uptime since launch
- Run a quick Google search for the business name — confirm the new site is indexed or indexing is in progress
- UptimeRobot monitor active and showing green
- Google Search Console verified and showing no coverage errors
- 48-hour check completed with no issues found
Step 18: Google Business Profile Sync
- Step 17 Completion Gate satisfied
- Client's Google Business Profile access confirmed (client must provide)
- New website URL live and confirmed
The Google Business Profile (GBP) must be updated to reflect the new website and any information changes made during the build. NAP consistency between the website and GBP is a critical local SEO signal. This step is not optional.
GBP Update Checklist
| Field | Action |
|---|---|
| Website URL | Update to the new live domain |
| Business name | Verify exact match to website and client brief |
| Phone number | Verify exact match to website |
| Address | Verify exact match to website |
| Business hours | Verify exact match to website |
| Services list | Update to match the services on the new website |
| Business description | Update to reflect the new website's About copy (150–750 characters) |
| Photos | Upload at least 3 new photos from the website gallery if available |
- GBP website URL updated to new live domain
- All GBP fields verified for NAP consistency with the website
- GBP services list updated to match website
Step 19: Quarterback Handoff
- Step 18 Completion Gate satisfied
- Quarterback assigned for this client
The Quarterback Handoff transfers ownership of the client relationship from the build team to the ongoing account management team. The quarterback is responsible for the client's ongoing SEO, reporting, and relationship management. A complete handoff ensures nothing falls through the cracks.
Handoff Package
Prepare and deliver the following to the quarterback before this step is complete:
| Item | Details |
|---|---|
| Client brief | The completed brief from Step 1, updated with any changes made during the build |
| Live site URL | The final live domain |
| GitHub repo URL | The repo under dotcomdesigniowa for future updates |
| Cloudflare Pages project name | For future deployments |
| SEO strategy URL | The live strategy site from Step 4 |
| Keyword-city matrix | The full matrix for reporting reference |
| Domain registrar credentials | From Step 3 — transfer securely |
| Google Search Console access | Confirm quarterback has access |
| UptimeRobot monitor | Transfer ownership or add quarterback as contact |
| Formspree account | Confirm form submissions are going to the right email |
| Notes on client personality | Communication style, preferences, any sensitivities noted during the build |
- Full handoff package delivered to quarterback
- Quarterback confirms receipt and has access to all tools and credentials
- Client added to ongoing reporting and account management workflow
Step 20: Ongoing Maintenance
- Step 19 Completion Gate satisfied
- Quarterback has confirmed receipt of full handoff package
- Client is active on a monthly plan
Ongoing maintenance is the quarterback's responsibility from this point forward. The build team is no longer the primary contact. This page documents the recurring maintenance tasks that must be performed on every active client site.
Monthly Maintenance Tasks
| Task | Frequency | Notes |
|---|---|---|
| Uptime check | Monthly review | Review UptimeRobot report; investigate any downtime events |
| Google Search Console review | Monthly | Check for new coverage errors, manual actions, or performance drops |
| Contact form test | Monthly | Submit a test entry; confirm receipt in Formspree |
| Domain expiration check | Quarterly | Alert client 90 days before expiration |
| SEO performance report | Monthly | Pull keyword rankings and traffic data; send to client |
| GBP review | Monthly | Check for new reviews; flag any Q&A that needs response |
| Content updates | As requested | New photos, updated hours, new services — process through Manus |
| Annual visual QA | Annually | Full visual QA pass to catch any display issues that have developed |
Handling Update Requests
When a client requests a content update (new photos, changed hours, new service), the quarterback opens a new Manus task, provides the specific change request, and pushes the updated files to GitHub. Cloudflare Pages auto-deploys within 2 minutes. The client is notified when the update is live.
- Client is live, monitored, and in active account management
- All 20 steps completed and documented
- Quarterback is the primary point of contact going forward
Tokens & Credentials
Cloudflare
| Item | Location |
|---|---|
| Cloudflare Account | dotcomdesign.com Cloudflare account |
| API Token | Stored in DD Playbook skill (SKILL.md) |
| Account ID | Stored in DD Playbook skill (SKILL.md) |
| Zone ID (dotcomdesignops.com) | Stored in DD Playbook skill (SKILL.md) |
GitHub
| Item | Location |
|---|---|
| Organization | dotcomdesigniowa |
| CLI Auth | Pre-authenticated in Manus via gh CLI |
| Repo naming convention | [client-slug]-website (e.g., markuson-construction-website) |
Formspree
| Item | Notes |
|---|---|
| Account | One Formspree account per client, or use the DD master account with project-specific forms |
| Form endpoint format | https://formspree.io/f/[form-id] |
| Notification email | Set to the client's primary contact email |
Marker.io Webhook — In Flight Bug Tracker
| Item | Value / Notes |
|---|---|
| Webhook Name | In Flight - Playbook Bug Tracker |
| Webhook ID | 69c433808e1933ea9ffdc234 |
| Webhook URL | https://hub.dotcomdesignops.com/api/marker-webhook |
| Webhook Secret | c90cc854acf3f8e9fe210a6f222f5bd4 |
| Event | issueCreated only |
| Issue type filter | Server-side: only Bug type issues are processed; all other types are acknowledged and silently ignored |
| Scope | Applied to new-process sites only. Add each new site individually in Marker.io → Workspace Settings → Webhooks → edit this webhook. Do NOT enable “Apply to all websites.” |
| Currently applied to | Markuson Construction Inc. (pkwksk48w4c448ck8ksoo44k) |
| Secret stored in | In Flight app → Manus Secrets panel → MARKER_WEBHOOK_SECRET |
Starting a Manus Build Task
Every new website build starts with a new Manus task. The opening prompt is critical — it loads the correct skills and sets the right context before the brief is submitted. Use the exact prompt below at the start of every build session.
Opening Prompt
Copy and paste this as the very first message in every new Manus build task. Replace the bracketed fields with the client's information.
You are building a client website for Dotcom Design.
Before doing anything else, read the following skills:
1. /home/ubuntu/skills/dd-playbook/SKILL.md
2. /home/ubuntu/skills/dotcom-design-brand/SKILL.md
3. /home/ubuntu/skills/static-site-launch-optimizer/SKILL.md
After reading all three skills, confirm you have read them and are
ready to receive the client brief.
Client: [CLIENT BUSINESS NAME]
Build type: Static HTML/CSS/JS website
Hosting: Cloudflare Pages
Stack: Pure HTML, CSS, vanilla JS — no frameworks, no CMS
After the Opening Prompt
Wait for Manus to confirm it has read all three skills. Then submit the full client brief (all eight sections from Step 5). Do not submit the brief in the same message as the opening prompt — send them separately so Manus has time to load the skills before processing the brief.
During the Build
Stay engaged during the build. Review each page as Manus builds it. Catch issues early rather than waiting for the full site to be assembled. If Manus produces something that does not match the brief, correct it immediately with a specific instruction rather than waiting until the end.
Useful Mid-Build Commands
| Situation | What to Say |
|---|---|
| Page looks wrong | "The [page name] hero section doesn't match the brief. The headline should be [correct headline]. Please fix and show me the updated version." |
| Missing section | "The homepage is missing the trust bar section. Please add it between the hero and the services grid, using the trust signals from the brief: [list them]." |
| Wrong tone | "The copy on the About page is too generic. Based on the slider scores (Voice: 8/10 Authoritative), please rewrite it to sound more expert and confident." |
| Image issues | "Please convert all images to WebP format and confirm they are all using loading='lazy' except the hero image." |
| Mobile issue | "At 375px the navigation is overflowing. Please fix the mobile nav to use a hamburger menu with a full-screen overlay." |
Build Prompt Template
This is the full client brief template. Fill in every field before submitting to Manus. Do not leave any field blank. Submit this as the second message in the Manus task, after the opening prompt has been acknowledged.
## CLIENT BRIEF
### SECTION 1: BUSINESS IDENTITY
Business Name (exact):
Phone Number:
Address:
City, State, ZIP:
Business Hours:
Monday:
Tuesday:
Wednesday:
Thursday:
Friday:
Saturday:
Sunday:
Years in Business:
License Number(s):
Bonded: Yes / No
Insured: Yes / No
### SECTION 2: SERVICE AREA
Primary City:
All Cities/Counties Served:
HQ City (for schema):
### SECTION 3: SERVICES
Primary Services (most important first):
1.
2.
3.
4.
5.
Secondary Services:
1.
2.
3.
### SECTION 4: DESIGN DIRECTION
Design Sliders (1-10):
Style (Classic → Modern):
Tone (Light → Dark):
Complexity (Simple → Rich):
Voice (Friendly → Authoritative):
Market Position (Economical → Premium):
Aesthetic (Polished → Gritty):
Reference Site URL (a site they like):
Color Preferences (if any):
Font Preferences (if any):
### SECTION 5: CONTENT ASSETS
Logo File Location:
Photos Available: Yes / No
If Yes, count:
If Yes, location:
Testimonials:
1. "[text]" — [Name], [Source]
2. "[text]" — [Name], [Source]
3. "[text]" — [Name], [Source]
Team Members (if applicable):
Name, Title, Bio:
### SECTION 6: TRUST SIGNALS
Years in Business:
License Number(s):
Certifications/Awards:
Industry Associations:
Notable Differentiators:
### SECTION 7: SEO MATRIX
[PASTE FULL KEYWORD-CITY MATRIX FROM SEO PORTAL HERE]
### SECTION 8: SPECIAL INSTRUCTIONS
[Any unique requirements, specific pages requested, content to preserve,
integrations needed, or anything else the build team should know]