Ask the six optional setup questions after size so each tick can change suggested cards, keeping the answers on the draft and off the published Rule.

app/(app)/create/CreateFlowLayoutClient.tsx

@@ -91,6 +91,10 @@ import {
   isCommunitySizeStepBlocked,
   isCommunityStructureStepBlocked,
 } from "./utils/createFlowFooterLabels";
+import {
+  EMPTY_SETUP_TRAITS,
+  hasTickedSetupTrait,
+} from "../../../lib/create/setupTraits";
 import { useAuthModal } from "../../contexts/AuthModalContext";
 import { useMessages, useTranslation } from "../../contexts/MessagesContext";
 import { PostLoginDraftTransfer } from "./PostLoginDraftTransfer";
@@ -984,6 +988,37 @@ function CreateFlowLayoutContent({
                     : footer.submitEmail}
                 </Button>
               </div>
+            ) : currentStep === "setup-questions" && nextStep ? (
+              <div className="flex flex-shrink-0 items-center gap-3 md:gap-4">
+                <Button
+                  buttonType="filled"
+                  palette="default"
+                  size="xsmall"
+                  disabled={
+                    isPublishing || !hasTickedSetupTrait(state.setupTraits)
+                  }
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
+                  onClick={() => {
+                    goToNextStep();
+                  }}
+                >
+                  {footer.continue}
+                </Button>
+                <Button
+                  buttonType="outline"
+                  palette="default"
+                  size="xsmall"
+                  disabled={isPublishing}
+                  className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
+                  onClick={() => {
+                    markCreateFlowInteraction();
+                    updateState({ setupTraits: { ...EMPTY_SETUP_TRAITS } });
+                    goToNextStep();
+                  }}
+                >
+                  {footer.skip}
+                </Button>
+              </div>
             ) : currentStep === "community-upload" && nextStep ? (
               <Button
                 buttonType={hasCommunityLogo ? "filled" : "outline"}

app/(app)/create/screens/createFlowScreenComponents.tsx

@@ -27,6 +27,13 @@ const CommunitySizeSelectScreen = dynamic(
     })),
   { loading: () => null },
 );
