initial commit

2026-03-16 19:54:53 -04:00
commit bfe0e01254
3341 changed files with 483939 additions and 0 deletions
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-01-page-basics.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-01-page-basics.md
@@ -0,0 +1,129 @@
+---
+name: 'step-01-page-basics'
+description: 'Capture fundamental page information including title, route, goals, and SEO data'
+
+# File References
+nextStepFile: './step-02-layout-sections.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 1: Page Basics
+
+## STEP GOAL:
+
+Capture fundamental page information including title, URL/route, user goal, entry/exit points, and SEO data for public pages.
+
+## 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 capturing page basics — title, route, goals, entry/exit points, SEO
+- 🚫 FORBIDDEN to define layout sections or components yet
+- 💬 Approach: Structured information gathering with examples
+- 📋 Reference project brief SEO strategy for keyword data
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Gather all page basics through structured questions
+- 💾 Store page_basics (title, route, goal, entry/exit points, SEO data)
+- 📖 Reference project brief for SEO keywords
+- 🚫 FORBIDDEN to skip SEO fields for public pages
+
+## CONTEXT BOUNDARIES:
+
+- Available context: Scenario data, page definition from Suggest activity
+- Focus: Fundamental page information only
+- Limits: Do not define layout or components (next steps)
+- Dependencies: Page must exist in scenario structure
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Gather Page Basics
+
+<output>**Let's start with the page basics.**</output>
+
+<ask>**Page basics:**
+
+- Page name/title:
+- URL/route (if applicable):
+- Main user goal (in one sentence):
+- Where users come from (entry points):
+- Where users go next (exit points):
+
+**SEO (for public pages):**
+Check the project brief's SEO Strategy for this page's target keywords.
+- Primary keyword:
+- Secondary keywords:
+- URL slug (from keyword map):</ask>
+
+<action>Store page_basics:
+
+- page_title
+- url_route
+- user_goal
+- entry_points
+- exit_points
+- primary_keyword (if public page)
+- secondary_keywords (if public page)
+- url_slug (if public page)
+  </action>
+
+<output>**Page basics captured!**
+
+**Next:** We'll define the layout sections.</output>
+
+### 2. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Layout Sections | [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](#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
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the user selects an option from the menu and all page basics have been captured will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- Page title, route, and user goal captured
+- Entry and exit points defined
+- SEO data captured for public pages
+- All page_basics stored
+
+### ❌ SYSTEM FAILURE:
+
+- Generating page basics without user input
+- Skipping SEO fields for public pages
+- Proceeding to layout without capturing basics
+- Not storing page_basics
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-02-layout-sections.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-02-layout-sections.md
@@ -0,0 +1,124 @@
+---
+name: 'step-02-layout-sections'
+description: 'Define high-level page structure and sections'
+
+# File References
+nextStepFile: './step-03-components-objects.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 2: Layout Sections
+
+## STEP GOAL:
+
+Define the high-level page structure — the major sections and their purposes.
+
+## 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 identifying major page sections and their purposes
+- 🚫 FORBIDDEN to define individual components yet
+- 💬 Approach: Think about areas of the page (header, main, sidebar, footer)
+- 📋 Each section needs a name, purpose, and priority level
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Guide user to identify major page sections
+- 💾 Store sections with name, purpose, and priority
+- 📖 Reference page_basics for context
+- 🚫 FORBIDDEN to jump to component details
+
+## CONTEXT BOUNDARIES:
+
+- Available context: page_basics from step 01
+- Focus: High-level page structure
+- Limits: Do not define components (next step)
+- Dependencies: page_basics must be captured
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Layout Sections
+
+<output>**Now let's define the layout sections.**
+
+Think about the major areas of the page (header, main content, sidebar, footer, etc.)</output>
+
+<ask>**What are the main sections of this page?**
+
+Describe each major section and its purpose.
+
+Example:
+
+- Header: Logo, navigation, user menu
+- Hero: Welcome message and primary CTA
+- Main Content: Sign-up form
+- Footer: Links and legal info</ask>
+
+<action>For each section:
+
+- Store section_name
+- Store section_purpose
+- Store section_priority (primary/secondary)
+  </action>
+
+<output>**Layout sections defined!**
+
+**Sections identified:** {{section_count}}
+
+**Next:** We'll identify all interactive components.</output>
+
+### 2. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Components & Objects | [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](#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
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the user selects an option from the menu and all sections have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- All major page sections identified
+- Each section has name, purpose, and priority
+- Sections stored for component identification
+
+### ❌ SYSTEM FAILURE:
+
+- Generating sections without user input
+- Jumping to component details
+- Missing section purposes
+- Proceeding without storing sections
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-03-components-objects.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-03-components-objects.md
@@ -0,0 +1,176 @@
+---
+name: 'step-03-components-objects'
+description: 'Identify all interactive elements, route to object-specific instructions, and assign Object IDs'
+
+# File References
+nextStepFile: './step-04-content-languages.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 3: Components & Object IDs
+
+## STEP GOAL:
+
+Identify all interactive elements in each section, route to object-specific instructions for detailed documentation, and assign Object IDs.
+
+## 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 systematic component identification: top-to-bottom, left-to-right per section
+- 🚫 FORBIDDEN to skip sections or miss components
+- 💬 Approach: Work through each section, routing to object-type templates
+- 📋 Use object-router for type-specific documentation
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Work through sections systematically, identifying all components
+- 💾 Store component specs with Object IDs for each
+- 📖 Reference object-types/ templates for consistent documentation
+- 🚫 FORBIDDEN to skip design system check after component spec
+
+## CONTEXT BOUNDARIES:
+
+- Available context: page_basics, layout_sections
+- Focus: Component identification and Object ID assignment
+- Limits: Do not specify content/languages yet (next step)
+- Dependencies: Layout sections must be defined
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Identify Components
+
+<output>**Let's identify and document every component systematically.**
+
+We'll work through each section, going **top-to-bottom, left-to-right** within each section, documenting each object using specialized instructions.</output>
+
+### 2. For Each Section
+
+<action>For each section identified in step 02:
+
+<output>**Section: {{section_name}}**
+
+Starting from top-left corner of this section...</output>
+
+### 3. For Each Object in Section
+
+<action>Loop through objects in section (top-to-bottom, left-to-right):
+
+<output>**Next object in {{section_name}}:**</output>
+
+<ask>What is the first/next object in this section (from top-left)?
+
+Describe what you see:</ask>
+
+<action>Store object_description</action>
+
+#### Route to Object-Type Instructions
+
+<action>Load and execute `object-types/object-router.md`</action>
+
+<action>Object-router will: 1. Ask user to identify object type 2. Load appropriate object-type instruction file 3. Guide through complete object documentation 4. Generate specification with Object ID 5. Return here when complete
+</action>
+
+#### Design System Check (If Enabled)
+
+<action>After component specification complete: 1. Check project config: Is design system enabled? 2. If YES: Load and execute `workflows/7-design-system/design-system-router.md` 3. Design system router will: - Check for similar components - Run opportunity/risk assessment if needed - Extract component-level info to design system - Return component reference - Update page spec with reference 4. If NO: Keep complete specification on page 5. Continue to next object
+</action>
+
+<ask>**More objects in {{section_name}}?**
+
+1. **Yes** - Document next object (move right, then down)
+2. **No** - Section complete
+
+Choice [1/2]:</ask>
+
+  <check if="choice == 1">
+    <action>Loop back to document next object in section</action>
+  </check>
+
+  <check if="choice == 2">
+    <output>**Section {{section_name}} complete!**</output>
+    <action>Move to next section</action>
+  </check>
+
+</action>
+
+</action>
+
+### 4. All Sections Complete
+
+<output>**All components identified and documented!**
+
+**Summary:**
+
+- **Sections processed:** {{section_count}}
+- **Total components:** {{component_count}}
+- **Components by type:**
+  {{#each component_type}}
+  - {{type_name}}: {{count}}
+    {{/each}}
+
+**Object IDs assigned:**
+{{#each component}}
+
+- `{{object_id}}` ({{component_type}})
+  {{/each}}
+
+**Next:** We'll specify the content and languages.</output>
+
+### 5. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Content & Languages | [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](#5-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 components have been documented with Object IDs will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- All sections processed systematically
+- All components documented with Object IDs
+- Object-type routing used for consistent documentation
+- Design system check performed after each component
+- Component registry complete
+
+### ❌ SYSTEM FAILURE:
+
+- Skipping sections or components
+- Not using object-type routing for documentation
+- Missing Object IDs
+- Skipping design system check
+- Proceeding with incomplete component registry
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-04-content-languages.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-04-content-languages.md
@@ -0,0 +1,127 @@
+---
+name: 'step-04-content-languages'
+description: 'Specify all text content in all supported languages'
+
+# File References
+nextStepFile: './step-05-interactions.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 4: Content & Languages
+
+## STEP GOAL:
+
+Specify all text content in all supported languages for every text element on the page.
+
+## 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 gathering multilingual content for all text elements
+- 🚫 FORBIDDEN to skip languages or text elements
+- 💬 Approach: Gather primary language first, then suggest translations
+- 📋 Cover labels, buttons, headings, messages, placeholders, error text
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Identify supported languages, then gather content for each text element
+- 💾 Store multilingual content keyed by element and language
+- 📖 Reference component list for all text elements
+- 🚫 FORBIDDEN to proceed with incomplete language coverage
+
+## CONTEXT BOUNDARIES:
+
+- Available context: page_basics, layout_sections, components with Object IDs
+- Focus: Text content in all languages
+- Limits: Do not define interactions yet (next step)
+- Dependencies: All components must be documented
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Identify Languages
+
+<ask>**What languages does this page support?**
+
+List all languages (e.g., English, Swedish, Spanish):</ask>
+
+<action>Store supported_languages array</action>
+
+### 2. Gather Content
+
+<output>**Now let's specify all text content.**
+
+We'll go through each text element and provide content in all {{language_count}} languages.</output>
+
+<action>For each text element (labels, buttons, headings, messages):
+<ask>**{{element_name}}:**
+
+{{#each language}}
+
+- {{language}}:
+  {{/each}}
+  </ask>
+
+<action>Store multilingual content for element</action>
+</action>
+
+<output>**Content specified in all languages!**
+
+**Languages:** {{languages_list}}
+**Text elements:** {{text_element_count}}
+
+**Next:** We'll define interactions and behaviors.</output>
+
+### 3. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Interactions | [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](#3-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 text content has been specified in all languages will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- All supported languages identified
+- All text elements have content in every language
+- Multilingual content stored and organized
+
+### ❌ SYSTEM FAILURE:
+
+- Missing languages for any text element
+- Generating translations without user confirmation
+- Skipping text elements
+- Proceeding with incomplete language coverage
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-05-interactions.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-05-interactions.md
@@ -0,0 +1,121 @@
+---
+name: 'step-05-interactions'
+description: 'Define what happens when users interact with each component'
+
+# File References
+nextStepFile: './step-06-states.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 5: Interactions
+
+## STEP GOAL:
+
+Define what happens when users interact with each component — clicks, inputs, focus events, navigation, and data operations.
+
+## 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 interaction behaviors for each interactive component
+- 🚫 FORBIDDEN to define visual states yet (next step)
+- 💬 Approach: For each component, explore all interaction types
+- 📋 Cover click, input, focus, blur, hover, navigation, and data events
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Walk through each interactive component and define behaviors
+- 💾 Store interaction_behavior for each component
+- 📖 Reference component Object IDs for organization
+- 🚫 FORBIDDEN to skip interactive components
+
+## CONTEXT BOUNDARIES:
+
+- Available context: All previous step data including components with Object IDs
+- Focus: Interaction behaviors only
+- Limits: Do not define visual states (next step)
+- Dependencies: Components must be documented with Object IDs
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Interactions
+
+<output>**Let's define all interactions.**
+
+For each interactive element, we'll specify what happens when users interact with it.</output>
+
+<action>For each component with Object ID:
+<ask>**{{object_id}}** ({{element_type}})
+
+What happens when the user interacts with this?
+
+- On click / on input / on focus?
+- What's the immediate response?
+- What state changes occur?
+- Where does it navigate (if applicable)?
+- What data is sent/received?
+  </ask>
+
+<action>Store interaction_behavior for component</action>
+</action>
+
+<output>**Interactions defined!**
+
+**Components with behaviors:** {{interactive_count}}
+
+**Next:** We'll define all possible states.</output>
+
+### 2. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to States | [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](#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
+
+## CRITICAL STEP COMPLETION NOTE
+
+ONLY WHEN the user selects an option from the menu and all interaction behaviors have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- All interactive components have defined behaviors
+- Interaction types covered (click, input, focus, navigation, data)
+- Behaviors stored per component Object ID
+
+### ❌ SYSTEM FAILURE:
+
+- Skipping interactive components
+- Generating behaviors without user input
+- Missing interaction types for components
+- Proceeding with incomplete interaction definitions
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-06-states.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-06-states.md
@@ -0,0 +1,149 @@
+---
+name: 'step-06-states'
+description: 'Define all possible page and component states'
+
+# File References
+nextStepFile: './step-07-validation.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 6: States
+
+## STEP GOAL:
+
+Define all possible page-level and component-level states — how the page and each component appear in different situations.
+
+## 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 both page-level states AND component-level states
+- 🚫 FORBIDDEN to define validation rules yet (next step)
+- 💬 Approach: Page states first, then component states
+- 📋 Cover default, empty, loading, error, success, hover, focus, disabled states
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Define page-level states first, then component-level states
+- 💾 Store page_states and component_states
+- 📖 Reference interactions for state trigger context
+- 🚫 FORBIDDEN to skip components with multiple states
+
+## CONTEXT BOUNDARIES:
+
+- Available context: All previous step data including interactions
+- Focus: Visual and behavioral states
+- Limits: Do not define validation rules (next step)
+- Dependencies: Interactions must be defined
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Page-Level States
+
+<output>**Let's define all possible states.**
+
+States show how the page and components appear in different situations.</output>
+
+<ask>**What are the different page-level states?**
+
+Think about:
+
+- Default/loaded state
+- Empty state (no data)
+- Loading state (fetching data)
+- Error state (something went wrong)
+- Success state (after action completes)
+
+For each state, describe:
+
+- When it occurs
+- What the user sees
+- What actions are available</ask>
+
+<action>Store page_states with descriptions</action>
+
+### 2. Define Component States
+
+<output>**Now let's define component states.**
+
+For components with multiple appearances, we'll specify each state.</output>
+
+<action>For components with multiple states:
+<ask>**{{object_id}}** states:
+
+- Default:
+- Hover:
+- Active/Pressed:
+- Focus:
+- Disabled:
+- Loading:
+- Error:
+- Success:
+
+(Only specify states that apply to this component)</ask>
+
+<action>Store component_states</action>
+</action>
+
+<output>**All states defined!**
+
+**Page states:** {{page_state_count}}
+**Component states:** {{component_state_count}}
+
+**Next:** We'll define validation rules.</output>
+
+### 3. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Validation | [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](#3-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 states have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- Page-level states defined (default, empty, loading, error, success)
+- Component-level states defined for all multi-state components
+- State triggers and appearances documented
+- All states stored
+
+### ❌ SYSTEM FAILURE:
+
+- Skipping page-level states
+- Missing component states for multi-state components
+- Generating states without user input
+- Proceeding with incomplete state definitions
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-07-validation.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-07-validation.md
@@ -0,0 +1,149 @@
+---
+name: 'step-07-validation'
+description: 'Define all validation rules and error messages for form fields and inputs'
+
+# File References
+nextStepFile: './step-08-spacing-typography.md'
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 7: Validation & Errors
+
+## STEP GOAL:
+
+Define all validation rules and error messages for form fields and inputs, with multilingual error messages.
+
+## 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 validation rules and multilingual error messages
+- 🚫 FORBIDDEN to generate the specification yet (next step)
+- 💬 Approach: Identify validated fields, define rules, then error messages
+- 📋 Error messages must be in all supported languages
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Identify fields needing validation, define rules, create error messages
+- 💾 Store validation_rules and error_messages per field
+- 📖 Reference supported_languages for error message translations
+- 🚫 FORBIDDEN to skip error message translations
+
+## CONTEXT BOUNDARIES:
+
+- Available context: All previous step data including states
+- Focus: Validation rules and error messages
+- Limits: Do not generate the full specification yet (next step)
+- Dependencies: States must be defined
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Define Validation Rules
+
+<output>**Let's define validation rules and error messages.**
+
+This ensures users get helpful feedback.</output>
+
+<ask>**What fields or inputs need validation?**
+
+For each field, specify:
+
+- What makes it valid?
+- What makes it invalid?
+- When is it validated? (on blur, on submit, real-time?)</ask>
+
+<action>For each validated field:
+<ask>**{{field_name}}** validation:
+
+- Required: yes/no
+- Format rules:
+- Length limits:
+- Custom rules:
+- Validation timing:
+  </ask>
+
+<action>Store validation_rules for field</action>
+</action>
+
+### 2. Define Error Messages
+
+<output>**Now let's define error messages for each validation failure.**
+
+We'll provide messages in all supported languages.</output>
+
+<action>For each validation rule:
+<ask>**Error message when {{rule_name}} fails:**
+
+{{#each language}}
+
+- {{language}}:
+  {{/each}}
+
+Error code (e.g., ERR_EMAIL_INVALID):
+</ask>
+
+<action>Store error_message with code and translations</action>
+</action>
+
+<output>**Validation and errors defined!**
+
+**Validated fields:** {{validated_field_count}}
+**Error messages:** {{error_message_count}}
+
+**Next:** We'll define the invisible layer — spacing and typography.</output>
+
+### 3. Present MENU OPTIONS
+
+Display: "**Select an Option:** [C] Continue to Spacing & Typography | [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](#3-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 validation rules and error messages have been defined will you proceed to the next step or return as directed.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- All validated fields identified with rules
+- Error messages defined in all supported languages
+- Error codes assigned
+- Validation timing specified
+
+### ❌ SYSTEM FAILURE:
+
+- Missing validation rules for input fields
+- Error messages not translated to all languages
+- Missing error codes
+- Generating rules without user input
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-08-spacing-typography.md
+++ b/_bmad/wds/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.
--- a/_bmad/wds/workflows/4-ux-design/steps-p/step-09-generate-spec.md
+++ b/_bmad/wds/workflows/4-ux-design/steps-p/step-09-generate-spec.md
@@ -0,0 +1,138 @@
+---
+name: 'step-09-generate-spec'
+description: 'Compile all gathered information into the complete page specification document'
+
+# File References
+workflowFile: '../workflow.md'
+activityWorkflowFile: '../workflow-specify.md'
+---
+
+# Step 9: Generate Specification Document
+
+## STEP GOAL:
+
+Compile all gathered information from steps 1-8 into the complete page specification document using the specification template.
+
+## 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 compiling all data into the specification template
+- 🚫 FORBIDDEN to skip any data section from previous steps
+- 💬 Approach: Generate, then present summary for confirmation
+- 📋 This is the final step in the Specify activity — the last step in the chain
+
+## EXECUTION PROTOCOLS:
+
+- 🎯 Generate complete specification using the page-specification template
+- 💾 Save specification to the correct output location
+- 📖 Reference all data from steps 1-8
+- 🚫 FORBIDDEN to generate with missing data sections
+
+## CONTEXT BOUNDARIES:
+
+- 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
+
+## Sequence of Instructions (Do not deviate, skip, or optimize)
+
+### 1. Generate Specification
+
+<output>**Excellent! We've gathered everything we need.**
+
+Now I'll compile it all into your complete page specification.</output>
+
+<action>Generate specification document using template at `templates/page-specification.template.md`
+
+Fill in all sections with data collected:
+
+- page_basics (from step 01)
+- layout_sections (from step 02)
+- components with object_ids (from step 03)
+- multilingual_content (from step 04)
+- 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:
+`{output_folder}/C-UX-Scenarios/{scenario}/{page}/{page}.md`
+</action>
+
+<output>**Complete specification generated!**
+
+**Saved to:** `C-UX-Scenarios/{scenario}/{page}/{page}.md`
+
+**What we documented:**
+
+- Page basics and routing
+- {{section_count}} layout sections
+- {{component_count}} components with Object IDs
+- Content in {{language_count}} languages
+- {{interaction_count}} interaction behaviors
+- {{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!**</output>
+
+### 2. Update Design Log
+
+<action>Append a row with status `specified` to the Design Loop Status table in `{output_folder}/_progress/00-design-log.md`:
+
+```
+| [Scenario slug] | [NN.X] | [Page name] | specified | [YYYY-MM-DD] |
+```
+
+Do NOT skip this. The design log drives the adaptive dashboard.</action>
+
+### 3. Return to Calling Step
+
+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
+
+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.
+
+---
+
+## 🚨 SYSTEM SUCCESS/FAILURE METRICS
+
+### ✅ SUCCESS:
+
+- Specification generated using the template
+- All data sections from steps 1-8 included
+- Document saved to correct output location
+- Summary presented to user with metrics
+- Specification is development-ready
+
+### ❌ SYSTEM FAILURE:
+
+- Missing data sections in the generated specification
+- Not using the specification template
+- Not saving to the correct location
+- Generating with incomplete data
+- Not presenting summary to user
+
+**Master Rule:** Skipping steps, optimizing sequences, or not following exact instructions is FORBIDDEN and constitutes SYSTEM FAILURE.