hermes-config/skills/.archive/small-business-website/SKILL.md

---
name: small-business-website
description: Build complete multi-page static business websites from a design blueprint — mobile-first CSS, contact forms, local SEO, photo galleries, emergency landing pages. For local service businesses (HVAC, handyman, contractors, etc.).
---

# Small Business Website Builder

Build a complete, production-ready static website for a local service business from a design blueprint. All pages are pure HTML/CSS/JS — no frameworks, no build step, no backend.

## Triggers

- "build a website for [business]"
- "I need a site for [client/service]"
- "design and build a website"
- User provides a blueprint or design spec for a local business site

## Prerequisites

1. A design blueprint or clear spec for pages, sections, layout, and SEO
2. Business details: name, phone, email, service areas, USPs
3. Target directory (e.g., `/mnt/seagate8tb/Websites/BusinessName`)

## Workflow

### Step 1: Blueprint First
If no blueprint exists, create one first. See `references/blueprint-template.md` for the format. The blueprint is the source of truth for all implementation decisions — every section, CTA, SEO placement, and color choice should be decided here before any code is written.

### Step 2: Directory Structure
```
BusinessName/
├── BLUEPRINT.md
├── index.html
├── css/style.css
├── js/main.js
├── contact/index.html
├── service-pages/...
├── images/
```

### Step 3: Build in Priority Order
Build phases that each produce a working, deployable increment:

1. **Global shell** — `css/style.css` + `js/main.js` + one page with header/footer/mobile nav/callbar
2. **Highest-conversion page** — usually emergency or contact, the page that makes money
3. **Contact form** — form with client validation, loading/success/error states
4. **Homepage** — all sections, the main routing page
5. **Service pages** — one per service line, built to their specific psychology
6. **Polish** — schema markup, meta tags, image optimization

### Step 4: Global CSS Architecture
All styles go in `css/style.css`. Structure:
```
1. CSS custom properties (colors, typography, spacing, layout vars)
2. Reset
3. Utility classes
4. Buttons (btn, btn-primary, btn-emergency, btn-outline, btn-large, btn-full)
5. Phone link (.phone-link)
6. Header (.site-header, .logo, .main-nav, .header-right, .hamburger)
7. Mobile nav drawer (.mobile-nav)
8. Tap-to-call bar (.callbar — mobile only, hidden on desktop)
9. Page sections (.page-section, .section-heading, .section-subheading)
10. Footer (.site-footer, .footer-grid, .footer-service-areas)
11. Page-specific section styles
12. Responsive: Tablet (768px) — grid layouts, header changes, hide mobile elements
13. Responsive: Desktop (1024px) — larger type, wider grids
```

Key patterns:
- **Mobile-first**: single-column by default, grids activate at 768px+
- **CSS custom properties** for all colors and spacing — enables easy rebranding
- **System font stack** — no Google Fonts, no FOUT, fastest load
- **Touch targets**: 44px minimum, full-width buttons on mobile
- **Phone numbers**: always wrapped in `<a href="tel:...">` — never plain text

### Step 5: JavaScript (minimal)
`js/main.js` handles:
- Hamburger menu toggle (open/close drawer, animate icon, body scroll lock)
- Header shrink on scroll
- Active nav link highlighting based on current URL path
- Smooth scroll for anchor links

Keep JS minimal. No frameworks. Gallery filters and form handling are page-specific inline scripts.

### Step 6: Contact Form Pattern
Use Web3Forms (free tier, no backend). See `references/contact-form.md` for the full pattern.

Core requirements:
- 5-6 fields max: Name*, Phone*, Email (opt), Service (dropdown)*, Description*, Lead Source (opt)
- Client-side validation with red border + error text on required fields
- Loading state: button disables, shows spinner, text hides
- Success state: form replaced by thank-you card with customer's first name + emergency phone fallback
- Error state: red banner, button re-enables for retry
- Web3Forms POST: `fetch('https://api.web3forms.com/submit', {method:'POST', body: new FormData(form)})`

### Step 7: Local SEO Checklist
- **H1**: primary keyword + city on every page
- **H2**: service areas in at least one H2 per page
- **Footer**: NAP (Name, Address, Phone) + all service areas on every page
- **Image alt text**: "Service description in City TN" format
- **Schema.org**: `LocalBusiness` JSON-LD with `areaServed` array on every page
- **Meta descriptions**: unique 155-char description per page, include city
- **Page titles**: "Service City TN | Business Name" format

### Step 8: Emergency Landing Page (if applicable)
For service businesses with 24/7 emergency offerings, create a standalone stripped-down page:
- Zero external resources — all CSS inline, no JS files, no images, no fonts
- ~7KB total page weight, sub-1s cold load
- ONE goal: phone call. Phone number is the only prominent interactive element
- Red/urgent accent, pulsing emergency badge
- No navigation links (people click them and bounce)
- "No after-hours fees" prominently addressed

### Step 9: Before/After Gallery (if applicable)
For service businesses where visual proof drives conversions:
- 2×2 or 4-col grid of before/after pairs side-by-side
- Filter bar by service category (All, Fences, Lawns, etc.)
- Filter JS: `data-category` attributes, toggles `display:none`
- Place gallery filter script BEFORE main.js in the HTML to ensure it runs independently
- "Before"/"After" labels on each image
- Lightbox on click (optional — add later)

### Step 10: Pricing Table (if applicable)
- Responsive table: collapses to label-value rows on mobile using `data-label` attributes
- Use "Flat Rate" or "Starting at $XX" language — don't lock in exact numbers
- Disclaimer: "Final price confirmed before any work begins"
- Wrap in a card with border and shadow for visual weight

## Pitfalls

- **`file://` CORS**: Form submissions and fetch() calls fail from `file://` origins. This is expected. Test forms from a real web server or use browser dev tools locally.
- **`/js/main.js` path**: Works on a real web server (absolute path). On `file://`, resolves to filesystem root. Gallery filter scripts should load BEFORE main.js to run independently.
- **Don't over-build**: No calendar scheduler, no payment forms, no user accounts. Keep it static.
- **Phone numbers everywhere**: Every page needs at least one tappable phone link. The emergency page needs three.
- **Blueprint lock-in**: Once the blueprint is written, treat it as spec. Don't redesign mid-build unless the user explicitly asks.

## After Build

1. Search all files for `XXX-XXXX` and replace with real phone number
2. Replace placeholder email
3. Get Web3Forms access key, update contact page
4. Replace emoji/placeholder images with real photos
5. Fill in actual pricing
6. Serve via nginx