Timeline

## Writing Frameworks ### PAA Blog Post Structure (Standard Template) ``` H1: [Main PAA Question — exact match] Introduction (150-200 words) H2: Quick Answer (40-60 words — featured snippet target) H2: [Detailed Answer Section 1] H2: [Detailed Answer Section 2] H2: How [Business Name] Handles [Topic] in [City] H2: Frequently Asked Questions Conclusion (100-150 words) + CTA ``` ### Content Tier System for Local Service Sites - **Tier 1** — Core service + cost guides (highest intent) - **Tier 2** — Service explanation + frequency/options - **Tier 3** — Cost comparisons + pricing breakdowns - **Tier 4** — Specialty services + routine/maintenance - **Tier 5** — Trust + education (E-E-A-T focused) - **Tier 6** — Location/neighborhood specific ### Trio Prompt SaaS-Grade Content System (Validated) Built and documented 2026-01-27. Three-phase quality gate system: - **Quality Gate 0:** Pre-writing approval - **Quality Gate 1:** Blueprint approval (80/100 minimum) - **Quality Gate 2:** Content review (55/70 minimum) - **Quality Gate 3:** Final publication approval (85/100 minimum) Core framework: **AKA (Authority, Knowledge, Answer)** classification — determines schema type, content cluster placement, and internal linking strategy. ### E-E-A-T Framework — Content Implementation Source: Live audit of Flat Fee Cleaners Sarasota blog content (Feb 2026) **Critical finding — Credential Siloing:** Strong authority signals on About pages are almost always absent from blog posts. Pattern observed: ARCSI membership, Chamber of Commerce, press features, certifications exist on About but never referenced in blog content where they would move rankings. **Scoring baseline for local service blogs:** - Experience: 4-5/10 is typical. Main gap = zero specific job stories, no first-person practitioner narrative - Expertise: 6-7/10 is achievable. Gap = missing certifications, no edge case coverage - Authoritativeness: 4/10 is common. Main gap = no individual author byline, no external citations - Trustworthiness: 7/10 is typical when schema is implemented **Tier 1 E-E-A-T fixes (highest ROI):** 1. Fix data inconsistencies site-wide (review counts, insurance amounts) — inconsistencies destroy trust 2. Add individual author attribution with bylines to every blog post 3. Inject About page credentials into blog content (ARCSI, certifications, years of experience) **Tier 2 E-E-A-T fixes:** 4. Embed 2-3 customer testimonials per post with name, neighborhood, specific outcome 5. Write genuine experience narratives — specific job stories, not templated language 6. Before/after photos with geo-tagged alt text **Tier 3 E-E-A-T fixes:** 7. External citations (BLS data, ARCSI surveys, Florida statutes where applicable) 8. Address edge cases and limitations honestly — this is the strongest trust signal available 9. Create a branded methodology name (e.g., "The 50-Point Clean Protocol") ### Article Length Standard Match #1 ranking result in SERP + 10-20%. Never use an arbitrary word count floor. This is a standing standard across all blog production. ---