+const SetupQuestionsScreen = dynamic(
+  () =>
+    import("./select/SetupQuestionsScreen").then((m) => ({
+      default: m.SetupQuestionsScreen,
+    })),
+  { loading: () => null },
+);
 const CommunityStructureSelectScreen = dynamic(
   () =>
     import("./select/CommunityStructureSelectScreen").then((m) => ({
@@ -135,6 +142,8 @@ export function renderCreateFlowScreen(screenId: CreateFlowStep): ReactNode {
       );
     case "community-size":
       return <CommunitySizeSelectScreen />;
+    case "setup-questions":
+      return <SetupQuestionsScreen />;
     case "community-upload":
       return <CommunityUploadScreen />;
     case "community-save":

app/(app)/create/screens/select/SetupQuestionsScreen.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import CheckboxGroup from "../../../../components/controls/CheckboxGroup";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { useCreateFlow } from "../../context/CreateFlowContext";
+import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
+import { CreateFlowTwoColumnSelectShell } from "../../components/CreateFlowTwoColumnSelectShell";
+import {
+  setupTraitsFromTickedIds,
+  tickedSetupTraitIds,
+} from "../../../../../lib/create/setupTraits";
+
+/**
+ * Create Community — Figma Flow - Checkboxes (25224:105566).
+ */
+export function SetupQuestionsScreen() {
+  const copy = useMessages().create.community.setupQuestions;
+  const { markCreateFlowInteraction, updateState, state } = useCreateFlow();
+
+  return (
+    <CreateFlowTwoColumnSelectShell
+      header={
+        <CreateFlowHeaderLockup
+          title={copy.title}
+          description={copy.description}
+          justification="left"
+        />
+      }
+    >
+      <CheckboxGroup
+        value={tickedSetupTraitIds(state.setupTraits)}
+        onChange={({ value }) => {
+          markCreateFlowInteraction();
+          updateState({ setupTraits: setupTraitsFromTickedIds(value) });
+        }}
+        options={copy.questions.map((question) => ({
+          value: question.id,
+          label: question.label,
+          subtext: question.help,
+        }))}
+        aria-label={copy.title}
+        className="flex w-full flex-col gap-[20px] !space-y-0"
+      />
+    </CreateFlowTwoColumnSelectShell>
+  );
+}

app/(app)/create/types.ts

@@ -16,6 +16,7 @@ export type CreateFlowStep =
   | "informational"
   | "community-name"
   | "community-size"
+  | "setup-questions"
   | "community-context"
   | "community-structure"
   | "community-upload"

app/(app)/create/utils/createFlowProportionProgress.ts

@@ -12,7 +12,8 @@ const PROPORTION_BY_STEP_INDEX: readonly ProportionBarState[] = [
   "1-2", // community-structure
   "1-3", // community-context
   "1-4", // community-size
-  "1-6", // community-upload (1-5 is reserved for setup questions)
+  "1-5", // setup-questions
+  "1-6", // community-upload
   "1-7", // community-save
   "1-8", // review
   "2-0", // core-values (same fill as 1-8)

app/(app)/create/utils/createFlowScreenRegistry.ts

@@ -57,6 +57,12 @@ export const CREATE_FLOW_SCREEN_REGISTRY: Record<
     messageNamespace: "create.community.communitySize",
     centeredBodyBelowMd: false,
   },
+  "setup-questions": {
+    layoutKind: "select",
+    figmaNodeId: "25224-105566",
+    messageNamespace: "create.community.setupQuestions",
+    centeredBodyBelowMd: false,
+  },
   "community-context": {
     layoutKind: "text",
     figmaNodeId: "25224-106030",

app/(app)/create/utils/flowSteps.ts

@@ -2,8 +2,9 @@
  * Step definitions and helpers for the Create Rule Flow
  *
  * Single source of truth for step order and navigation helpers.
- * Order matches Figma Create Community (frames 1–8) then later stages.
+ * Order matches Figma Create Community then later stages.
  * `community-structure` precedes `community-context` and `community-size` (Figma frame 3 vs 5 swap).
+ * `setup-questions` sits after size and before the logo upload.
  */
 
 import type { CreateFlowStep } from "../types";
@@ -17,6 +18,7 @@ export const FLOW_STEP_ORDER: readonly CreateFlowStep[] = [
   "community-structure",
   "community-context",
   "community-size",
+  "setup-questions",
   "community-upload",
   "community-save",
   "review",
@@ -49,8 +51,8 @@ export type CreateFlowNavigationOptions = {
   skipCommunitySave?: boolean;
   /**
    * Template **Use without changes**: collect community name, description, and
-   * optional photo only. Skips intro, structure, size, save, community review,
-   * and the custom-rule authoring segment.
+   * optional photo only. Skips intro, structure, size, setup questions, save,
+   * community review, and the custom-rule authoring segment.
    */
   useWithoutChangesIdentityOnly?: boolean;
 };
@@ -65,6 +67,7 @@ const USE_WITHOUT_CHANGES_IDENTITY_SKIP = new Set<CreateFlowStep>([
   "informational",
   "community-structure",
   "community-size",
+  "setup-questions",
   "community-save",
   "review",
   "core-values",
@@ -199,6 +202,7 @@ export function shouldOfferCreateFlowSaveAndExit(
  */
 export const CREATE_FLOW_SELECT_SPLIT_SCROLL_STEPS: readonly CreateFlowStep[] = [
   "community-size",
+  "setup-questions",
   "community-structure",
   "core-values",
   "communication-methods",

app/components/controls/CheckboxGroup/CheckboxGroup.view.tsx

@@ -35,9 +35,14 @@ export function CheckboxGroupView({
                   onOptionChange(option.value, checked);
                 }}
               />
-              <div className="flex flex-col gap-[4px] flex-1">
+              <div
+                className="flex flex-col gap-[4px] flex-1 min-w-0 cursor-pointer"
+                onClick={() => {
+                  if (!disabled) onOptionChange(option.value, !isChecked);
+                }}
+              >
                 <span
-                  className={`text-small-paragraph ${
+                  className={`text-paragraph-m ${
                     mode === "inverse"
                       ? "text-[var(--color-content-invert-primary)]"
                       : "text-[var(--color-content-default-primary)]"