Build Log

ForgeKit Guides: Interactive Layer

June 29, 2026

Turned the guide shelf from readable articles into working pocket machines — copy buttons on every template card, a deterministic message customizer on the estimate follow-up guide, and a mobile polish pass before deploy.

ForgeKit WebsiteGuidesInteractiveUX

new client components

interactive tool (estimate follow-up customizer)

tone/day message variants, all deterministic

new dependencies, API calls, or backend changes

Timeline

Start

Brief received + architecture confirmed

Copy buttons first, customizer on estimate follow-up templates only, page stays server-rendered

Phase 1

CopyButton + TemplateCard

Client components isolated, all template guides get copy buttons automatically

Phase 2

TemplateCustomizer + interactive field

Deterministic message builder on /guides/estimate-follow-up-text-templates, interactive?: field added to Guide type

Polish

Pre-deploy hardening pass

metadataBase fixed, mobile layout stacked, business name in all tone variants, aria-label fixed

Done

Deployed to forgekits.build

TypeScript clean, build clean, metadataBase warning gone, 40/40 pages SSG

What shipped

components/CopyButton.tsx — 'use client', clipboard API with execCommand fallback, idle/copied/error states, 2s reset, accessible aria-label

components/TemplateCard.tsx — 'use client', wraps template text + CopyButton, flex-col sm:flex-row for mobile

components/TemplateCustomizer.tsx — 'use client', 4 fields (customer name, business name, job description, day, tone), 6 deterministic variants, live preview, copy button, no API

lib/guides/types.ts — interactive?: 'estimate-follow-up-customizer' field added to Guide type

lib/guides/forge.ts — estimate-follow-up-text-templates guide now has interactive: 'estimate-follow-up-customizer'

app/guides/[slug]/page.tsx — TemplateCard replaces static mono divs, TemplateCustomizer renders via interactive field guard, page stays server component

app/layout.tsx — metadataBase: new URL('https://forgekits.build') added, OG social image URLs now resolve correctly