appiq-solution 1.4.3 → 1.4.4

package/bmad-core/templates/front-end-spec-tmpl.yaml

@@ -0,0 +1,349 @@
+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.