## Content Strategy ### Local Service Business Content Approach (Validated in Production) - **Tiered blog post architecture works:** Flat Fee Cleaners Sarasota and Buy the Hour Movers Brooklyn both used a 6-tier blog structure — Tier 1 (core service cost guides), Tier 2 (service explanation + frequency), Tier 3 (cost + comparison), Tier 4 (specialty + routine), Tier 5 (trust + education), Tier 6 (location-specific/neighborhood). - **Neighborhood-specific content outperforms generic:** `[Service] + [Neighborhood]` keyword combinations consistently outrank `[Service] + [City]` at lower competition. Separate pages per neighborhood (Siesta Key, Lakewood Ranch, Palmer Ranch, etc.) is standard for Sarasota cleaning market — most competitors use this approach. - **Start with Sarasota core, expand to Siesta Key, then Lakewood Ranch** — this is the documented competitor expansion pattern for the FL coastal cleaning market. - **Blog posts function as sales tools, not just informational content:** Embedded CTAs, pricing tables with ROI calculations (e.g., "$3,640 annual cost vs. 312-416 hours saved"), and objection handling belong inside blog posts, not just on landing pages. ### PAA-Driven Content Clusters - PAAs are the test answers — Google is signaling exactly what to write. Mike Merlino quote: "It's like having the test answers before the exam." - **Cluster, don't fragment:** One post targeting 4-5 clustered PAAs outranks 5 thin posts. Main PAA = H1, supporting PAAs = H2s or FAQ entries. - **Quick Answer block:** Write a 40-60 word direct answer in the first 200 words, then expand. This is the featured snippet target section. Format as its own H2: "Quick Answer." - **PAA scoring matrix:** | Factor | Weight | |--------|--------| | Search volume | 30% | | Competition KD (inverse) | 25% | | Commercial intent | 25% | | Local relevance | 20% | Target score 8+ first. High commercial intent PAAs (buy/hire intent) score highest. ### Competitive Content Research Pattern - Pull pricing, neighborhood coverage, and content format data from all Tier 1-3 competitors before planning content - Market gap for Sarasota cleaning: No comprehensive guides on cleaning frequency benefits, minimal neighborhood history/context content, lack of "maintenance between visits" guides, insufficient team/expertise content - **Content types competitors use most:** Pricing guide pages, service explanation + frequency options, before/after galleries, testimonials, location-specific pages ### AI Search / GEO Content Strategy - Position AI search visibility as a separate offer from SEO — not SEO with AI bolted on - LLM visitors worth 4.4x traditional organic traffic (validated market stat as of Jan 2026) - Gartner: 50% search traffic shift to AI by 2028 - Lead with diagnostic clarity — show the client their actual citation gap before pitching - Core measurement frame: citation share, decision-stage query coverage, topic cluster gap closure, pipeline attribution - Content for AI citability: structured clear definitions, standalone quotable statistics with sources, Q&A formatted sections, updated citations ### Content Syndication (1 Piece to 10 Outputs) Validated production pattern: 1 primary piece generates — blog, GMB post, video script, shorts, podcast, PR, social (X/Twitter, Facebook, Instagram, LinkedIn), infographic, Q&A/schema ---

# Shakespeare Content Insights **Mined from:** Project Chats / Research-Analysis, SEO-Research, YouTube-Transcripts, VidForge **Extracted:** 2026-05-09 **Method:** Chat backup archive analysis — summaries, audit reports, production notes, and session recaps ---

## Press and PR ### PR Strategy Observations (from E-E-A-T audit research) - Local press mentions (Herald-Tribune, Sarasota Magazine, SRQ Magazine) carry significant authority but are typically buried on About pages — not surfaced in blog content where they affect rankings - Action: Create a "Press" or "In the News" section and link to it from blog posts - PR mentions should be referenced in blog author bios as well as dedicated press pages - Seek local podcast appearances — these are rarely leveraged but build local authority signals - "As seen on" press bar on homepage is a standard competitor feature that local businesses often miss ### Press Release Approach Not a significant documented pattern in these chats. The main PR activity is local media outreach and presence, not formal press release syndication for local service clients. ---

## Tool and Skill Reference **SEO/Content skills active in ecosystem:** - `content-ops` — alignment audit, flywheel, humanizer, refresher, strategy - `article-pipeline` — 4-step research → write pipeline with mandatory SERP + social research - `toneprint` — 4-axis voice analysis and rewrite - `copywriting` — conversion copy framework - `email-sequence` — nurture + sales sequence design - `b2b-ai-search-growth-system` — AI search visibility sales + content system - `creative-strategy-storming` — ad concept ideation, hooks, briefs, SCRAWLS **LLM presence/brand tools (active):** - GMB Profile Analyzer, Brand Data Builder, Brand Basic Info Extractor, Cross-App Business Profile, LLMs.txt Generator, Multi-LLM Brand Distribution, LLM-Full.txt Builder **Video tools:** - `creatify-video-pipeline`, `creatify-avatar-video`, `ai-video-ad-script`, `ai-video-production-sop`, `video-brand-overlay`

