← All craftbooks

Multi-Step Form Wizard

Build: interactive and webevalv1.0.0released 2026-06-05workflow: build-loop

Steps

Entry step: flow-design. Each step names the specialist role it wants; the full working prompt is expandable.

1. Flow designdesignerentry

   steps, fields per step, validation, progress

   Show working prompt

   Design the wizard flow. (1) Enumerate the steps in order and the fields collected on each (with types: text, email, select, radio). (2) Define per-field validation rules and the exact error messages. (3) Specify navigation: Next validates the current step before advancing; Back preserves all entered data; a progress indicator shows current step of N. (4) Define the final review step that summarizes all answers before submit, and the success state. (5) Write an acceptance-criteria checklist of 6-8 items, e.g. 'Next is blocked until the current step is valid', 'Back preserves entered values', 'the progress indicator reflects the current step', 'the review step shows every answer', 'submit shows a success state', 'invalid fields show their error', 'no console errors'. Write to notes/flow-design.md and via write_task_note. No HTML yet.

2. Builddeveloper

   implement index.html with stateful step navigation

   Show working prompt

   Implement index.html with inline CSS/JS to the flow design. (1) Render all steps but show only the active one; track current step and a form-data object. (2) On Next, validate the current step's fields; block advance and show inline errors if invalid; otherwise save values and advance. (3) On Back, go to the previous step with all values intact (re-populate inputs from the data object). (4) Render a progress indicator (step N of M or a bar). (5) Build the final review step summarizing every answer, and a submit that shows a success message. Style it cleanly and responsively. Vanilla JS, no CDN. On a loop-back, fix only the named gaps without regressing passing criteria. write_task_note the path and passing criteria.

3. Evaluatereviewer

   Grade the deliverable against every acceptance criterion. All pass → finish; any fail → loop back and fix the gap.

   Show working prompt

   Walk the whole wizard. Open index.html if possible: try to advance with invalid input, fill steps, go Back and forward to confirm data is kept, reach the review, and submit. Check EACH criterion from notes/flow-design.md and write PASS/FAIL with a reason: is Next blocked when invalid, does Back preserve values, does the progress indicator update, does review show every answer, does submit succeed, zero console errors? Going Back and losing entered data is a FAIL — loop back to build.
   
   Then route — this is the whole point of the loop:
   
   - **Every criterion PASSES →** call `advance_task_step({ ref, stepId: "evaluate", next: "finish" })`.
   - **Any criterion FAILS →** write the specific gaps to notes, then call `advance_task_step({ ref, stepId: "evaluate", next: "build" })` to loop back. The builder fixes exactly those gaps.
   
   Never route to `finish` while any criterion is unmet. The build phase's completion gate already blocked a grossly-incomplete deliverable; your job is the judgment an automated check cannot make (does it actually work, read well, look right). After ~3 unproductive loops, stop and report DONE_WITH_CONCERNS so the user can step in.

4. Finishdeveloper

   All acceptance criteria met. Stamp a short summary and report DONE.

   Show working prompt

   Every acceptance criterion passed. Write a one-paragraph DONE summary to task notes via `write_task_note`: what was built, the deliverable path(s), and a one-line confirmation that each criterion is met. Then report DONE.

Triggers

Phrases that suggest this craftbook to a crew.

• multi step form
• form wizard
• checkout flow
• survey form
• step by step form
• onboarding form

Source

View this craftbook on GitHub · MIT license