The Vertical Spotlight Playbook

⬇ Download the full playbook (PDF)

The Vertical Spotlight Playbook

How to spin up an industry-specific “Spotlight” site — for humans and AI agents.

One platform, many niche-skinned sites. Think of the People Media / Spark dating network — BlackPeopleMeet, JDate, OurTime — all the same engine, each with its own audience, its own domain, its own examples. We do the same for local-service and athlete verticals: Dunker Spotlight, HVAC Spotlight, Roofer Spotlight… each a reskin of one master, populated with that industry’s real people.

This document defines the components, the design rules, the tech, and a copy-paste checklist to launch the next one.

1. The model

Every vertical lives on its own domain (<niche>spotlight.com) as a fleet WordPress install, but is built from shared, config-driven generators. Changing industry = swapping a config block, not writing a new site. The brand promise is constant: we make the people in this industry findable, credible, and citable to Google, the AI engines, and their customers.

Vertical Domain Status
Dunking dunkerspotlight.com ✅ live (full trio)
HVAC hvacspotlight.com ✅ live (full trio)
Roofing roofspotlight.com ✅ live (full trio)
Landscaping landscaperspotlight.com ⏳ preview built; domain parked (needs WP install)
Personal brand (master) dennisyu.com/personal-brand-audit/ ✅ live (the original)

2. The trio — every vertical site has three tools

Each is a reskin of a master. Same shell, industry data + color.

a) Personal-Brand Audit — /personal-brand-audit/

The flagship. A floating “scorecard wall” of real people from the industry, each a face + a 0–100 score + a tier, color-coded, clickable to their full audit. It answers “what’s your brand score?” and sells the builder.
– Master: dennisyu.com/personal-brand-audit/
– Generator: _build_industry_audit.js
– Data: ~12–18 real people from the niche, with verified face photos and honest, KP-gated scores (see §5).

b) Website Builder — /spotlight/

The offer: “your personal brand website, built for you, ~$1/day.” Explains the three deliverables (Founder Authority Hub, Knowledge Panel Assistance, Content Repurposing), the 4-step process, and pricing.
– Master: the Spotlight platform (localservicespotlight.com/spotlight-core/ + /ai-builder-program/; dunkerspotlight.com/spotlight/).
– Generator: _build_industry_pages.js (builder half).

c) Business Scorecard — /scorecard/

“How does your business stack up?” Grades the company on four 25-pt categories (Maps Visibility, Website Quality, SEO Authority, Social & Content) → letter grade A–F by national percentile.
– Master: localservicespotlight.com/hvac-scorecard/ (search-your-company tool, embedded app at hvac-scorecard.vercel.app).
– Generator: _build_industry_pages.js (scorer half). HVAC embeds the live Vercel app; verticals without an app link the LSS industry quick-audit instead.

The three cross-link: the audit’s two CTAs point to /spotlight/ (builder) and /scorecard/ (scorer). WordPress auto-adds all three to the site nav.

