Character Creator Steps

Use this skill to modify the multi-step character creation flow. Focus on the reducer-driven step map, render switch, and sidebar config so navigation, backtracking, and visibility stay consistent.

Entry Points

• src/components/CharacterCreator/state/characterCreatorState.ts for CreationStep, reducer transitions, stepDefinitions, GO_BACK resets, and step gating helpers.
• src/components/CharacterCreator/CharacterCreator.tsx for renderStep() and step-level handlers.
• src/components/CharacterCreator/config/sidebarSteps.ts for sidebar labels, grouping, visibility, and completion summaries.
• src/components/CharacterCreator/CreationSidebar.tsx if sidebar layout or grouping behavior changes.
• src/components/CharacterCreator/CharacterCreator.README.md and src/components/CharacterCreator/state/characterCreatorState.README.md for state/flow notes.
• tests/character-creator-flow.spec.ts and src/components/CharacterCreator/state/tests/characterCreatorReducer.test.ts for flow coverage.

Workflow

1. Map the change: Identify whether the update is add, remove, reorder, or conditional. Note the current step order and dependencies (race, class, ability scores, feats).
2. Update the state model:

- Add/remove the CreationStep enum entry. - Add any new CharacterCreationState fields and action types. - Update determineNextStepAfterRace, getNextStep, and any gating helpers (canOfferFeatAtLevelOne, getFeatStepOrReview, getPreviousStepBeforeFeat) if the path changes.

1. Wire reducer transitions:

- Add new case handlers in characterCreatorReducer. - Update stepDefinitions for back navigation. - Update getFieldsToResetOnGoBack to clear the data captured by the step.

1. Render the step UI:

- Add a renderStep() branch in CharacterCreator.tsx. - Ensure navigation (SETSTEP, GOBACK, NAVIGATETOSTEP) keeps the user in valid state.

1. Keep the sidebar honest:

- Add/update entries in SIDEBAR_STEPS with label, group, visibility, and selection summary. - Update isStepCompleted for the new step.

1. Validate flow:

- Update Playwright flow if the screen order changes. - Add/adjust reducer tests for step transitions and backtracking. - Confirm docs still match current behavior.

Change Patterns

Add a new step

• Add enum + reducer action + state field.
• Insert into forward path (e.g., after AbilityScores or before ClassFeatures) and update the stepDefinitions previous step mapping.
• Add sidebar config and completion logic.
• Add test coverage for forward and back navigation.

Remove a step

• Remove enum, reducer case, and related state fields.
• Remove from stepDefinitions, SIDEBAR_STEPS, and completion logic.
• Collapse adjacent steps to keep the flow continuous.
• Prune tests that depended on the removed step.

Reorder steps

• Update stepDefinitions for back navigation and forward flow helpers.
• Audit all SET_STEP transitions that assume the old order.
• Update sidebar grouping order if needed.

Conditional steps

• Gate visibility in SIDEBAR_STEPS.isVisible.
• Gate the transition in reducer logic (often in SELECT* or SETABILITY_SCORES).
• Ensure GO_BACK resets the conditional data if the step is skipped or revisited.

Guardrails

• Prefer inline race variant selection in RaceDetailPane unless a step must block forward progress (see existing centaur/changeling patterns).
• Keep NAVIGATETOSTEP conservative: it must not allow jumping past incomplete data.
• If the step affects stats, sync with useCharacterAssembly so preview and final assembly match.

Completion Criteria

Before concluding any character creator step task, you must satisfy the following checklist:

1. State Preservation: Confirm that when the user clicks the "Go Back" button from the modified step, all newly captured data for that step is correctly cleared (resets in getFieldsToResetOnGoBack are executed).
2. Navigation Gating: Verify that the step flow transitions and gating helpers (determineNextStepAfterRace, getNextStep, etc.) prevent jumping past incomplete required steps.
3. Sidebar Alignment: Confirm that the sidebar visibility and completion indicator (isStepCompleted) are updated to reflect the new step's active state.
4. Integration Tests: Verify that the Playwright flow tests (tests/character-creator-flow.spec.ts) and reducer tests run and pass without failures.
5. No Compilation Errors: Verify the code compiles without TypeScript errors.