website-foundation — Implementation Plan

website-foundation — Implementation Plan

Alias: wf — invoke as /pipeline wf <section>. Section IDs in YAML + commits use the canonical slug website-foundation.

Context

fabled10x.com is the brand site for the Fabled10X YouTube channel — the place viewers land after watching an episode and the asset that converts them into subscribers and email signups. As of 2026-04-11 the repo is a fresh Next.js 16 App Router scaffold with a placeholder homepage and public/llms.txt. Nothing else is live, and pipeline/active/session.yaml explicitly names docs/fabled10x-website-implementation-plan.md as the seed for the first currentwork/ job.

This job delivers the public content site MVP — the scope of Phase 0 and Phase 1 from the implementation-plan doc, plus the /about page and the SEO/accessibility polish needed for a production launch. The storefront, authentication, free interactive tools, community showcase, testimonials, and cohort enrollment are each deferred to their own future /jobbuild runs (see the plan file at /home/travis/.claude/plans/ancient-squishing-rocket.md for the full ten-job landscape).

The end-state of this job: npm run build produces a content-driven marketing site with a branded homepage, a fully-working /episodes and /cases tree loaded from MDX content files, an /about page, email capture wired to Resend, LLL outbound crosslinks, and clean SEO/robots/sitemap/llms.txt coverage — shippable to the VPS in standalone mode.

What Already Exists

• Next.js 16 App Router scaffold — React 19.2.4, Tailwind 4, strict TS, @/ → src/. (package.json, tsconfig.json, next.config.ts)
• Standalone output configured — next.config.ts sets output: "standalone" for self-hosted VPS deploy. (next.config.ts:3)
• Content schemas (partial) — four typed modules already in place:
  • src/content/schemas/content-tier.ts — ContentTier enum + CONTENT_TIER_LABELS
  • src/content/schemas/content-pillar.ts — ContentPillar enum + CONTENT_PILLAR_QUESTIONS
  • src/content/schemas/episode.ts — Episode interface
  • src/content/schemas/source-material.ts — SourceMaterial interface + SOURCE_MATERIAL_KINDS
  • src/content/schemas/index.ts — barrel re-export
• Placeholder homepage — src/app/page.tsx renders <h1>fabled10x</h1>. Root layout at src/app/layout.tsx wires Geist sans/mono fonts.
• llms.txt — public/llms.txt is populated and points crawlers at the Large Language Library sister project.
• Test infra — Vitest 2.1.8 + jsdom, src/__tests__/setup.ts loads @testing-library/jest-dom/vitest, MSW 2.7 installed, coverage thresholds 70/80/80/80 (vitest.config.ts). Only smoke.test.ts exists today.
• Source doc — docs/fabled10x-website-implementation-plan.md (site map, page specs, phased rollout).
• Brand doc — docs/fabled10x-brand-identity.md (voice, tone, visual direction — "boutique consultancy, muted confident colors, strong typography, narrative quality").
• Next.js 16 MDX guide — node_modules/next/dist/docs/01-app/02-guides/mdx.md (local docs required reading per AGENTS.md).

Feature Overview (11 Features, 4 Phases)

Size guide: S = few hours, single file. M = half day, 2-3 files. L = full day, 4+ files. XL = multi-day, new content type + loader + UI.

Dependency Graph

Phase 1: Foundation (schemas, design, shell, validators)
│
│   1.1 ─┬─→ 1.2
│   1.3 ─┤            ← 1.1, 1.3, 1.4 parallel; 1.2 depends on 1.1
│   1.4 ─┘
│
v
Phase 2: Content Loader (MDX pipeline, loaders, seed data)
│
│   2.1 → 2.2   ← sequential (loader must exist before seed content is verified)
│
v
Phase 3: Pages (homepage + every public route)
│
│   3.1, 3.2, 3.3, 3.4   ← all parallel-able after phase 2
│
v
Phase 4: Capture + SEO + Polish
│
    4.1   ← single section covers email, crosslinks, SEO, sitemap, a11y

Hard dependencies only cross phase boundaries. Within a phase, most features can run in parallel TDD cycles — Phase 2 is the one exception because the MDX pipeline has to exist before the loader is written, and the loader has to exist before seed content is verified end-to-end.

New Content Types Required

Zod schemas for Episode, SourceMaterial, and the new Case live at src/content/schemas/validators.ts (new) — validators, not new types, so they don't appear in the table above but are delivered in Feature 1.2.

Critical Files Reference

Verification Plan

Phase Documentation

• Phase 1: Foundation
• Phase 2: Content Loader
• Phase 3: Pages
• Phase 4: Capture + SEO

Dependencies to Add

Installed during Phase 2.1 (except zod, which Phase 1.2 depends on and should be installed at the start of the job):

• zod — runtime validation at content boundary (Phase 1.2)
• @next/mdx, @mdx-js/loader, @mdx-js/react, @types/mdx — MDX pipeline (Phase 2.1)
• resend — email capture provider (Phase 4.1)

Open Items (Resolve During Implementation)

• Brand design tokens: docs/fabled10x-brand-identity.md gives direction (boutique consultancy, muted confident colors, narrative quality) but no specific hex values or font stack. Phase 1.3 owns the call.
• RESEND_API_KEY: User must provision and add to .env.local before Phase 4.1 can be verified end-to-end. Plan notes where the key is referenced; implementation is functional without the key (form degrades to an error state).
• Party Masters placeholder copy: Phase 2.3 ships stub copy. Real case content is a separate concern and not part of this job.

Section IDs for TDD Workflow

Each feature maps to one section ID used by /discovery, /red, /green, /refactor.

These IDs are consumed by pipeline/active/session.yaml and used as directory names under pipeline/active/.