whiteport-design-studio 0.2.2 → 0.3.0

package/src/workflows/4-ux-design/steps-p/step-08-spacing-typography.md

@@ -0,0 +1,210 @@
+---
+name: 'step-08-spacing-typography'
+description: 'Define spacing objects between sections and typography tokens for all text elements'
+
+# File References
+nextStepFile: './step-09-generate-spec.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 8: Spacing & Typography
+
+## STEP GOAL:
+
+Define the invisible layer — spacing objects between sections and typography tokens for all text elements. Every gap gets an ID, every heading gets a token.
+
+## MANDATORY EXECUTION RULES (READ FIRST):
+
+### Universal Rules:
+
+- 🛑 NEVER generate content without user input
+- 📖 CRITICAL: Read the complete step file before taking any action
+- 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
+- 📋 YOU ARE A FACILITATOR, not a content generator
+- ✅ YOU MUST ALWAYS SPEAK OUTPUT in your Agent communication style with the config `{communication_language}`
+
+### Role Reinforcement:
+
+- ✅ You are Freya, a creative and thoughtful UX designer collaborating with the user
+- ✅ If you already have been given a name, communication_style and persona, continue to use those while playing this new role
+- ✅ We engage in collaborative dialogue, not command-response
+- ✅ You bring design expertise and systematic thinking, user brings product vision and domain knowledge
+- ✅ Maintain creative and thoughtful tone throughout
+
+### Step-Specific Rules:
+
+- 🎯 Focus on spacing between sections and typography tokens — the invisible layer
+- 🚫 FORBIDDEN to skip zero-spacing decisions (they are intentional design choices)
+- 💬 Approach: Walk through sections top-to-bottom, define each gap and heading
+- 📋 Use token names, never arbitrary pixel values
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Define spacing objects for every section boundary and typography tokens for all headings
+- 💾 Store spacing_objects and typography_tokens
+- 📖 Reference the section layout from step 02 for section order
+- 🚫 FORBIDDEN to use pixel values — always use token names
+
+## CONTEXT BOUNDARIES:
+
+- Available context: Layout sections (step 02), components (step 03), content (step 04)
+- Focus: Spacing between sections and typography scale
+- Limits: Do not redefine layout or components — only add the spacing and typography layer
+- Dependencies: Section layout must be defined
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Section-to-Section Spacing
+
+<output>**Now let's define the invisible layer — the spacing between your sections.**
+
+Every gap between sections is a design decision. Even zero spacing is intentional — it means two sections form one visual unit.
+
+We'll work top to bottom through your page sections.</output>
+
+<action>
+For each pair of adjacent sections from the layout (step 02):
+
+Present the pair and ask:
+</action>
+
+<ask>**Spacing between sections:**
+
+Working through your page sections top to bottom:
+
+| Between | Above | Below | Spacing |
+|---------|-------|-------|---------|
+| Gap 1 | [Section A] | [Section B] | ? |
+| Gap 2 | [Section B] | [Section C] | ? |
+| ... | ... | ... | ? |
+
+**Available tokens:** `zero`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`
+
+**Guidelines:**
+- `zero` = sections form one visual unit (e.g., header + nav)
+- `sm`/`md` = related sections
+- `lg`/`xl` = standard section boundaries
+- `2xl`/`3xl` = major visual breaks
+
+For each gap, what spacing feels right?</ask>
+
+<action>
+Store spacing_objects with IDs using the naming convention:
+
+`{page-slug}-v-space-{size}` for vertical spacing
+`{page-slug}-v-separator-{size}` for lines/dividers with spacing
+
+Example:
+```
+#### ↕ `hem-v-space-zero` — header and nav form one continuous unit
+#### ↕ `hem-v-space-xl` — standard gap between hero and content
+#### ↕ `hem-v-separator-2xl` — gray line, space-2xl above and below
+#### ↕ `hem-v-space-3xl` — major boundary before footer
+```
+
+Also capture grid gaps for any sections with repeated items (card grids, lists):
+```
+| Grid gap | h-space-lg / v-space-lg |
+```
+</action>
+
+### 2. Define Typography Tokens
+
+<output>**Now let's assign typography tokens to your headings.**
+
+In WDS, the semantic tag (h1, h2, h3) and the visual size are independent:
+- The **tag** tells screen readers the document structure
+- The **token** controls how big it looks
+
+A section heading might be an `<h2>` but visually `heading-xl` on mobile and `heading-2xl` on desktop.</output>
+
+<ask>**Typography for your page headings:**
+
+For each heading in your content (from step 04):
+
+| Heading | Semantic tag | Visual size (mobile / tablet / desktop) |
+|---------|-------------|----------------------------------------|
+| [Main page heading] | h1 | ? / ? / ? |
+| [Section heading 1] | h2 | ? / ? / ? |
+| [Section heading 2] | h2 | ? / ? / ? |
+| [Card heading] | h3 | ? / ? / ? |
+
+**Available heading tokens:** `heading-xxs` (14px), `heading-xs` (16px), `heading-sm` (18px), `heading-md` (20px), `heading-lg` (24px), `heading-xl` (30px), `heading-2xl` (36px), `heading-3xl` (44px), `heading-4xl` (56px)
+
+**Rule of thumb:** Step up one token size per breakpoint (mobile → tablet → desktop).
+
+What sizes feel right for each heading?</ask>
+
+<action>Store typography_tokens for each heading:
+
+```markdown
+### [Heading name]
+
+**OBJECT ID:** `{page-slug}-{section}-heading`
+
+| Property | Value |
+|----------|-------|
+| Tag | h2 |
+| Visual size | heading-lg / heading-xl / heading-2xl |
+| Font weight | 900 |
+```
+</action>
+
+### 3. Review
+
+<output>**Here's your invisible layer:**
+
+**Spacing Objects:**
+{{#each spacing_object}}
+#### ↕ `{{id}}` — {{description}}
+{{/each}}
+
+**Typography Tokens:**
+{{#each typography_token}}
+- **{{name}}**: `{{tag}}` at `{{mobile}} / {{tablet}} / {{desktop}}`
+{{/each}}
+
+Does this feel right? Any adjustments?</output>
+
+### 4. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Generate Specification | [M] Return to Activity Menu"
+
+#### Menu Handling Logic:
+
+- IF C: Load, read entire file, then execute {nextStepFile}
+- IF M: Return to {workflowFile} or {activityWorkflowFile}
+- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#4-present-menu-options)
+
+#### EXECUTION RULES:
+
+- ALWAYS halt and wait for user input after presenting menu
+- User can chat or ask questions — always respond and then redisplay menu options
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the user selects an option from the menu and all spacing objects and typography tokens have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- Every section boundary has a spacing object with an ID
+- Zero-spacing decisions documented with rationale
+- Grid gaps defined for sections with repeated items
+- All headings have semantic tags and visual tokens
+- Responsive scaling defined (mobile / tablet / desktop)
+- No pixel values used — only token names
+
+### ❌ SYSTEM FAILURE:
+
+- Missing spacing between any section pair
+- Using pixel values instead of tokens
+- Skipping zero-spacing documentation
+- Not defining responsive typography scaling
+- Generating spacing/typography without user input
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.

package/src/workflows/4-ux-design/steps-p/{step-08-generate-spec.md → step-09-generate-spec.md}

@@ -1,5 +1,5 @@
 ---
-name: 'step-08-generate-spec'
+name: 'step-09-generate-spec'
 description: 'Compile all gathered information into the complete page specification document'
 
 # File References
@@ -7,11 +7,11 @@ workflowFile: '../workflow.md'
 activityWorkflowFile: '../workflow-specify.md'
 ---
 
-# Step 8: Generate Specification Document
+# Step 9: Generate Specification Document
 
 ## STEP GOAL:
 
-Compile all gathered information from steps 1-7 into the complete page specification document using the specification template.
+Compile all gathered information from steps 1-8 into the complete page specification document using the specification template.
 
 ## MANDATORY EXECUTION RULES (READ FIRST):
 
@@ -42,12 +42,12 @@ Compile all gathered information from steps 1-7 into the complete page specifica
 
 - 🎯 Generate complete specification using the page-specification template
 - 💾 Save specification to the correct output location
-- 📖 Reference all data from steps 1-7
+- 📖 Reference all data from steps 1-8
 - 🚫 FORBIDDEN to generate with missing data sections
 
 ## CONTEXT BOUNDARIES:
 
-- Available context: All data from steps 1-7
+- Available context: All data from steps 1-8
 - Focus: Compilation and document generation
 - Limits: Use the template — do not invent new formats
 - Dependencies: All previous steps must be complete
@@ -71,6 +71,7 @@ Fill in all sections with data collected:
 - interaction_behaviors (from step 05)
 - page_states and component_states (from step 06)
 - validation_rules and error_messages (from step 07)
+- spacing_objects and typography_tokens (from step 08)
   </action>
 
 <action>Save complete specification to:
@@ -91,35 +92,28 @@ Fill in all sections with data collected:
 - {{state_count}} total states (page + component)
 - {{validation_count}} validation rules
 - {{error_count}} error messages
+- {{spacing_count}} spacing objects
+- {{typography_count}} typography tokens
 
-**Your specification is development-ready!**
+**Your specification is development-ready!**</output>
 
-The specification document includes:
+### 2. Update Design Log
 
-- Clear Object IDs for every element
-- Complete multilingual content
-- Detailed interaction behaviors
-- All possible states defined
-- Validation rules and error messages
-- Technical notes and data requirements</output>
+<action>Append a row with status `specified` to the Design Loop Status table in `{output_folder}/_progress/00-design-log.md`:
 
-### 2. Present MENU OPTIONS
+```
+| [Scenario slug] | [NN.X] | [Page name] | specified | [YYYY-MM-DD] |
+```
 
-Display: "**Select an Option:** [M] Return to Activity Menu"
+Do NOT skip this. The design log drives the adaptive dashboard.</action>
 
-#### Menu Handling Logic:
+### 3. Return to Calling Step
 
-- IF M: Return to {workflowFile} or {activityWorkflowFile}
-- IF Any other comments or queries: help user respond then [Redisplay Menu Options](#2-present-menu-options)
-
-#### EXECUTION RULES:
-
-- ALWAYS halt and wait for user input after presenting menu
-- User can chat or ask questions — always respond and then redisplay menu options
+This step is called from either step-01-exploration.md (Discuss) or workflow-suggest.md (Suggest). After updating the design log, return control to the calling workflow's transition logic — the calling step determines what comes next.
 
 ## CRITICAL STEP COMPLETION NOTE
 
-ONLY WHEN the user selects an option from the menu and the specification has been generated and saved will you proceed accordingly. This is the last step in the Specify activity.
+The specification must be generated, saved, AND the design log updated before this step is complete. This is the last step in the Specify activity.
 
 ---
 
@@ -128,7 +122,7 @@ ONLY WHEN the user selects an option from the menu and the specification has bee
 ### ✅ SUCCESS:
 
 - Specification generated using the template
-- All data sections from steps 1-7 included
+- All data sections from steps 1-8 included
 - Document saved to correct output location
 - Summary presented to user with metrics
 - Specification is development-ready

package/src/workflows/4-ux-design/steps-s/step-01-core-feature.md

@@ -18,7 +18,7 @@ Identify the core feature or experience this scenario should cover. Find the nat
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -87,7 +87,8 @@ Display: "**Select an Option:** [C] Continue to Entry Point | [M] Return to Acti
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-02-entry-point.md

@@ -18,7 +18,7 @@ Determine where the user first encounters this scenario — their entry point in
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -87,7 +87,8 @@ Display: "**Select an Option:** [C] Continue to Mental State | [M] Return to Act
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-03-mental-state.md

@@ -18,7 +18,7 @@ Understand the user's mental state when they arrive at the scenario entry point
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -85,7 +85,8 @@ Display: "**Select an Option:** [C] Continue to Mutual Success | [M] Return to A
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-04-mutual-success.md

@@ -18,7 +18,7 @@ Define what mutual success looks like — both what the business wants to achiev
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -88,7 +88,8 @@ Display: "**Select an Option:** [C] Continue to Shortest Path | [M] Return to Ac
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-05-shortest-path.md

@@ -18,7 +18,7 @@ Map the shortest possible journey from the user's entry point to mutual success.
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -100,7 +100,8 @@ Display: "**Select an Option:** [C] Continue to Scenario Name | [M] Return to Ac
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-06-scenario-name.md

@@ -18,7 +18,7 @@ Choose a descriptive, outcome-focused name for this scenario that captures its e
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -85,7 +85,8 @@ Display: "**Select an Option:** [C] Continue to Create Structure | [M] Return to
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-07-create-scenario-folder.md

@@ -18,7 +18,7 @@ Create the physical folder structure and overview documents for the scenario bas
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -59,7 +59,7 @@ Create the physical folder structure and overview documents for the scenario bas
 
 <action>
 **Determine scenario number:**
-- Count existing scenario folders in `4-scenarios/`
+- Count existing scenario folders in `C-UX-Scenarios/`
 - If none exist, scenario_num = 1
 - Otherwise, scenario_num = (highest number + 1)
 - Store scenario_num
@@ -68,11 +68,11 @@ Create the physical folder structure and overview documents for the scenario bas
 <action>
 **Create physical folder structure:**
 
-1. Create `4-scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
+1. Create `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/` directory
 
 **Generate 00-scenario-overview.md:**
 