## Anti-Patterns ### Content Anti-Patterns (Documented Failures or Known Risks) **1. Credential siloing** Authority signals that exist on About pages but never appear in blog content — this was documented as the single biggest structural problem in the Flat Fee Cleaners audit. About page had ARCSI membership, Chamber of Commerce, 15,000 homes cleaned, OSHA certification — zero of it appeared in the blog posts. Composite E-E-A-T score was 5.5/10 because of this. **2. Data inconsistencies across pages** Review count conflicts (200 vs. 500+), insurance amount conflicts ($1M vs. $2M) observed on the same client site. Actively damages Trustworthiness score. This is the single most damaging issue — reconcile all data points site-wide before publishing. **3. No secondary lead capture** Entire site operating on a single conversion model (form fill or call). No email capture, no SMS signup, no chatbot, no content upgrade. Every visitor who doesn't convert on the first visit is permanently lost. Industry standard: at least one secondary capture mechanism. **4. Zero urgency on all pages** Not a single time-sensitive offer, limited availability indicator, or seasonal promotion. "I can do this anytime" kills conversions. Rotate urgency elements: "X slots left this week," "price lock expires [date]." **5. Too many required form fields** 6 required fields on a quote form is a conversion killer. Optimal for local service: 3-4 fields (Name, Phone, Home Size, Service Type). Every field beyond 3 reduces completion rate ~10%. **6. Blog post with no related posts or content upgrade** When a reader finishes, the only option is convert or leave. No content funnel for engaged-but-not-ready visitors. Fix: related posts + lead magnet. **7. Author attribution absent from blog posts** No byline = no E-E-A-T author signals. Google's helpful content standards expect identifiable, qualified authors. Every blog post needs: author name, brief credential line, years experience. **8. Generic examples in copy** "A business owner" versus "a 3-person agency owner in Brooklyn who cut proposal time from 2 hours to 18 minutes." Specificity is the fastest cure for robotic content. **9. AvatarBubbleTemplate without image pre-resize** Using images in Creatify without pre-resizing to 1080x1920 causes blur bars at top and bottom of frame. Images get letterboxed into background behind avatar — not full-screen. Pre-resize is mandatory for production quality. **10. Fabricated or inconsistent statistics** Never invent testimonials, data, client names, or citation-share numbers. Never use Google search snippets for audit data — DataForSEO API is the mandatory primary source for any numbers used in client-facing materials. ---

## 5. Design Preferences (Mike's Stated Preferences) ### Hard Rules — Never Break - **White/light theme only** — Mike only likes white/light theme. Never ship dark mode for client-facing sites. (Dashboard tools can be dark.) - **No scrollbars** — Never ship visible scrollbars on dashboards. Hide with CSS: `overflow-y: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; }` - **No stock photos** — Never use Unsplash, Pexels, Pixabay. Only Gemini AI-generated images, client-provided, or CSS gradient placeholders. - **No emojis in UI** — Unless Mike explicitly requests them. (Exception: emoji in dashboard data columns/labels is OK per Mike's own additions to Nexus-Dash.) - **No Lorem ipsum** — Real copy always. Every page needs real business content. - **No "View Details" external links** — All vehicle/product details must be shown inline, not linked to dealer/vendor sites. ### Quality Bar (From Mike's Feedback) Sites that looked "shitty" shared common traits: flat Tailwind utility classes without gradients/shadows/animations, no font pairing, no visual depth, generic component patterns. Mike compared bad output to a "Fiverr template." Premium design signals Mike explicitly approved: - Gradient overlays on hero sections - Hover `translateY(-4px)` + shadow on cards - Glass morphism on nav (backdrop-filter) - Playfair Display + Inter font pairing - Tiered shadow system (4 tiers) - Gold/amber accents over primary dark green - Decorative CSS elements (dots, rings, lines) - Gradient text spans in headings - Section alternation rhythm ### UI Rejected Patterns - **Generic purple gradient hero** — Classic "AI slop" SaaS aesthetic - **Glassmorphism as primary style** — Frosted glass is an accent, not a design direction - **Neon/cyber aesthetics** — Never - **"Earthy generic"** — Terracotta + sage + cream wellness starter kit - **Raw Tailwind utilities** for layout in large files — builds correctly but visual quality is poor and Turbopack scanning fails - **Year-end seasonal content that goes stale** — Always use relative content or date-flexible copy - **Same generic icon for all service types** — Each niche needs a real image or niche-specific icon - **Missing GMB map embed** — "That is an always" on local business sites ### Voice Input Tolerance Mike dictates via voice — typos are common. Examples from sessions: "PlEaZe Continue with plan", "saev akk wirj rugtgh nw" (= "save all work right now"), "I asid this to you already". Extract intent, never ask about typos. ---

