---
description: Create-flow structure & design-system reuse guardrails
globs: app/create/**/*.{ts,tsx},messages/en/create/**/*.json
alwaysApply: false
---

# Create-flow guardrails

## Folder & file layout

- Screens live in `app/create/screens/<layoutKind>/<StepIdPascal>Screen.tsx`
  where `<layoutKind>` mirrors `CreateFlowLayoutKind` (`card`, `select`,
  `right-rail`, `completed`, …). File + export name is the **step id**, never
  the layout kind (e.g. `DecisionApproachesScreen`, not `RightRailScreen`).
- Step id ↔ layout kind mapping is declared in
  `app/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
  inside a screen — pick the matching shell (`CreateFlowStepShell` /
  `CreateFlowTwoColumnSelectShell`).
- Shared create-flow pieces go in `app/create/components/` (layout shells,
  field composites). Generic primitives go in `app/components/`.

## Use the design system — don't hand-roll

Reach for these before writing new markup:

| Need | Component |
| --- | --- |
| Labelled text-area section in a modal | `app/create/components/ModalTextAreaField` |
| Toggle-chip row + inline "+ Add" input | `app/create/components/ApplicableScopeField` |
| `[– value +]` numeric stepper (± label) | `app/components/controls/Incrementer` / `IncrementerBlock` |
| Mid-paragraph "expand / see all" link button | `app/components/buttons/InlineTextButton` |
| Help-icon + label above a control | `app/components/utility/InputLabel` (`helpIcon` prop) |
| Toggle chip (dim-but-clickable) | `Chip` with `state="Disabled" disabled={false}` |
| Card-click → structured creation modal | `Create` with `backdropVariant="loginYellow"` |

If a screen grows a 2nd inline copy of any pattern above, **extract a shared
component** rather than duplicate. Local section components inside a screen
file are a smell once they're used more than once.

## Copy & data

- Step copy lives in `messages/en/create/<step>.json`, wired into
  `messages/en/index.ts` under the `create:` namespace (see
  `localization.mdc` for the standard pattern).
- Modal `sections` defaults are DB-shaped seed placeholders, not UI
  constants — expect replacement with live data.

## Interaction tracking

Every user interaction inside a create-flow screen must call
`markCreateFlowInteraction()` from `useCreateFlow()` before mutating state —
progress / footer logic depends on it.