-File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
+File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/00-scenario-overview.md`
 
 Content:
 ```markdown
@@ -145,7 +145,7 @@ When users arrive, they are feeling:
 
 **Generate scenario-tracking.yaml:**
 
-File: `4-scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
+File: `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/scenario-tracking.yaml`
 
 Content:
 ```yaml
@@ -176,7 +176,7 @@ total_pages: {{pages_list.length}}
 **Scenario {{scenario_num}}:** {{scenario_name}}
 
 **Folder:**
-- `4-scenarios/{{scenario_num}}-{{scenario-slug}}/`
+- `C-UX-Scenarios/{{scenario_num}}-{{scenario-slug}}/`
 
 **Documents:**
 - `00-scenario-overview.md` (detailed scenario metadata)
@@ -204,7 +204,8 @@ Display: "**Select an Option:** [C] Continue to Page Initialization Workshop | [
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-08-page-context.md

@@ -18,7 +18,7 @@ Route user to appropriate page creation workflow based on what they have — a s
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -121,7 +121,8 @@ Display: "**Select an Option:** [C] Continue to Page Name | [M] Return to Activi
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-09-page-name.md

@@ -18,7 +18,7 @@ Capture the page name from the user and generate a URL-friendly slug for folder
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -86,7 +86,8 @@ Display: "**Select an Option:** [C] Continue to Page Purpose | [M] Return to Act
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-10-page-purpose.md

