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

# Create-flow guardrails

## Folder & file layout

- Screens live in `app/(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/(app)/create/utils/createFlowScreenRegistry.ts`. Never branch on layout kind
  inside a screen — pick the matching shell (`CreateFlowStepShell` /
  `CreateFlowTwoColumnSelectShell`).
- Keep create-flow step routing centralized in
  `app/(app)/create/utils/createFlowPaths.ts` (`createFlowStepPath`,
  `CREATE_ROUTES`) — do not introduce new hardcoded `/create/...` literals.
- Shared create-flow pieces go in `app/(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/(app)/create/components/ModalTextAreaField` |
| Toggle-chip row + inline "+ Add" input | `app/(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/type/InputLabel` (`helpIcon` prop) |
| Toggle chip (dim-but-clickable) | `Chip` with `state="Disabled" disabled={false}` |
| Card-click → structured creation modal | `Create` with `backdropVariant="blurredYellow"` |

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/<stage>/<step>.json` where
  `<stage>` is one of `community`, `customRule`, `reviewAndComplete`
  (matches Figma stages — see `docs/create-flow.md`). Cross-cutting chrome
  (`footer.json`, `topNav.json`, `draftHydration.json`,
  `templateReview.json`) and shared layout-shell strings (`select.json`,
  `text.json`, `upload.json`) live at the `create/` root. Wire each new
  JSON into `messages/en/index.ts` under the matching `create.<stage>.*`
  namespace (see `localization.mdc`).
- Modal `sections` defaults are DB-shaped seed placeholders, not UI
  constants — expect replacement with live data.
- Custom-rule facet mappings (step ids, template-category aliases, selection
  keys, strip keys) must be sourced from `lib/create/customRuleFacets.ts`
  (`CUSTOM_RULE_FACETS`) instead of adding new ad-hoc switches/tables.

## Interaction tracking

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