sync: auto-sync from GURU-5070 at 2026-06-14 20:04:14

Author: Mike Swanson
Machine: GURU-5070
Timestamp: 2026-06-14 20:04:14

projects/acg-website-showcase/session-logs/2026-06/2026-06-14-mike-acg-website-multi-skin-build.md

@@ -0,0 +1,175 @@
+## User
+- **User:** Mike Swanson (mike)
+- **Machine:** GURU-5070
+- **Role:** admin
+
+## Session Summary
+
+Built a new local showcase website for Arizona Computer Guru (ACG) from scratch as a
+"what we can do" test piece, driven by a multi-AI design pipeline (Grok for imagery and
+design origination, Gemini for design-weight decisions and review, the Grok+Gemini
+"quorum" for code/design review, the `impeccable` skill for craft + critique). All work
+lives in `projects/acg-website-showcase/`. Nothing was deployed; everything is served
+locally via `py -m http.server`.
+
+Phase 1 produced a single-page flagship in the "Sonoran Ledger" art direction (warm cream
+paper, bookkeeper's-ledger rhythm, mono numerals, burnt-amber accent). The direction was
+chosen by a Grok+Gemini panel (both ranked it #1 over "Desert Threshold" and "The
+Workbench") and confirmed by Mike. Grok generated four photographic assets (hero desk +
+ledger, stucco windowsill, trust still-life, paper texture). The site (self-contained
+HTML/CSS/vanilla-JS) shipped a light+dark theme, an interactive IT-cost calculator
+(defaults compute to $952/mo = 22 endpoints x $26 + $380 Standard support), services,
+published GPS pricing, FAQ, and contact. Grok+Gemini reviewed it; all real defects were
+fixed (mobile nav hamburger, calculator clamp/handoff, AA contrast on small text, table
+overflow, 44px touch targets, FAQ ARIA, theme FOUC). Gemini's vision model gave a final
+polish pass. This single-page version was then PARKED at Mike's request (kept as a reusable
+pattern for other Guru-related sites).
+
+Phase 2 built the multipage version (Home, Services, Pricing, Calculator, About, Contact)
+using `impeccable` craft (brand register, authored PRODUCT.md + DESIGN.md, enforced house
+laws the single-page broke: no em dashes, no side-stripe accent borders, semantic
+headings, imagery on every page). Three more Grok images were generated (patch panel,
+handshake, Tucson storefront). The Grok+Gemini quorum code-reviewed all 8 files; fixes
+applied (real semantic h1/h2/h3, AA contrast both themes, no-JS `.reveal` fallback, mobile
+nav overflow, cross-page calculator->contact estimate handoff via sessionStorage incl.
+middle-click via pointerdown, narrow-phone calc stacking, footer unification). Mike
+declared multipage the winner for ACG, single-page kept for other sites.
+
+Phase 3 explored alternate themes because Mike disliked the warm "paper" aesthetic. The
+token-based design system was extended into a live skin switcher. "Midnight Concierge"
+(cool dark-premium slate) was added as skin #2. Mike still felt it was "the paper
+aesthetic" (the shared calm/editorial STRUCTURE, not just color). Grok was then asked to
+originate a fresh design: it produced "Verdigris Gate" (oxidized-copper green on plaster,
+Fraunces serif + Source Sans 3 + IBM Plex Mono, enamel double-rule frames, gate-rail
+header), built as skin #3 with its own cool documentary photography and per-skin image
+swap. Run through impeccable + the quorum; fixes applied (font weights 600/700, ink-3 AA on
+surface-2, white-on-teal button, image de-dup, stale label).
+
+Phase 4: Mike said "be radical." Built a standalone poster-brutalist concept ("Blowout",
+`radical.html` + `radical.css`): Anton 13rem type, signal-orange drench, scrolling marquee,
+blowout pricing numerals, full-bleed orange CTA. Ran it through the quorum + impeccable;
+consensus was it overshoots trust for a B2B MSP. Mike said "dial it back a little, stick
+with multipage." The dial-back was implemented as a fourth skin "Bold" on the existing
+multipage (reuses all accessible markup/calculator/nav): Anton uppercase headlines capped
+at ~5.5rem, orange restricted to accents + buttons + one highlight, no marquee (uses the
+multipage's real trust strip), moderate pricing numerals, grayscale documentary photos,
+thick 2px brutalist borders, light+dark. The standalone full-radical page is retained for
+comparison.
+
+End state: the multipage site has a 4-skin switcher (Paper / Midnight / Verdigris / Bold),
+each in light+dark, served at http://localhost:4328/. The single-page Sonoran Ledger lives
+at the project root (port 4327). All skins are scoped by `html[data-skin=...]`; none break
+the others.
+
+## Key Decisions
+
+- **Self-contained static (HTML/CSS/vanilla-JS), no framework.** Chosen for trivial local
+  serving and zero deploy friction for a showcase. Calculator + theme + skins all vanilla.
+- **Token-based design system from the start.** Made the later skin system (4 themes x
+  light/dark) a CSS-variable swap rather than a rebuild. Skins scoped to `html[data-skin]`
+  so they never collide (verified by the quorum).
+- **Skin switcher over separate builds.** When Mike wanted alternate looks, added a header
+  swatch button cycling skins (persisted in localStorage, set before first paint to avoid
+  FOUC) instead of forking the site per theme.
+- **"Dial back" implemented as a skin on the multipage, not a 6-page rebuild.** "Stick with
+  multipage" + "dial back" = make the tempered radical a 4th skin; the calm structure
+  inherently tempers the poster radicalism and reuses all accessible markup.
+- **No fabricated testimonials.** The prior azcomputerguru.com prototype was flagged for
+  placeholder named testimonials; this build deliberately omits them and builds proof from
+  verifiable facts. Contact form is a demo (not wired to a mailbox); disclaimers say so.
+- **impeccable house laws enforced on the multipage** (no em dashes, no side-stripe accent
+  borders, semantic headings) to make it a genuinely distinct variant from the single-page.
+- **Pricing/content sourced from `projects/msp-pricing` + the MSP Buyers Guide**, not
+  invented (GPS $19/$26/$39, support plans, block time, hosting/365/VoIP, brand voice).
+
+## Problems Encountered
+
+- **Grok image text rendering:** the first Verdigris "about" image rendered a legible
+  invented business name ("ACE Refrigeration") on an enamel sign, unusable on an ACG page.
+  Regenerated as a text-free vintage service counter (parts drawers + brass bell + logbook).
+- **Headless screenshot hangs:** an early multi-shot Edge batch stalled (~profile lock);
+  resolved by `taskkill //F //IM msedge.exe` between shots and a per-shot `timeout 50`.
+  Edge `--screenshot` needs an ABSOLUTE Windows path (via `cygpath -w`) or it silently fails.
+- **Dark-theme screenshots:** headless has no stored localStorage; forced dark via
+  `--blink-settings=preferredColorScheme=0`, and forced a skin via a tiny `_seed.html` that
+  sets `localStorage` then `location.replace`s to the target page.
+- **Gemini vision (`image-analyze`) defaulted to OCR** on the rendered pages twice instead
+  of giving a design verdict; relied on own design-director read + the two code reviewers.
+- **impeccable deterministic detector unavailable** on this machine (`detect.mjs` bundle not
+  present); used the Grok+Gemini quorum as the two independent assessments instead.
+- **perl em-dash strip needed `-CSD`** (UTF-8) flags; first pass missed the multi-byte char.
+- **Quorum-found defects (all fixed):** faux-bold from loading Fraunces/IBM Plex Mono at
+  400;500 but using 600/700; `--ink-3` failing AA on the surface-2 header band; light
+  primary-button contrast (~4.4:1) fixed with white on-accent; `.reveal` hiding content if
+  JS fails (gated on a `.js` class).
+
+## Configuration Changes
+
+New project tree `projects/acg-website-showcase/`:
+
+Single-page (parked, port 4327):
+- `index.html`, `css/styles.css`, `js/app.js`
+- `assets/images/{hero,story,trust,paper}.png` (Grok-generated)
+- `DESIGN.md`, `README.md`, `serve.ps1`
+- `design/` — pipeline artifacts (Grok/Gemini prompts+responses, reviews, screenshots)
+
+Multipage (winner, port 4328) `multipage/`:
+- `index.html`, `services.html`, `pricing.html`, `calculator.html`, `about.html`, `contact.html`
+- `css/styles.css` (Sonoran Ledger system + Midnight + Verdigris + Bold skins),
+  `css/radical.css` (standalone Blowout concept)
+- `js/app.js` (theme, 4-skin switcher + per-skin image swap, calculator, FAQ, mobile nav, reveal)
+- `radical.html` (standalone full-radical poster concept)
+- `assets/images/` (Sonoran/warm set) + `assets/images/verdigris/` (cool documentary set)
+- `PRODUCT.md`, `DESIGN.md`, `serve.ps1`, `design/` (prompts, quorum reviews, screenshots)
+
+No changes outside the project dir. (Pre-existing unrelated working-tree edits to
+`.claude/memory/MEMORY.md`, `errorlog.md`, `wiki/clients/peaceful-spirit.md`,
+`.claude/skills/remediation-tool/scripts/get-token.sh` were present at session start and
+left untouched.)
+
+## Credentials & Secrets
+
+None created, discovered, or used. The contact forms are non-functional demos. No vault
+operations.
+
+## Infrastructure & Servers
+
+- Local static preview only: `py -m http.server 4327` (single-page root),
+  `py -m http.server 4328` (multipage). Launch helpers: `serve.ps1` in each dir.
+- Grok CLI (`grok` skill, GURU-5070) used for image generation + design origination.
+- Gemini CLI (`agy` skill, GURU-5070) used for design-weight + reviews.
+- No production hosting touched. The real ACG site (Astro) remains at
+  `clients/azcomputerguru.com/` and on IX Web Hosting — NOT modified.
+
+## Commands & Outputs
+
+- Image gen: `bash .claude/skills/grok/scripts/ask-grok.sh image "<prompt>" <out.png>`
+- Text/design: `bash .claude/skills/grok/scripts/ask-grok.sh text --prompt-file <f>`
+- Gemini review: `bash .claude/skills/agy/scripts/ask-gemini.sh review-files -i "<instr>" <files...>`
+- Headless screenshot (works): Edge `--headless=new --screenshot="$(cygpath -w OUT)"
+  --window-size=W,H --virtual-time-budget=6000`; dark via `--blink-settings=preferredColorScheme=0`.
+- Calculator math verified: default 22 endpoints x $26 (GPS-Pro) + $380 (Standard) = **$952/mo**.
+- `node --check js/app.js` clean after every JS change. All 6 multipage pages return HTTP 200.
+
+## Pending / Incomplete Tasks
+
+- **Decision pending:** Mike to react to the "Bold" skin (right amount of dial-back, or
+  nudge orange/type). Open option to run the quorum + impeccable on the Bold skin itself
+  (prior reviews were on the un-tamed radical).
+- Lock a final direction, then this becomes the candidate for the real azcomputerguru.com
+  redesign (would need: real testimonials/proof, a working contact backend, light variant
+  polish, and migration off the demo disclaimers).
+- Not started: deploy/build pipeline (intentionally local-only for now).
+- Single-page Sonoran Ledger retained as a reusable pattern for other Guru-related sites.
+
+## Reference Information
+
+- Project root: `D:/ClaudeTools/projects/acg-website-showcase/`
+- Single-page: `index.html` (Sonoran Ledger, parked) — serve on :4327
+- Multipage: `multipage/` (4-skin: Paper/Midnight/Verdigris/Bold) — serve on :4328
+- Full-radical concept: `multipage/radical.html`
+- Design pipeline artifacts + quorum reviews: `*/design/*.md`
+- Pricing source: `projects/msp-pricing/` + `projects/msp-tools/quote-wizard/frontend/src/lib/pricing-data.ts`
+- Brand voice source: `projects/msp-pricing/marketing/MSP-Buyers-Guide-Content.md`
+- Prior/real ACG site article: `wiki/clients/azcomputerguru.com.md` (Astro, separate)
+- ACG contact (from materials): 520.304.8300, info@azcomputerguru.com, 7437 E. 22nd St, Tucson AZ 85710