@@ -18,7 +18,7 @@ Define what this page should accomplish — its core purpose in the user journey
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -85,7 +85,8 @@ Display: "**Select an Option:** [C] Continue to Page Entry Point | [M] Return to
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-11-entry-point.md

@@ -18,7 +18,7 @@ Define where users arrive from for this specific page — the page-level entry p
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -87,7 +87,8 @@ Display: "**Select an Option:** [C] Continue to Page Mental State | [M] Return t
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-12-mental-state.md

@@ -18,7 +18,7 @@ Understand the user's mental state when arriving at this specific page — what
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -82,7 +82,8 @@ Display: "**Select an Option:** [C] Continue to Desired Outcome | [M] Return to
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-13-desired-outcome.md

@@ -18,7 +18,7 @@ Define the desired outcome for both business and user on this specific page —
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -82,7 +82,8 @@ Display: "**Select an Option:** [C] Continue to Variants | [M] Return to Activit
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE

package/src/workflows/4-ux-design/steps-s/step-14-variants.md

@@ -18,7 +18,7 @@ Determine if this page will have variants for A/B testing, different audiences,
 
 ### Universal Rules:
 
-- 🛑 NEVER generate content without user input
+- 🛑 NEVER generate content without user input (Suggest mode) / Generate based on context and WDS patterns (Dream mode)
 - 📖 CRITICAL: Read the complete step file before taking any action
 - 🔄 CRITICAL: When loading next step with 'C', ensure entire file is read
 - 📋 YOU ARE A FACILITATOR, not a content generator
@@ -89,7 +89,8 @@ Display: "**Select an Option:** [C] Continue to Create Page Structure | [M] Retu
 
 #### EXECUTION RULES:
 
-- ALWAYS halt and wait for user input after presenting menu
+- **Suggest mode:** ALWAYS halt and wait for user input after presenting menu
+- **Dream mode:** Auto-proceed to next step after completing instructions. Skip menu display.
 - User can chat or ask questions — always respond and then redisplay menu options
 
 ## CRITICAL STEP COMPLETION NOTE