2842c5c2c6
Producer-visible demo gate. /review hits POST /api/generate on mount, lays
the resulting BannerSpecs into a grid of Konva canvases, plays each on its
own GSAP timeline, and opens a right-side drawer showing AI reasoning +
the resolved spec JSON when a card is clicked.
UI:
- apps/web/app/review/page.tsx: thin shell, lazy-loads ReviewClient via
next/dynamic(ssr:false). Mirrors /parity (Konva touches window; dropflow
uses top-level await — neither survives SSG).
- ReviewClient.tsx: init → loading → ready | error state machine. Calls
ensureBrowserEngine() then fetch('/api/generate'). Reconstructs feed-row
order by slotting skipped/error rows at their declared rowIndex and
filling the gaps with the ok specs in arrival order.
- components/BannerCanvas.tsx: pure Konva renderer. Gray Rect fallback,
hero Image with manual cover-fit (Konva has no native object-fit:cover),
text layers wrapped in <Group ref> keyed by layer_id so GSAP can tween
attrs.opacity. Typography is looked up from DEMO_TEMPLATE_300x250 since
ResolvedLayer doesn't carry it.
- components/BannerCard.tsx: one card per spec. Builds its GSAP timeline
on mount inside a requestAnimationFrame (so Konva refs are populated),
registers a restart fn upstream, kills the timeline on unmount.
- components/BannerGrid.tsx: feed-row ordered grid. Skipped/error rows get
gray placeholder cards with status pills so producers see exactly which
row was which.
- components/AiReasoningDrawer.tsx: slide-in 420px drawer. Closes on X,
backdrop click, or Escape. Four labeled reasoning sections + collapsible
<details> with pretty-printed BannerSpec JSON.
- lib/build-timeline.ts: pure factory. fade_in/fade_out map to gsap tweens
on node.attrs.opacity; hold is a no-op; one timeline-level onUpdate
drives stage.batchDraw(). Initial opacity(0) is set before play to avoid
a first-frame flash.
- lib/typography-lookup.ts: walks the unresolved template (incl. group
children) for TypographySpec by layer_id.
- styles.module.css: scoped grid/card/drawer styles.
Other:
- apps/web/package.json: konva@^9, react-konva@^18.2.10, gsap@^3.12.
- apps/web/app/page.tsx: /review listed as "review grid (live)".
Verified: pnpm -F @banner-studio/web build is clean (/review in route
table at 1.21 kB). All 26 Day-2 tests still pass. Dev server boots and
serves /review at HTTP 200 with the expected CSR bail-out.
End-of-day gate (VERTICAL_SLICE.md:154): A producer-shaped user could see
this and immediately understand what the product does. They see 5 banners
generated from 5 feed rows, animating, with reasoning visible.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
|
||
|---|---|---|
| apps | ||
| feeds | ||
| infra/fonts | ||
| packages | ||
| scripts | ||
| .env.example | ||
| .gitignore | ||
| .nvmrc | ||
| ANTI_PATTERNS.md | ||
| ARCHITECTURE.md | ||
| Avoiding UX Failure FIRST.md | ||
| BUILD_SEQUENCE.md | ||
| CLAUDE.md | ||
| EXECUTIVE_SUMMARY.md | ||
| FRUSTRATION_LIST.md | ||
| INTERACTION_STANDARDS.md | ||
| package.json | ||
| PHASE_1_BRIEF.md | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| PROJECT_STRUCTURE.md | ||
| README.md | ||
| RESEARCH.md | ||
| SLICE_DEVIATIONS.md | ||
| tsconfig.base.json | ||
| turbo.json | ||
| UX_ACCEPTANCE_CRITERIA.md | ||
| VERTICAL_SLICE.md | ||
Banner Studio — Claude Code Briefing Bundle
This bundle contains everything needed to begin building the agentic HTML5 banner production platform with Claude Code, plus an executive summary for non-engineering audiences.
What's in here
For Claude Code (drop these in the project root):
CLAUDE.md— Read on every session. Locked decisions, conventions, what not to do. The operational source of truth.PROJECT_STRUCTURE.md— Monorepo layout, package by package, file by file. Use as the scaffolding target.PHASE_1_BRIEF.md— Step-by-step prompts for the first week of work. Foundation phase, no UI yet.BUILD_SEQUENCE.md— All 14 phases with exit criteria. Expand each phase into Claude Code prompts as you reach it.ARCHITECTURE.md— The full architecture spec (the document you authored). Source of truth for data shapes, algorithms, and rationale.RESEARCH.md— Research backing the locked decisions. Reference for the "why" behind stack and pattern choices.
For leadership and stakeholder decks:
EXECUTIVE_SUMMARY.md— Plain-prose briefing. The PPT source document. Sections map naturally to slides.
How to start
-
Create the project repo. Copy
CLAUDE.md,PROJECT_STRUCTURE.md,PHASE_1_BRIEF.md,BUILD_SEQUENCE.md,ARCHITECTURE.md, andRESEARCH.mdinto the root. -
Open Claude Code in that directory.
-
First prompt:
Read
CLAUDE.md, thenPHASE_1_BRIEF.md. We are at Step 1.1. Begin. -
Work through Phase 1 step by step. Do not skip the unit tests on the layout engine. Do not skip Step 1.9 (the type-safety proof) — it confirms the contract chain works before you build anything substantial on top of it.
-
At Phase 1 exit, tag
v0.1.0-foundationand start Phase 2.
A note on the documents
CLAUDE.md is intentionally opinionated. It states what is locked, what is forbidden, and where to look for the why. This is the right shape for a Claude Code briefing — it tells the model what decisions have already been made so it doesn't waste context re-deriving them, and it tells it where to look when a deeper question comes up.
PHASE_1_BRIEF.md is the only phase with literal prompts pre-written. As you complete Phase 1 and start Phase 2, expand that phase's summary in BUILD_SEQUENCE.md into a similar step-by-step brief. The first phase needed prompts because zero-state is the hardest moment; later phases can lean on the patterns established in Phase 1.
EXECUTIVE_SUMMARY.md is written to be read by people who will never touch the code. It's the document that gets adapted into a 10-slide deck or a one-pager for a stakeholder conversation. Sections are sized to map to slides without further editing.