## 6. Template Usage ### Template Decision Pattern Never pick templates for Mike — always show options and let him choose. Present with visual examples when possible. ### Website-Starter Template Located at `D:\Codeland2026\Templates\website-starter\`. Used as base for all local business sites. Features: - `brand.ts` single source of truth - Dynamic routes: `services/[slug]`, `areas-served/[slug]`, `blog/[slug]` - JSON-LD structured data built in - CSS design system with `@theme` block ### Mission Control Template Located at `D:\Codeland2026\Templates\mission-control-MASTER\`. Dark ops dashboard aesthetic. Uses Convex for real-time data. Approvals table + CostEntries table added as extensions. ### Nexus React v3.2.0 (DaisyUI) Used for BirdsEye ROI dashboard. React + Vite. Premium theme with ApexCharts wired in. Sidebar nav pre-built. ### Template Path `D:\ClaudeDev\00_GITHUB\_working-on\Templates\` — working templates in progress. Arsenal showcase: `https://merlino-arsenal.vercel.app` ShadCN UI Kit: `D:\ClaudeDev\00_GITHUB\_working-on\Templates\ui-blocks\shadcnuikit\` — 23 folders, 950 TSX files. ---

## 7. Anti-Patterns ### Design Anti-Patterns - **Agents building pages without a CSS design system first** — Result: generic flat Tailwind utilities, "pretty shitty" output per Mike's exact words. Fix: always build `globals.css` with full design system before spawning page-build agents. - **Mixing lucide-react without installing it** — Agents assume it's installed. Always verify in `package.json` before using. - **Named vs default imports confusion** — Agents frequently wrote `{ SchemaMarkup }` for default-exported components. Fix with grep+sed: `sed -i "s/{ SchemaMarkup }/SchemaMarkup/g"`. - **Animating layout properties** — `top`, `margin`, `height`. Only transforms and opacity. - **initial={{ opacity: 0 }} with whileInView** — Content invisible until scroll, invisible in screenshots. - **@import for Google Fonts in globals.css** — Only acceptable in standalone HTML. In Next.js, always use `next/font/google`. - **Raw `<img>` tags** — Always use `next/image` with `priority` for above-fold images. ### Code Anti-Patterns - **Writing files without reading first** — Write tool fails if file exists and hasn't been read. Always read before write. - **git add -A in shared working tree** — When multiple agents share a git tree, stage only your files. Never `git add -A`. - **ShadCN v5 broken imports** — `@import "tw-animate-css"` and `@import "shadcn/tailwind.css"` injected by `shadcn init` break Turbopack. Remove both. Use `@tailwind` directives only. - **Hardcoding review counts, insurance amounts, star ratings** — Always source from `brand.ts` or About page. Data conflicts across pages are a critical SEO/E-E-A-T issue. - **Dark mode via Playwright emulateMedia** — Does not trigger `next-themes` class-based dark mode. CSS `.dark` selectors are correct; just can't verify via Playwright media emulation. ### Process Anti-Patterns - **Asking for approval mid-task** — Mike's preference: build first, show result, then iterate. Don't interrupt the build to confirm details. - **Declaring done without visual verification** — Always screenshot deployed URL before reporting complete. POWD is mandatory. - **Linter auto-modifies files** — Always re-read files after a "file modified" error before editing again. - **Year-end / seasonal content** — Stale immediately. Remove seasonal dates from templates, use relative copy. ---

