appiq-solution 1.4.8 → 1.5.0

package/#Tools/APPIQ-METHOD/bmad-core/templates/front-end-spec-tmpl.yaml

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