bmad-method 4.27.0 → 4.27.2

package/dist/agents/ux-expert.txt

@@ -50,6 +50,7 @@ activation-instructions:
   - Only read the files/tasks listed here when user selects them for execution to minimize context usage
   - The customization field ALWAYS takes precedence over any conflicting instructions
   - When listing tasks/templates or presenting options during conversations, always show as numbered options list, allowing the user to type a number to select or execute
+  - Greet the user with your name and role, and inform of the *help command.
 agent:
   name: Sally
   id: ux-expert
@@ -71,9 +72,6 @@ persona:
     - You have a keen eye for detail and a deep empathy for users.
     - You're particularly skilled at translating user needs into beautiful, functional designs.
     - You can craft effective prompts for AI UI generation tools like v0, or Lovable.
-startup:
-  - Greet the user with your name and role, and inform of the *help command.
-  - Always start by understanding the user's context, goals, and constraints before proposing solutions.
 commands:
   - help: Show numbered list of the following commands to allow selection
   - create-doc {template}: execute task create-doc (no template = ONLY show available templates listed under dependencies/templates below)
@@ -83,16 +81,14 @@ commands:
   - exit: Say goodbye as the UX Expert, and then abandon inhabiting this persona
 dependencies:
   tasks:
-    - generate-ai-frontend-prompt
-    - create-deep-research-prompt
-    - create-doc
-    - execute-checklist
+    - generate-ai-frontend-prompt.md
+    - create-deep-research-prompt.md
+    - create-doc.md
+    - execute-checklist.md
   templates:
-    - front-end-spec-tmpl
+    - front-end-spec-tmpl.yaml
   data:
-    - technical-preferences
-  utils:
-    - template-format
+    - technical-preferences.md
 ```
 ==================== END: .bmad-core/agents/ux-expert.md ====================
 
@@ -455,97 +451,85 @@ Present these numbered options to the user:
 ==================== END: .bmad-core/tasks/create-deep-research-prompt.md ====================
 
 ==================== START: .bmad-core/tasks/create-doc.md ====================
-# Create Document from Template Task
-
-## Purpose
+# Create Document from Template (YAML Driven)
 
-Generate documents from templates by EXECUTING (not just reading) embedded instructions from the perspective of the selected agent persona.
+## CRITICAL: Mandatory Elicitation Format
 
-## CRITICAL RULES
+**When `elicit: true`, ALWAYS use this exact format:**
 
-1. **Templates are PROGRAMS** - Execute every [[LLM:]] instruction exactly as written
-2. **NEVER show markup** - Hide all [[LLM:]], {{placeholders}}, @{examples}, and template syntax
-3. **STOP and EXECUTE** - When you see "apply tasks#" or "execute tasks#", STOP and run that task immediately
-4. **WAIT for user input** - At review points and after elicitation tasks
+1. Present section content
+2. Provide detailed rationale (explain trade-offs, assumptions, decisions made)
+3. Present numbered options 1-9:
+   - **Option 1:** Always "Proceed to next section"
+   - **Options 2-9:** Select 8 methods from data/elicitation-methods
+   - End with: "Select 1-9 or just type your question/feedback:"
 
-## Execution Flow
+**NEVER ask yes/no questions or use any other format.**
 
-### 0. Check Workflow Plan (if configured)
+## Processing Flow
 
-[[LLM: Check if plan tracking is enabled in core-config.yaml]]
+1. **Parse YAML template** - Load template metadata and sections
+2. **Set preferences** - Show current mode (Interactive), confirm output file
+3. **Process each section:**
+   - Skip if condition unmet
+   - Check agent permissions (owner/editors) - note if section is restricted to specific agents
+   - Draft content using section instruction
+   - Present content + detailed rationale
+   - **IF elicit: true** → MANDATORY 1-9 options format
+   - Save to file if possible
+4. **Continue until complete**
 
-- If `workflow.trackProgress: true`, check for active plan using .bmad-core/utils/plan-management.md
-- If plan exists and this document creation is part of the plan:
-  - Verify this is the expected next step
-  - If out of sequence and `enforceSequence: true`, warn user and halt without user override
-  - If out of sequence and `enforceSequence: false`, ask for confirmation
-- Continue with normal execution after plan check
+## Detailed Rationale Requirements
 
-### 1. Identify Template
+When presenting section content, ALWAYS include rationale that explains:
 
-- Load from `.bmad-core/templates/*.md` or `.bmad-core/templates directory`
-- Agent-specific templates are listed in agent's dependencies
-- If agent has `templates: [prd-tmpl, architecture-tmpl]` for example, then offer to create "PRD" and "Architecture" documents
+- Trade-offs and choices made (what was chosen over alternatives and why)
+- Key assumptions made during drafting
+- Interesting or questionable decisions that need user attention
+- Areas that might need validation
 
-### 2. Ask Interaction Mode
+## Elicitation Results Flow
 
-> 1. **Incremental** - Section by section with reviews
-> 2. **YOLO Mode** - Complete draft then review (user can type `/yolo` anytime to switch)
+After user selects elicitation method (2-9):
 
-### 3. Execute Template
+1. Execute method from data/elicitation-methods
+2. Present results with insights
+3. Offer options:
+   - **1. Apply changes and update section**
+   - **2. Return to elicitation menu**
+   - **3. Ask any questions or engage further with this elicitation**
 
-- Replace {{placeholders}} with real content
-- Execute [[LLM:]] instructions as you encounter them
-- Process <<REPEAT>> loops and ^^CONDITIONS^^
-- Use @{examples} for guidance but never output them
+## Agent Permissions
 
-### 4. Key Execution Patterns
+When processing sections with agent permission fields:
 
-**When you see:** `[[LLM: Draft X and immediately execute .bmad-core/tasks/advanced-elicitation.md]]`
+- **owner**: Note which agent role initially creates/populates the section
+- **editors**: List agent roles allowed to modify the section
+- **readonly**: Mark sections that cannot be modified after creation
 
-- Draft the content
-- Present it to user
-- IMMEDIATELY execute the task
-- Wait for completion before continuing
+**For sections with restricted access:**
 
-**When you see:** `[[LLM: After section completion, apply .bmad-core/tasks/Y.md]]`
+- Include a note in the generated document indicating the responsible agent
+- Example: "_(This section is owned by dev-agent and can only be modified by dev-agent)_"
 
-- Finish the section
-- STOP and execute the task
-- Wait for user input
+## YOLO Mode
 
-### 5. Validation & Final Presentation
+User can type `#yolo` to toggle to YOLO mode (process all sections at once).
 
-- Run any specified checklists
-- Present clean, formatted content only
-- No truncation or summarization
-- Begin directly with content (no preamble)
-- Include any handoff prompts from template
+## CRITICAL REMINDERS
 
-### 6. Update Workflow Plan (if applicable)
+**❌ NEVER:**
 
-[[LLM: After successful document creation]]
+- Ask yes/no questions for elicitation
+- Use any format other than 1-9 numbered options
+- Create new elicitation methods
 
-- If plan tracking is enabled and document was part of plan:
-  - Call update-workflow-plan task to mark step complete
-  - Parameters: task: create-doc, step_id: {from plan}, status: complete
-  - Show next recommended step from plan
+**✅ ALWAYS:**
 
-## Common Mistakes to Avoid
-
-❌ Skipping elicitation tasks
-❌ Showing template markup to users
-❌ Continuing past STOP signals
-❌ Combining multiple review points
-
-✅ Execute ALL instructions in sequence
-✅ Present only clean, formatted content
-✅ Stop at every elicitation point
-✅ Wait for user confirmation when instructed
-
-## Remember
-
-Templates contain precise instructions for a reason. Follow them exactly to ensure document quality and completeness.
+- Use exact 1-9 format when elicit: true
+- Select options 2-9 from data/elicitation-methods only
+- Provide detailed rationale explaining decisions
+- End with "Select 1-9 or just type your question/feedback:"
 ==================== END: .bmad-core/tasks/create-doc.md ====================
 
 ==================== START: .bmad-core/tasks/execute-checklist.md ====================
@@ -644,453 +628,360 @@ The LLM will:
 - Offer to provide detailed analysis of any section, especially those with warnings or failures
 ==================== END: .bmad-core/tasks/execute-checklist.md ====================
 
-==================== START: .bmad-core/templates/front-end-spec-tmpl.md ====================
-# {{Project Name}} UI/UX Specification
-
-[[LLM: The default path and filename unless specified is docs/front-end-spec.md]]
-
-[[LLM: Review provided documents including Project Brief, PRD, and any user research to gather context. Focus on understanding user needs, pain points, and desired outcomes before beginning the specification.]]
-
-## Introduction
-
-[[LLM: Establish the document's purpose and scope. Keep the content below but ensure project name is properly substituted.]]
-
-This document defines the user experience goals, information architecture, user flows, and visual design specifications for {{Project Name}}'s user interface. It serves as the foundation for visual design and frontend development, ensuring a cohesive and user-centered experience.
-
-### Overall UX Goals & Principles
-
-[[LLM: Work with the user to establish and document the following. If not already defined, facilitate a discussion to determine:
-
-1. Target User Personas - elicit details or confirm existing ones from PRD
-2. Key Usability Goals - understand what success looks like for users
-3. Core Design Principles - establish 3-5 guiding principles
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Target User Personas
-
-{{persona_descriptions}}
-
-@{example: personas}
-
-- **Power User:** Technical professionals who need advanced features and efficiency
-- **Casual User:** Occasional users who prioritize ease of use and clear guidance
-- **Administrator:** System managers who need control and oversight capabilities
-  @{/example}
-
-### Usability Goals
-
-{{usability_goals}}
-
-@{example: usability_goals}
-
-- Ease of learning: New users can complete core tasks within 5 minutes
-- Efficiency of use: Power users can complete frequent tasks with minimal clicks
-- Error prevention: Clear validation and confirmation for destructive actions
-- Memorability: Infrequent users can return without relearning
-  @{/example}
-
-### Design Principles
-
-{{design_principles}}
-
-@{example: design_principles}
-
-1. **Clarity over cleverness** - Prioritize clear communication over aesthetic innovation
-2. **Progressive disclosure** - Show only what's needed, when it's needed
-3. **Consistent patterns** - Use familiar UI patterns throughout the application
-4. **Immediate feedback** - Every action should have a clear, immediate response
-5. **Accessible by default** - Design for all users from the start
-   @{/example}
-
-### Change Log
-
-[[LLM: Track document versions and changes]]
-
-| Date | Version | Description | Author |
-| :--- | :------ | :---------- | :----- |
-
-## Information Architecture (IA)
-
-[[LLM: Collaborate with the user to create a comprehensive information architecture:
-
-1. Build a Site Map or Screen Inventory showing all major areas
-2. Define the Navigation Structure (primary, secondary, breadcrumbs)
-3. Use Mermaid diagrams for visual representation
-4. Consider user mental models and expected groupings
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Site Map / Screen Inventory
-
-```mermaid
-{{sitemap_diagram}}
-```
-
-@{example: sitemap}
-
-```mermaid
-graph TD
-    A[Homepage] --> B[Dashboard]
-    A --> C[Products]
-    A --> D[Account]
-    B --> B1[Analytics]
-    B --> B2[Recent Activity]
-    C --> C1[Browse]
-    C --> C2[Search]
-    C --> C3[Product Details]
-    D --> D1[Profile]
-    D --> D2[Settings]
-    D --> D3[Billing]
-```
-
-@{/example}
-
-### Navigation Structure
-
-**Primary Navigation:** {{primary_nav_description}}
-
-**Secondary Navigation:** {{secondary_nav_description}}
-
-**Breadcrumb Strategy:** {{breadcrumb_strategy}}
-
-## User Flows
-
-[[LLM: For each critical user task identified in the PRD:
-
-1. Define the user's goal clearly
-2. Map out all steps including decision points
-3. Consider edge cases and error states
-4. Use Mermaid flow diagrams for clarity
-5. Link to external tools (Figma/Miro) if detailed flows exist there
-
-Create subsections for each major flow. After presenting all flows, apply `tasks#advanced-elicitation` protocol]]
-
-<<REPEAT: user_flow>>
-
-### {{flow_name}}
-
-**User Goal:** {{flow_goal}}
-
-**Entry Points:** {{entry_points}}
-
-**Success Criteria:** {{success_criteria}}
-
-#### Flow Diagram
-
-```mermaid
-{{flow_diagram}}
-```
-
-**Edge Cases & Error Handling:**
-
-- {{edge_case_1}}
-- {{edge_case_2}}
-
-**Notes:** {{flow_notes}}
-<</REPEAT>>
-
-@{example: user_flow}
-
-### User Registration
-
-**User Goal:** Create a new account to access the platform
-
-**Entry Points:** Homepage CTA, Login page link, Marketing landing pages
-
-**Success Criteria:** User successfully creates account and reaches dashboard
-
-#### Flow Diagram
-
-```mermaid
-graph TD
-    Start[Landing Page] --> Click[Click Sign Up]
-    Click --> Form[Registration Form]
-    Form --> Fill[Fill Required Fields]
-    Fill --> Submit[Submit Form]
-    Submit --> Validate{Valid?}
-    Validate -->|No| Error[Show Errors]
-    Error --> Form
-    Validate -->|Yes| Verify[Email Verification]
-    Verify --> Complete[Account Created]
-    Complete --> Dashboard[Redirect to Dashboard]
-```
-
-**Edge Cases & Error Handling:**
-
-- Duplicate email: Show inline error with password recovery option
-- Weak password: Real-time feedback on password strength
-- Network error: Preserve form data and show retry option
-  @{/example}
-
-## Wireframes & Mockups
-
-[[LLM: Clarify where detailed visual designs will be created (Figma, Sketch, etc.) and how to reference them. If low-fidelity wireframes are needed, offer to help conceptualize layouts for key screens.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-**Primary Design Files:** {{design_tool_link}}
-
-### Key Screen Layouts
-
-<<REPEAT: screen_layout>>
-
-#### {{screen_name}}
-
-**Purpose:** {{screen_purpose}}
-
-**Key Elements:**
-
-- {{element_1}}
-- {{element_2}}
-- {{element_3}}
-
-**Interaction Notes:** {{interaction_notes}}
-
-**Design File Reference:** {{specific_frame_link}}
-<</REPEAT>>
-
-## Component Library / Design System
-
-[[LLM: Discuss whether to use an existing design system or create a new one. If creating new, identify foundational components and their key states. Note that detailed technical specs belong in front-end-architecture.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-**Design System Approach:** {{design_system_approach}}
-
-### Core Components
-
-<<REPEAT: component>>
-
-#### {{component_name}}
-
-**Purpose:** {{component_purpose}}
-
-**Variants:** {{component_variants}}
-
-**States:** {{component_states}}
-
-**Usage Guidelines:** {{usage_guidelines}}
-<</REPEAT>>
-
-@{example: component}
-
-#### Button
-
-**Purpose:** Primary interaction element for user actions
-
-**Variants:** Primary, Secondary, Tertiary, Destructive
-
-**States:** Default, Hover, Active, Disabled, Loading
-
-**Usage Guidelines:**
-
-- Use Primary for main CTAs (one per view)
-- Secondary for supporting actions
-- Destructive only for permanent deletions with confirmation
-  @{/example}
-
-## Branding & Style Guide
-
-[[LLM: Link to existing style guide or define key brand elements. Ensure consistency with company brand guidelines if they exist.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Visual Identity
-
-**Brand Guidelines:** {{brand_guidelines_link}}
-
-### Color Palette
-
-| Color Type    | Hex Code            | Usage                            |
-| :------------ | :------------------ | :------------------------------- |
-| **Primary**   | {{primary_color}}   | {{primary_usage}}                |
-| **Secondary** | {{secondary_color}} | {{secondary_usage}}              |
-| **Accent**    | {{accent_color}}    | {{accent_usage}}                 |
-| **Success**   | {{success_color}}   | Positive feedback, confirmations |
-| **Warning**   | {{warning_color}}   | Cautions, important notices      |
-| **Error**     | {{error_color}}     | Errors, destructive actions      |
-| **Neutral**   | {{neutral_colors}}  | Text, borders, backgrounds       |
-
-### Typography
-
-**Font Families:**
-
-- **Primary:** {{primary_font}}
-- **Secondary:** {{secondary_font}}
-- **Monospace:** {{mono_font}}
-
-**Type Scale:**
-| Element | Size | Weight | Line Height |
-|:--------|:-----|:-------|:------------|
-| H1 | {{h1_size}} | {{h1_weight}} | {{h1_line}} |
-| H2 | {{h2_size}} | {{h2_weight}} | {{h2_line}} |
-| H3 | {{h3_size}} | {{h3_weight}} | {{h3_line}} |
-| Body | {{body_size}} | {{body_weight}} | {{body_line}} |
-| Small | {{small_size}} | {{small_weight}} | {{small_line}} |
-
-### Iconography
-
-**Icon Library:** {{icon_library}}
-
-**Usage Guidelines:** {{icon_guidelines}}
-
-### Spacing & Layout
-
-**Grid System:** {{grid_system}}
-
-**Spacing Scale:** {{spacing_scale}}
-
-## Accessibility Requirements
-
-[[LLM: Define specific accessibility requirements based on target compliance level and user needs. Be comprehensive but practical.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Compliance Target
-
-**Standard:** {{compliance_standard}}
-
-### Key Requirements
-
-**Visual:**
-
-- Color contrast ratios: {{contrast_requirements}}
-- Focus indicators: {{focus_requirements}}
-- Text sizing: {{text_requirements}}
-
-**Interaction:**
-
-- Keyboard navigation: {{keyboard_requirements}}
-- Screen reader support: {{screen_reader_requirements}}
-- Touch targets: {{touch_requirements}}
-
-**Content:**
-
-- Alternative text: {{alt_text_requirements}}
-- Heading structure: {{heading_requirements}}
-- Form labels: {{form_requirements}}
-
-### Testing Strategy
-
-{{accessibility_testing}}
-
-## Responsiveness Strategy
-
-[[LLM: Define breakpoints and adaptation strategies for different device sizes. Consider both technical constraints and user contexts.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Breakpoints
-
-| Breakpoint | Min Width       | Max Width       | Target Devices      |
-| :--------- | :-------------- | :-------------- | :------------------ |
-| Mobile     | {{mobile_min}}  | {{mobile_max}}  | {{mobile_devices}}  |
-| Tablet     | {{tablet_min}}  | {{tablet_max}}  | {{tablet_devices}}  |
-| Desktop    | {{desktop_min}} | {{desktop_max}} | {{desktop_devices}} |
-| Wide       | {{wide_min}}    | -               | {{wide_devices}}    |
-
-### Adaptation Patterns
-
-**Layout Changes:** {{layout_adaptations}}
-
-**Navigation Changes:** {{nav_adaptations}}
-
-**Content Priority:** {{content_adaptations}}
-
-**Interaction Changes:** {{interaction_adaptations}}
-
-## Animation & Micro-interactions
-
-[[LLM: Define motion design principles and key interactions. Keep performance and accessibility in mind.
-
-After presenting this section, apply `tasks#advanced-elicitation` protocol]]
-
-### Motion Principles
-
-{{motion_principles}}
-
-### Key Animations
-
-<<REPEAT: animation>>
-
-- **{{animation_name}}:** {{animation_description}} (Duration: {{duration}}, Easing: {{easing}})
-  <</REPEAT>>
-
-## Performance Considerations
-
-[[LLM: Define performance goals and strategies that impact UX design decisions.]]
-
-### Performance Goals
-
-- **Page Load:** {{load_time_goal}}
-- **Interaction Response:** {{interaction_goal}}
-- **Animation FPS:** {{animation_goal}}
-
-### Design Strategies
-
-{{performance_strategies}}
-
-## Next Steps
-
-[[LLM: After completing the UI/UX specification:
-
-1. Recommend review with stakeholders
-2. Suggest creating/updating visual designs in design tool
-3. Prepare for handoff to Design Architect for frontend architecture
-4. Note any open questions or decisions needed]]
-
-### Immediate Actions
-
-1. {{next_step_1}}
-2. {{next_step_2}}
-3. {{next_step_3}}
-
-### Design Handoff Checklist
-
-- [ ] All user flows documented
-- [ ] Component inventory complete
-- [ ] Accessibility requirements defined
-- [ ] Responsive strategy clear
-- [ ] Brand guidelines incorporated
-- [ ] Performance goals established
-
-## Checklist Results
-
-[[LLM: If a UI/UX checklist exists, run it against this document and report results here.]]
-==================== END: .bmad-core/templates/front-end-spec-tmpl.md ====================
+==================== START: .bmad-core/templates/front-end-spec-tmpl.yaml ====================
+template:
+  id: frontend-spec-template-v2
+  name: UI/UX Specification
+  version: 2.0
+  output:
+    format: markdown
+    filename: docs/front-end-spec.md
+    title: "{{project_name}} UI/UX Specification"
+
+workflow:
+  mode: interactive
+  elicitation: advanced-elicitation
+
+sections:
+  - id: introduction
+    title: Introduction
+    instruction: |
+      Review provided documents including Project Brief, PRD, and any user research to gather context. Focus on understanding user needs, pain points, and desired outcomes before beginning the specification.
+      
+      Establish the document's purpose and scope. Keep the content below but ensure project name is properly substituted.
+    content: |
+      This document defines the user experience goals, information architecture, user flows, and visual design specifications for {{project_name}}'s user interface. It serves as the foundation for visual design and frontend development, ensuring a cohesive and user-centered experience.
+    sections:
+      - id: ux-goals-principles
+        title: Overall UX Goals & Principles
+        instruction: |
+          Work with the user to establish and document the following. If not already defined, facilitate a discussion to determine:
+          
+          1. Target User Personas - elicit details or confirm existing ones from PRD
+          2. Key Usability Goals - understand what success looks like for users
+          3. Core Design Principles - establish 3-5 guiding principles
+        elicit: true
+        sections:
+          - id: user-personas
+            title: Target User Personas
+            template: "{{persona_descriptions}}"
+            examples:
+              - "**Power User:** Technical professionals who need advanced features and efficiency"
+              - "**Casual User:** Occasional users who prioritize ease of use and clear guidance"
+              - "**Administrator:** System managers who need control and oversight capabilities"
+          - id: usability-goals
+            title: Usability Goals
+            template: "{{usability_goals}}"
+            examples:
+              - "Ease of learning: New users can complete core tasks within 5 minutes"
+              - "Efficiency of use: Power users can complete frequent tasks with minimal clicks"
+              - "Error prevention: Clear validation and confirmation for destructive actions"
+              - "Memorability: Infrequent users can return without relearning"
+          - id: design-principles
+            title: Design Principles
+            template: "{{design_principles}}"
+            type: numbered-list
+            examples:
+              - "**Clarity over cleverness** - Prioritize clear communication over aesthetic innovation"
+              - "**Progressive disclosure** - Show only what's needed, when it's needed"
+              - "**Consistent patterns** - Use familiar UI patterns throughout the application"
+              - "**Immediate feedback** - Every action should have a clear, immediate response"
+              - "**Accessible by default** - Design for all users from the start"
+      - id: changelog
+        title: Change Log
+        type: table
+        columns: [Date, Version, Description, Author]
+        instruction: Track document versions and changes
+
+  - id: information-architecture
+    title: Information Architecture (IA)
+    instruction: |
+      Collaborate with the user to create a comprehensive information architecture:
+      
+      1. Build a Site Map or Screen Inventory showing all major areas
+      2. Define the Navigation Structure (primary, secondary, breadcrumbs)
+      3. Use Mermaid diagrams for visual representation
+      4. Consider user mental models and expected groupings
+    elicit: true
+    sections:
+      - id: sitemap
+        title: Site Map / Screen Inventory
+        type: mermaid
+        mermaid_type: graph
+        template: "{{sitemap_diagram}}"
+        examples:
+          - |
+            graph TD
+                A[Homepage] --> B[Dashboard]
+                A --> C[Products]
+                A --> D[Account]
+                B --> B1[Analytics]
+                B --> B2[Recent Activity]
+                C --> C1[Browse]
+                C --> C2[Search]
+                C --> C3[Product Details]
+                D --> D1[Profile]
+                D --> D2[Settings]
+                D --> D3[Billing]
+      - id: navigation-structure
+        title: Navigation Structure
+        template: |
+          **Primary Navigation:** {{primary_nav_description}}
+          
+          **Secondary Navigation:** {{secondary_nav_description}}
+          
+          **Breadcrumb Strategy:** {{breadcrumb_strategy}}
+
+  - id: user-flows
+    title: User Flows
+    instruction: |
+      For each critical user task identified in the PRD:
+      
+      1. Define the user's goal clearly
+      2. Map out all steps including decision points
+      3. Consider edge cases and error states
+      4. Use Mermaid flow diagrams for clarity
+      5. Link to external tools (Figma/Miro) if detailed flows exist there
+      
+      Create subsections for each major flow.
+    elicit: true
+    repeatable: true
+    sections:
+      - id: flow
+        title: "{{flow_name}}"
+        template: |
+          **User Goal:** {{flow_goal}}
+          
+          **Entry Points:** {{entry_points}}
+          
+          **Success Criteria:** {{success_criteria}}
+        sections:
+          - id: flow-diagram
+            title: Flow Diagram
+            type: mermaid
+            mermaid_type: graph
+            template: "{{flow_diagram}}"
+          - id: edge-cases
+            title: "Edge Cases & Error Handling:"
+            type: bullet-list
+            template: "- {{edge_case}}"
+          - id: notes
+            template: "**Notes:** {{flow_notes}}"
+
+  - id: wireframes-mockups
+    title: Wireframes & Mockups
+    instruction: |
+      Clarify where detailed visual designs will be created (Figma, Sketch, etc.) and how to reference them. If low-fidelity wireframes are needed, offer to help conceptualize layouts for key screens.
+    elicit: true
+    sections:
+      - id: design-files
+        template: "**Primary Design Files:** {{design_tool_link}}"
+      - id: key-screen-layouts
+        title: Key Screen Layouts
+        repeatable: true
+        sections:
+          - id: screen
+            title: "{{screen_name}}"
+            template: |
+              **Purpose:** {{screen_purpose}}
+              
+              **Key Elements:**
+              - {{element_1}}
+              - {{element_2}}
+              - {{element_3}}
+              
+              **Interaction Notes:** {{interaction_notes}}
+              
+              **Design File Reference:** {{specific_frame_link}}
+
+  - id: component-library
+    title: Component Library / Design System
+    instruction: |
+      Discuss whether to use an existing design system or create a new one. If creating new, identify foundational components and their key states. Note that detailed technical specs belong in front-end-architecture.
+    elicit: true
+    sections:
+      - id: design-system-approach
+        template: "**Design System Approach:** {{design_system_approach}}"
+      - id: core-components
+        title: Core Components
+        repeatable: true
+        sections:
+          - id: component
+            title: "{{component_name}}"
+            template: |
+              **Purpose:** {{component_purpose}}
+              
+              **Variants:** {{component_variants}}
+              
+              **States:** {{component_states}}
+              
+              **Usage Guidelines:** {{usage_guidelines}}
+
+  - id: branding-style
+    title: Branding & Style Guide
+    instruction: Link to existing style guide or define key brand elements. Ensure consistency with company brand guidelines if they exist.
+    elicit: true
+    sections:
+      - id: visual-identity
+        title: Visual Identity
+        template: "**Brand Guidelines:** {{brand_guidelines_link}}"
+      - id: color-palette
+        title: Color Palette
+        type: table
+        columns: ["Color Type", "Hex Code", "Usage"]
+        rows:
+          - ["Primary", "{{primary_color}}", "{{primary_usage}}"]
+          - ["Secondary", "{{secondary_color}}", "{{secondary_usage}}"]
+          - ["Accent", "{{accent_color}}", "{{accent_usage}}"]
+          - ["Success", "{{success_color}}", "Positive feedback, confirmations"]
+          - ["Warning", "{{warning_color}}", "Cautions, important notices"]
+          - ["Error", "{{error_color}}", "Errors, destructive actions"]
+          - ["Neutral", "{{neutral_colors}}", "Text, borders, backgrounds"]
+      - id: typography
+        title: Typography
+        sections:
+          - id: font-families
+            title: Font Families
+            template: |
+              - **Primary:** {{primary_font}}
+              - **Secondary:** {{secondary_font}}
+              - **Monospace:** {{mono_font}}
+          - id: type-scale
+            title: Type Scale
+            type: table
+            columns: ["Element", "Size", "Weight", "Line Height"]
+            rows:
+              - ["H1", "{{h1_size}}", "{{h1_weight}}", "{{h1_line}}"]
+              - ["H2", "{{h2_size}}", "{{h2_weight}}", "{{h2_line}}"]
+              - ["H3", "{{h3_size}}", "{{h3_weight}}", "{{h3_line}}"]
+              - ["Body", "{{body_size}}", "{{body_weight}}", "{{body_line}}"]
+              - ["Small", "{{small_size}}", "{{small_weight}}", "{{small_line}}"]
+      - id: iconography
+        title: Iconography
+        template: |
+          **Icon Library:** {{icon_library}}
+          
+          **Usage Guidelines:** {{icon_guidelines}}
+      - id: spacing-layout
+        title: Spacing & Layout
+        template: |
+          **Grid System:** {{grid_system}}
+          
+          **Spacing Scale:** {{spacing_scale}}
+
+  - id: accessibility
+    title: Accessibility Requirements
+    instruction: Define specific accessibility requirements based on target compliance level and user needs. Be comprehensive but practical.
+    elicit: true
+    sections:
+      - id: compliance-target
+        title: Compliance Target
+        template: "**Standard:** {{compliance_standard}}"
+      - id: key-requirements
+        title: Key Requirements
+        template: |
+          **Visual:**
+          - Color contrast ratios: {{contrast_requirements}}
+          - Focus indicators: {{focus_requirements}}
+          - Text sizing: {{text_requirements}}
+          
+          **Interaction:**
+          - Keyboard navigation: {{keyboard_requirements}}
+          - Screen reader support: {{screen_reader_requirements}}
+          - Touch targets: {{touch_requirements}}
+          
+          **Content:**
+          - Alternative text: {{alt_text_requirements}}
+          - Heading structure: {{heading_requirements}}
+          - Form labels: {{form_requirements}}
+      - id: testing-strategy
+        title: Testing Strategy
+        template: "{{accessibility_testing}}"
+
+  - id: responsiveness
+    title: Responsiveness Strategy
+    instruction: Define breakpoints and adaptation strategies for different device sizes. Consider both technical constraints and user contexts.
+    elicit: true
+    sections:
+      - id: breakpoints
+        title: Breakpoints
+        type: table
+        columns: ["Breakpoint", "Min Width", "Max Width", "Target Devices"]
+        rows:
+          - ["Mobile", "{{mobile_min}}", "{{mobile_max}}", "{{mobile_devices}}"]
+          - ["Tablet", "{{tablet_min}}", "{{tablet_max}}", "{{tablet_devices}}"]
+          - ["Desktop", "{{desktop_min}}", "{{desktop_max}}", "{{desktop_devices}}"]
+          - ["Wide", "{{wide_min}}", "-", "{{wide_devices}}"]
+      - id: adaptation-patterns
+        title: Adaptation Patterns
+        template: |
+          **Layout Changes:** {{layout_adaptations}}
+          
+          **Navigation Changes:** {{nav_adaptations}}
+          
+          **Content Priority:** {{content_adaptations}}
+          
+          **Interaction Changes:** {{interaction_adaptations}}
+
+  - id: animation
+    title: Animation & Micro-interactions
+    instruction: Define motion design principles and key interactions. Keep performance and accessibility in mind.
+    elicit: true
+    sections:
+      - id: motion-principles
+        title: Motion Principles
+        template: "{{motion_principles}}"
+      - id: key-animations
+        title: Key Animations
+        repeatable: true
+        template: "- **{{animation_name}}:** {{animation_description}} (Duration: {{duration}}, Easing: {{easing}})"
+
+  - id: performance
+    title: Performance Considerations
+    instruction: Define performance goals and strategies that impact UX design decisions.
+    sections:
+      - id: performance-goals
+        title: Performance Goals
+        template: |
+          - **Page Load:** {{load_time_goal}}
+          - **Interaction Response:** {{interaction_goal}}
+          - **Animation FPS:** {{animation_goal}}
+      - id: design-strategies
+        title: Design Strategies
+        template: "{{performance_strategies}}"
+
+  - id: next-steps
+    title: Next Steps
+    instruction: |
+      After completing the UI/UX specification:
+      
+      1. Recommend review with stakeholders
+      2. Suggest creating/updating visual designs in design tool
+      3. Prepare for handoff to Design Architect for frontend architecture
+      4. Note any open questions or decisions needed
+    sections:
+      - id: immediate-actions
+        title: Immediate Actions
+        type: numbered-list
+        template: "{{action}}"
+      - id: design-handoff-checklist
+        title: Design Handoff Checklist
+        type: checklist
+        items:
+          - "All user flows documented"
+          - "Component inventory complete"
+          - "Accessibility requirements defined"
+          - "Responsive strategy clear"
+          - "Brand guidelines incorporated"
+          - "Performance goals established"
+
+  - id: checklist-results
+    title: Checklist Results
+    instruction: If a UI/UX checklist exists, run it against this document and report results here.
+==================== END: .bmad-core/templates/front-end-spec-tmpl.yaml ====================
 
 ==================== START: .bmad-core/data/technical-preferences.md ====================
 # User-Defined Preferred Patterns and Preferences
 
 None Listed
 ==================== END: .bmad-core/data/technical-preferences.md ====================
-
-==================== START: .bmad-core/utils/template-format.md ====================
-# Template Format Conventions
-
-Templates in the BMad method use standardized markup for AI processing. These conventions ensure consistent document generation.
-
-## Template Markup Elements
-
-- **{{placeholders}}**: Variables to be replaced with actual content
-- **[[LLM: instructions]]**: Internal processing instructions for AI agents (never shown to users)
-- **REPEAT** sections: Content blocks that may be repeated as needed
-- **^^CONDITION^^** blocks: Conditional content included only if criteria are met
-- **@{examples}**: Example content for guidance (never output to users)
-
-## Processing Rules
-
-- Replace all {{placeholders}} with project-specific content
-- Execute all [[LLM: instructions]] internally without showing users
-- Process conditional and repeat blocks as specified
-- Use examples for guidance but never include them in final output
-- Present only clean, formatted content to users
-
-## Critical Guidelines
-
-- **NEVER display template markup, LLM instructions, or examples to users**
-- Template elements are for AI processing only
-- Focus on faithful template execution and clean output
-- All template-specific instructions are embedded within templates
-==================== END: .bmad-core/utils/template-format.md ====================