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

name, description

name	description
small-business-website	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