## Key Files & Paths for Reference | Resource | Path | |----------|------| | Website starter template | `D:\Codeland2026\Templates\website-starter\` | | Mission Control template | `D:\Codeland2026\Templates\mission-control-MASTER\` | | ShadCN UI Kit blocks | `D:\ClaudeDev\00_GITHUB\_working-on\Templates\ui-blocks\shadcnuikit\` | | React-bits components | `D:/ClaudeDev/01_reference/ui-frameworks/react-bits/src/content/` | | Nexus-Dash project | `D:\ClaudeDev\00_GITHUB\_working-on\Tools\nexus-dash\` | | Arsenal showcase | `https://merlino-arsenal.vercel.app` |

## 3. Animation & Motion ### Primary Animation Stack - **GSAP 3.14+** with `@gsap/react` — Frankie's primary tool. `useGSAP` not `useEffect`. - **Framer Motion** — Used in some Cruip/Aceternity components. Not mixed with GSAP in same component. - **CSS `@keyframes`** — For simple entrance animations and decorative effects. - **AutoAnimate** — For list reorder/add/remove animations. ### Animation Principles (Standing Orders) 1. Transforms and opacity only — never animate layout properties (margin, padding, height, top) 2. Durations under 0.5s for interactions (ADHD-aware) 3. useGSAP not useEffect in React 4. 60fps or don't bother — test on lower-end hardware ### Framer Motion Usage in Nexus-Dash / Dashboard Projects ```tsx // Scroll-triggered reveals — safe pattern (content stays visible) <motion.div initial={{ opacity: 1, y: 20 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.4 }} /> // WRONG — invisible until scroll <motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} /> ``` Never use `initial={{ opacity: 0 }}` with `whileInView` — content is invisible in screenshots and on slow loads. ### Screenshot Rule for Animated Components Never run visual QA loop on animated components (Framer Motion, GSAP, Animate.css, CSS keyframe animations). Tell Mike: "This component uses animation — review in browser, not screenshot." ### CSS-Only Animation Preference For local business sites (no framework overhead): - `@keyframes fadeInUp` for above-fold hero content - `animation-delay` for staggered reveals - CSS `transition` on hover states - No animation library for basic local business sites ---

## 4. Dashboard & Layout Patterns ### Nexus-Dash Architecture (React + Vite + DaisyUI 5 + Tailwind 4) - Stack: React 19, Vite 7, TypeScript, Tailwind 4, DaisyUI 5, React Router 7, ApexCharts, Supabase - Sidebar: 160px width (narrowed from 220px during QA — was too wide) - Nav groups: MAIN / TOOLS / INTEL / CONFIG - Default route: `/` → `/dashboards/calls` - Mobile: 50/50 split cards (MobileCallCard component added by Mike post-build) - Service column: emoji action labels via `serviceNormalizer` helper ### Hawkeye Panel — CRM Kanban Decision Critical design decision: Hawkeye is a **CRM kanban board**, not a chat interface. 5 stages: New > Contacted > Booked > Hired > Closed. Chat is a secondary tab, not the default. Default state shows call intelligence stats, not empty chat. ### Calls Dashboard Components (Nexus-Dash) - `CallFilterBar.tsx` — Niche/date filter - `CallTableRow.tsx` — Call row with sentiment badge, duration, direction arrow, niche color - `CallDetailDrawer.tsx` — Slide-in detail with recording player, transcript, sentiment, tags - `CallStatStrip.tsx` — Stat bar above table (totals, answered, missed, avg duration), filters reflected - Sync button triggers `callActivityService.syncCalls()` — graceful no-op if no credentials ### Mission Control Dashboard (Dark Ops Aesthetic) Stack: Next.js + Convex + TypeScript. Color system: `#0c0c0c` backgrounds, `#1e1e1e` borders, emerald/cyan/amber/slate accents. Monospace font for metrics, sans-serif for labels. Key components: - **AgentCards** — Pulsing color-coded status dot, glow effect for active agents, emoji + name + role - **TaskBoard** — 4-column kanban (INBOX / IN PROGRESS / REVIEW / DONE), priority badges (P0 red, P1 amber, P2 cyan), click opens URL-state modal - **ActivityFeed** — Auto-scrolls to bottom, live pulsing dot indicator, 24-hour HH:MM:SS timestamps - **MetricsBar** — Dashboard footer, `tabular-nums` font, 5 metrics with emojis - **Header** — Scanline CSS effect, 24-hour clock (1000ms updates), "SYS: NOMINAL" status ### Dashboard Section Order (Local Business Sites) 1. Hero with CTA (above fold — phone + form or button) 2. Trust bar (immediately below hero) 3. Problem/solution cards (red/green color-coded) 4. Services grid 5. Process steps with visual connectors (`hidden md:block absolute`) 6. Mid-page CTA 7. Reviews/testimonials 8. Full-width CTA section ### Navigation Patterns - Sticky header with phone number always visible — non-negotiable for local business - Hamburger menu on mobile — full nav on desktop - Logo + phone top-right + sticky = conversion-critical above fold - Dashboard sidebar: 160px width, narrow padding, grouped nav items ---

