Build Log · June 29, 2026

ForgeKit Guides: Interactive Layer

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 Website
  • Guides
  • Interactive
  • UX
new client components
3

new client components

interactive tool (estimate follow-up customizer)
1

interactive tool (estimate follow-up customizer)

tone/day message variants, all deterministic
6

tone/day message variants, all deterministic

new dependencies, API calls, or backend changes
0

new dependencies, API calls, or backend changes

Timeline

  1. Start

    Brief received + architecture confirmed

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

  2. Phase 1

    CopyButton + TemplateCard

    Client components isolated, all template guides get copy buttons automatically

  3. Phase 2

    TemplateCustomizer + interactive field

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

  4. Polish

    Pre-deploy hardening pass

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

  5. 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