Product Engineering

How do you build what the maps describe?

METHODOLOGY → ARCHITECTURE → STACK
   │               │            │
   ▼               ▼            ▼
 Flow Maps      Hexagonal    Next.js
 Pictures       Domain-First React
 A&IDs          Type-Driven  Platform

Product engineering bridges pictures to products. Jobs to be done tells you WHAT to build. Design tells you what it LOOKS like. Engineering tells you HOW it gets built — from maps to running code.

Three Layers

Layer	Question	Where
Methodology	How do pictures become products?	Flow Engineering — five maps from outcome to orchestration
Architecture	How does the compiler guide the build?	Type-First Development — domain-first, layer-by-layer
Stack	What tools deliver it?	Next.js, React, Browser APIs, AI Coding

Methodology

Flow engineering turns pictures into code artifacts:

Map	Produces
Outcome Map	Domain contracts
Value Stream Map	Use cases, repos
Dependency Map	Build sequence
Capability Map	Generators, skills
A&ID	Agent orchestration

Architecture

Type-first development makes the compiler the methodology: change a domain contract, follow the red squiggles outward through infrastructure, application, presentation. All green = done.

Stack

Area	Covers
AI Coding	Building with Claude, Cursor, V0 — precision prompting, context control
Browser APIs	The frontend iceberg — storage, animation, maps, speech, AR/VR
App Router	Layout, rendering, streaming, SEO
RSCs and Services	Server components, actions, middleware, DTOs
State Management	React Query, Zustand, data fetching
UI Components	TailwindCSS, shadcn, headless patterns
Best Practices	Performance, security, memory, costs
Mobile	React Native cross-platform