Create custom flow UI

app/create/utils/createFlowProportionProgress.ts

@@ -16,8 +16,10 @@ const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [
   "2-0", // community-save
   "2-0", // review (Figma Flow — Review `19706:12135`: same segment fill as end of Create Community)
   "2-0", // core-values (same segment as review / end of Create Community)
-  "2-2", // cards
-  "3-0", // right-rail
+  "2-1", // communication-methods (Figma — Compact Card Stack)
+  "2-2", // membership-methods (Figma — Compact Card Stack `20858:13947`)
+  "2-3", // decision-approaches (Figma Flow — Right Rail `20523:23509`)
+  "3-0", // conflict-management (Figma Flow — Compact Card Stack `20879:15979`; start of Review segment)
   "3-1", // confirm-stakeholders
   "3-2", // final-review
   "3-2", // completed

app/create/utils/createFlowScreenRegistry.ts

@@ -2,7 +2,8 @@ import type { CreateFlowStep } from "../types";
 
 /**
  * Figma layout families for the create flow (not encoded in the URL).
- * Registry and `app/create/screens/` are organized by these kinds.
+ * `app/create/screens/<kind>/` mirrors these names: e.g. `layoutKind: "select"` → `screens/select/`,
+ * `"card"` → `screens/card/` (compact card-stack frames, distinct from two-column chip selects).
  */
 export type CreateFlowLayoutKind =
   | "informational"
@@ -90,18 +91,30 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
     messageNamespace: "create.coreValues",
     centeredBodyBelowMd: false,
   },
-  cards: {
+  "communication-methods": {
     layoutKind: "card",
-    figmaNodeId: "TBD-cards",
+    figmaNodeId: "20246-15828",
     messageNamespace: "create.communication",
     centeredBodyBelowMd: false,
   },
-  "right-rail": {
+  "membership-methods": {
+    layoutKind: "card",
+    figmaNodeId: "20858-13947",
+    messageNamespace: "create.membership",
+    centeredBodyBelowMd: false,
+  },
+  "decision-approaches": {
     layoutKind: "right-rail",
-    figmaNodeId: "TBD-right-rail",
+    figmaNodeId: "20523-23509",
     messageNamespace: "create.rightRail",
     centeredBodyBelowMd: false,
   },
+  "conflict-management": {
+    layoutKind: "card",
+    figmaNodeId: "20879-15979",
+    messageNamespace: "create.conflictManagement",
+    centeredBodyBelowMd: false,
+  },
   "confirm-stakeholders": {
     layoutKind: "select",
     figmaNodeId: "21104-46594",
@@ -128,3 +141,11 @@ export function createFlowStepUsesCenteredTextLayout(
   if (!step) return false;
   return CREATE_FLOW_SCREEN_REGISTRY[step].centeredBodyBelowMd;
 }
+
+/** Steps whose main area uses the CardStack-style layout (`layoutKind: "card"`). */
+export function createFlowStepUsesCardLayout(
+  step: CreateFlowStep | null,
+): boolean {
+  if (!step) return false;
+  return CREATE_FLOW_SCREEN_REGISTRY[step].layoutKind === "card";
+}

app/create/utils/flowSteps.ts

@@ -21,8 +21,10 @@ export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "community-save",
   "review",
   "core-values",
-  "cards",
-  "right-rail",
+  "communication-methods",
+  "membership-methods",
+  "decision-approaches",
+  "conflict-management",
   "confirm-stakeholders",
   "final-review",
   "completed",