## 2. Styling Patterns ### Font Loading — Always next/font/google ```tsx import { Playfair_Display, Inter } from 'next/font/google'; const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-display', display: 'swap' }); ``` Apply font variables on `<html>`. Never use `<link>` tags or Google Fonts CDN directly. Exception: Karma Movers site used CDN `@import` in globals.css — this is a known anti-pattern that should be fixed. ### Font Pairings Used - **Local home services**: Playfair Display (display/headings) + Inter (body) — authoritative, editorial - **Moving/cleaning sites**: Poppins (headings) + Montserrat (body) — friendly, professional - **Dashboard apps (Nexus-Dash)**: System fonts via DaisyUI/Tailwind defaults — no custom fonts - **Dark ops dashboards (Mission Control)**: Monospace for metrics/costs, sans-serif for labels ### Hero Section Pattern ```css .hero-section { position: relative; min-height: 85vh; } /* Gradient overlay via pseudo-element */ .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.7)); } ``` Never use `opacity` on the whole hero section — use a pseudo-element overlay so text remains crisp. ### Glass Morphism Pattern Used selectively (nav headers, modals, overlays): ```css .glass { background: rgba(255,255,255,0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.12); } ``` ### Gradient Text Pattern ```css .gradient-text { background: linear-gradient(135deg, #F2A922, #E8441A); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } ``` ### Decorative Elements (CSS-only) Used to add visual depth without images: ```css .deco-dots { /* Dot grid pattern */ } .deco-ring { /* Circular ring border */ } .deco-line { /* Diagonal accent line */ } .section-divider { /* Gradient line between sections */ } ``` ### Hover Animation Pattern (Cards) ```css .card { transition: transform var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } ``` Never animate `margin`, `top`, `left`, `height`, `width`. Only `transform` and `opacity`. ### Section Alternation Pattern Pages alternate between section backgrounds for visual rhythm: 1. White/off-white for primary content 2. `.section-gradient` (white-to-mint) for visual separation 3. `.section-dark` (dark + radial overlays) for CTA sections ### Animated Keyframes Used - `fadeInUp` — entrance animation for below-fold content - `pulse` — pulsing attention indicators (CTAs, live status dots) - `shimmer` — trust bar shimmer - `glowPulse` — floating phone button CTA - `trustShimmer` — trust bar animation - `scaleX` — card-accent left-border animation on hover ### Badge / Tag Patterns (DaisyUI + Nexus-Dash) ```tsx // DaisyUI semantic color badges <div className="badge badge-success">Hired</div> <div className="badge badge-warning badge-soft">Follow Up</div> <div className="badge badge-sm font-bold badge-error badge-soft">Cold</div> ``` Sentiment/confidence badges always follow the 80/50/0 threshold pattern for hot/warm/cold. ### Responsive Grid Pattern Standard local business site: `grid-cols-1 md:grid-cols-2 lg:grid-cols-3` Dashboard stat cards: `grid-cols-2 md:grid-cols-4` Always mobile-first. ---