3. Shared design system

  • Dark, premium, flat-glass cards on a near-black radial background. One accent color per vertical (dunk = orange #ff7a1a, HVAC = blue #2f7fe0, roofing = terracotta #e2552e, landscaping = green #1f9d55).
  • No rainbow. Solid headline with a single accent phrase. Scores use a stoplight scale, never a full spectrum (Dennis: a multi-hue gradient reads as a pride flag — avoid).
  • Tiers (named, color-coded). Dunking uses the Dunk Camp tiers (Headliner / Riser / Prospect / Hidden Hops). Trades use Category Leader 60+ / Established 45–59 / Climbing <45.
  • Real faces only — no initials. Every card is a verified photo. If no clean solo photo exists, drop the person rather than show initials or a group shot.
  • Photos via the weserv CDN proxy — https://images.weserv.nl/?url=<enc>&w=220&h=220&fit=cover&a=attention&output=webp — fast, face-cropped, and immune to slow/blocked origins. (weserv can’t fetch upload.wikimedia.org or i0.wp.com double-proxies — use the original file or a different host.)
  • Full-bleed so the dark section spans the viewport inside a constrained theme: width:100vw;margin-left:calc(50% - 50vw) (NOT left:50%;margin-left:-50vw, which shifts right and leaves white) + html,body{overflow-x:hidden}.

4. The tech & publish process (block-theme fleet sites)

Fleet vertical sites run WordPress + Twenty Twenty-Five (block theme). Gotchas, all handled by the generators:

  1. Wrap raw HTML in a wp:html block — <!-- wp:html -->…<!-- /wp:html --> — or KSES strips <style>/<script>.
  2. Fresh installs use PLAIN permalinks → the pretty REST route returns HTML. Use /?rest_route=/wp/v2/pages for create/update. Then enable pretty permalinks (Settings → Permalinks → Post name) so /personal-brand-audit/ resolves. (In code: click the /%postname%/ radio + the #submit button — form.submit() is shadowed by a field named “submit”.)
  3. The block theme auto-renders the page title (h1.wp-block-post-title) above the hero → hide it with a global <style>.wp-block-post-title{display:none!important} (baked into the generator’s THEME_FIX).
  4. Lazy-load (WP Rocket / native) blanks images → cards carry data-no-lazy="1" + an unlazy() script that restores src from data-src.
  5. Getting big HTML into the browser: the file-upload bridge — create a hidden <input type=file>, file_upload the *-inner.html file(s), FileReader.text() in-page. (Upload multiple at once; map by filename.)
  6. Auth: publish from Dennis’s logged-in Chrome session via wpApiSettings.nonce (the agent can’t enter the WP password).
  7. Verify on the clean URL, not ?cachebuster= (forces slow uncached renders); the sandbox web_fetch reads from a different IP but caches stale — confirm fresh state in the browser.

5. Scoring rubric (keep it honest)

Score the person’s brand, 0–100, on weighted signals:

Signal Weight Question
Knowledge Panel 25% Does Google show a panel for their name (not just the company)?
Own your name 20% Do they rank for their own name, or do namesakes/directories win?
AI-engine visibility 20% Do ChatGPT / Gemini / Perplexity know and cite them?
Content & proof 20% A real body of work + reviews/press tied to the person.
Entity & schema 15% A canonical home with structured data resolving to one person.

KP-gate the highs. 80+ requires a claimed Knowledge Panel. Almost no local-trade owner has one — so trade scores honestly top out in the low-to-mid 60s, and “0 own a Knowledge Panel” becomes the hero stat (“the category is wide open”). Most local owners land 30–50. Don’t inflate — Dennis rejects “suspect” scores.

6. Spin up a new vertical — checklist

Example: launching Plumber Spotlight at plumberspotlight.com.

  1. Domain + hosting (human/infra step). Buy plumberspotlight.com, point DNS to the fleet host, install WordPress with the Twenty Twenty-Five theme. (This is the one step the agent can’t do — it needs registrar/DNS/hosting access.)
  2. Gather examples. ~14 real plumbing owners/influencers with verified face photos and honest KP-gated scores. Dispatch a research subagent (prompt template lives in this session’s history) — prioritize people with findable photos; drop those without.
  3. Add the config. Append a plumbing block to CONFIGS in _build_industry_audit.js (accent, eyebrow, h1, CTAs → on-site /spotlight/ + /scorecard/, tiers, examples) and in _build_industry_pages.js (builder copy + scorer config — embed an app if one exists, else link the LSS quick-audit).
  4. Generate. node _build_industry_audit.js plumbing and node _build_industry_pages.js plumbing → produces plumbing-audit-inner.html, plumbing-builder-inner.html, plumbing-scorer-inner.html.
  5. Publish (from Dennis’s logged-in Chrome). Create input bridge → upload the three *-inner.html → for each, wrap in wp:html and POST to /?rest_route=/wp/v2/pages with slugs personal-brand-audit, spotlight, scorecard.
  6. Enable pretty permalinks (Post name) on the fresh site.
  7. Verify: each page loads, faces all render (no fallbacks), section is full-bleed, the theme title is hidden, and the three pages appear in the nav.

That’s it — a new live vertical in roughly the time it takes to gather 14 good photos.

7. Source files (in this project)

  • _build_industry_audit.js — the faces-wall audit generator (CONFIGS: dunk, roofing, landscaping, hvac).
  • _build_industry_pages.js — the builder + scorer generator (CONFIGS: hvac, roofing).
  • _build_brand_audit_wall.js — the original master (dennisyu.com) generator.
  • <key>-audit.html / <key>-builder.html / <key>-scorer.html — standalone previews.
  • <key>-*-inner.html — the WP-ready (wp:html-wrappable) versions.

Maintained alongside the live sites. When you add a vertical, update the table in §1.

⬇ Download the full playbook (PDF)

Scroll to Top