## 1. Component Patterns ### CSS Design System — Named Class Architecture (Critical) All production builds use named CSS classes in `globals.css`, NOT raw Tailwind utilities in TSX. This is both a Frankie standing order AND a technical requirement for Tailwind 4 + Turbopack (large agent-generated files fail to JIT-scan inline utilities). Pattern in every project: ```css /* globals.css */ .hero-section { ... } .display-heading { font-family: var(--font-display); } .card { border-radius: var(--radius-md); box-shadow: var(--shadow-card); } .btn-gold { background: var(--color-accent); } .glass { backdrop-filter: blur(16px); } ``` ```tsx /* page.tsx — only named classes */ <section className="hero-section"> <h1 className="display-heading">...</h1> <a className="btn btn-gold">CTA</a> </section> ``` Tailwind utility classes that ARE safe inline: display (`hidden`, `flex`, `grid`), responsive breakpoints (`md:flex`, `lg:hidden`), simple states. Avoid spacing/color/typography utilities in agent-written large files. ### CSS Custom Properties — Universal Pattern Every project defines a `:root` block in `globals.css` with all brand tokens. Referencing via `var(--token-name)` keeps changes centralized: ```css :root { --color-primary: #1B4D3E; --color-accent: #F2A922; --color-forest-dark: #0d1f17; --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Inter', system-ui, sans-serif; --radius-md: 1rem; --shadow-card: 0 4px 24px rgba(0,0,0,0.06); --shadow-lg: 0 8px 40px rgba(0,0,0,0.12); --shadow-glow-accent: 0 0 24px rgba(242,169,34,0.35); --transition: 250ms ease; } ``` ### `brand.ts` — Single Source of Truth All local business sites use a `src/lib/brand.ts` file as the canonical data store (name, phone, services, areas, colors, reviews). Every page and component imports from this file — never hardcode business data. ### BeforeAfterSlider Component Custom drag-to-compare component used on service pages. Pattern: ```tsx const beforeAfterMap: Record<string, { slug: string; title: string }> = { 'local-moving': { slug: 'local-move-livingroom', title: '...' }, }; // Conditionally renders between Description and Features sections ``` ### Exec Approval Overlay (Mission Control) Fixed-position overlay anchored bottom-right. Features: - Polls pending approvals via Convex `useQuery` - Keyboard shortcuts: `Y` approve, `A` always, `N` deny (skips when user is in input) - Animated slide-up entrance - Minimizable to pulsing amber badge - Pagination for multiple pending items - Amber for attention state, emerald/cyan/red for action buttons ### CostTracker Component (Mission Control) CSS-only 14-day trend bar chart (no chart library). Pattern: - Today's bar highlighted in full emerald - Hover tooltips showing exact cost - Horizontal gradient bars for model/agent breakdowns - Uses `tabular-nums` font on MetricsBar for alignment ### Score Circle Pattern (Nexus-Dash Leads) Color-coded circular score badge: ```tsx <div className={`w-11 h-11 rounded-full flex items-center justify-center shrink-0 ${sc.bg} ${sc.ring}`}> <span className={`text-sm font-bold ${sc.text}`}>{score}</span> </div> ``` Score ranges: >=80 = success (green), >=50 = warning (amber), <50 = error (red). ### Niche Emoji Map Pattern (Nexus-Dash) Lookup object mapping business category strings to emoji icons for visual richness in call/lead tables: ```tsx const NICHE_EMOJI: Record<string, string> = { "HVAC & AC": "❄️", "Electrical": "⚡", "Plumbing": "🔧", "Roofing": "🏠", "Water Damage": "💧", "Fire Damage": "🔥", ... }; ``` ### Revenue Dual-Display Pattern (Nexus-Dash) Both revenue values always shown together, color-coded: - My Pay (`revenue_actual`) = green - Client Value (`revenue_estimated`) = neutral/default Never confuse or swap the two. Both display everywhere. ---

--- title: Frankie Frontend Insights source: Chat backup archives — Web-Dev, Templates-Master, Nexus-Dash extracted: 2026-05-09 agent: Frankie (Front-End Lead) --- # Frankie Frontend Insights — Extracted from Chat Archives Extracted from: Web-Dev/, Templates-Master/, Nexus-Dash/ project chats. Covers builds from Nov 2025 through Mar 2026. ---