appiq-solution 1.2.0 → 1.3.0

package/#Tools/APPIQ-METHOD/deployment/build/bmad-core/templates/front-end-architecture-tmpl.yaml

@@ -0,0 +1,206 @@
+template:
+  id: frontend-architecture-template-v2
+  name: Frontend Architecture Document
+  version: 2.0
+  output:
+    format: markdown
+    filename: docs/ui-architecture.md
+    title: "{{project_name}} Frontend Architecture Document"
+
+workflow:
+  mode: interactive
+  elicitation: advanced-elicitation
+
+sections:
+  - id: template-framework-selection
+    title: Template and Framework Selection
+    instruction: |
+      Review provided documents including PRD, UX-UI Specification, and main Architecture Document. Focus on extracting technical implementation details needed for AI frontend tools and developer agents. Ask the user for any of these documents if you are unable to locate and were not provided.
+      
+      Before proceeding with frontend architecture design, check if the project is using a frontend starter template or existing codebase:
+      
+      1. Review the PRD, main architecture document, and brainstorming brief for mentions of:
+         - Frontend starter templates (e.g., Create React App, Next.js, Vite, Vue CLI, Angular CLI, etc.)
+         - UI kit or component library starters
+         - Existing frontend projects being used as a foundation
+         - Admin dashboard templates or other specialized starters
+         - Design system implementations
+      
+      2. If a frontend starter template or existing project is mentioned:
+         - Ask the user to provide access via one of these methods:
+           - Link to the starter template documentation
+           - Upload/attach the project files (for small projects)
+           - Share a link to the project repository
+         - Analyze the starter/existing project to understand:
+           - Pre-installed dependencies and versions
+           - Folder structure and file organization
+           - Built-in components and utilities
+           - Styling approach (CSS modules, styled-components, Tailwind, etc.)
+           - State management setup (if any)
+           - Routing configuration
+           - Testing setup and patterns
+           - Build and development scripts
+         - Use this analysis to ensure your frontend architecture aligns with the starter's patterns
+      
+      3. If no frontend starter is mentioned but this is a new UI, ensure we know what the ui language and framework is:
+         - Based on the framework choice, suggest appropriate starters:
+           - React: Create React App, Next.js, Vite + React
+           - Vue: Vue CLI, Nuxt.js, Vite + Vue
+           - Angular: Angular CLI
+           - Or suggest popular UI templates if applicable
+         - Explain benefits specific to frontend development
+      
+      4. If the user confirms no starter template will be used:
+         - Note that all tooling, bundling, and configuration will need manual setup
+         - Proceed with frontend architecture from scratch
+      
+      Document the starter template decision and any constraints it imposes before proceeding.
+    sections:
+      - id: changelog
+        title: Change Log
+        type: table
+        columns: [Date, Version, Description, Author]
+        instruction: Track document versions and changes
+
+  - id: frontend-tech-stack
+    title: Frontend Tech Stack
+    instruction: Extract from main architecture's Technology Stack Table. This section MUST remain synchronized with the main architecture document.
+    elicit: true
+    sections:
+      - id: tech-stack-table
+        title: Technology Stack Table
+        type: table
+        columns: [Category, Technology, Version, Purpose, Rationale]
+        instruction: Fill in appropriate technology choices based on the selected framework and project requirements.
+        rows:
+          - ["Framework", "{{framework}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["UI Library", "{{ui_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["State Management", "{{state_management}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Routing", "{{routing_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Build Tool", "{{build_tool}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Styling", "{{styling_solution}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Testing", "{{test_framework}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Component Library", "{{component_lib}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Form Handling", "{{form_library}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Animation", "{{animation_lib}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+          - ["Dev Tools", "{{dev_tools}}", "{{version}}", "{{purpose}}", "{{why_chosen}}"]
+
+  - id: project-structure
+    title: Project Structure
+    instruction: Define exact directory structure for AI tools based on the chosen framework. Be specific about where each type of file goes. Generate a structure that follows the framework's best practices and conventions.
+    elicit: true
+    type: code
+    language: plaintext
+
+  - id: component-standards
+    title: Component Standards
+    instruction: Define exact patterns for component creation based on the chosen framework.
+    elicit: true
+    sections:
+      - id: component-template
+        title: Component Template
+        instruction: Generate a minimal but complete component template following the framework's best practices. Include TypeScript types, proper imports, and basic structure.
+        type: code
+        language: typescript
+      - id: naming-conventions
+        title: Naming Conventions
+        instruction: Provide naming conventions specific to the chosen framework for components, files, services, state management, and other architectural elements.
+
+  - id: state-management
+    title: State Management
+    instruction: Define state management patterns based on the chosen framework.
+    elicit: true
+    sections:
+      - id: store-structure
+        title: Store Structure
+        instruction: Generate the state management directory structure appropriate for the chosen framework and selected state management solution.
+        type: code
+        language: plaintext
+      - id: state-template
+        title: State Management Template
+        instruction: Provide a basic state management template/example following the framework's recommended patterns. Include TypeScript types and common operations like setting, updating, and clearing state.
+        type: code
+        language: typescript
+
+  - id: api-integration
+    title: API Integration
+    instruction: Define API service patterns based on the chosen framework.
+    elicit: true
+    sections:
+      - id: service-template
+        title: Service Template
+        instruction: Provide an API service template that follows the framework's conventions. Include proper TypeScript types, error handling, and async patterns.
+        type: code
+        language: typescript
+      - id: api-client-config
+        title: API Client Configuration
+        instruction: Show how to configure the HTTP client for the chosen framework, including authentication interceptors/middleware and error handling.
+        type: code
+        language: typescript
+
+  - id: routing
+    title: Routing
+    instruction: Define routing structure and patterns based on the chosen framework.
+    elicit: true
+    sections:
+      - id: route-configuration
+        title: Route Configuration
+        instruction: Provide routing configuration appropriate for the chosen framework. Include protected route patterns, lazy loading where applicable, and authentication guards/middleware.
+        type: code
+        language: typescript
+
+  - id: styling-guidelines
+    title: Styling Guidelines
+    instruction: Define styling approach based on the chosen framework.
+    elicit: true
+    sections:
+      - id: styling-approach
+        title: Styling Approach
+        instruction: Describe the styling methodology appropriate for the chosen framework (CSS Modules, Styled Components, Tailwind, etc.) and provide basic patterns.
+      - id: global-theme
+        title: Global Theme Variables
+        instruction: Provide a CSS custom properties (CSS variables) theme system that works across all frameworks. Include colors, spacing, typography, shadows, and dark mode support.
+        type: code
+        language: css
+
+  - id: testing-requirements
+    title: Testing Requirements
+    instruction: Define minimal testing requirements based on the chosen framework.
+    elicit: true
+    sections:
+      - id: component-test-template
+        title: Component Test Template
+        instruction: Provide a basic component test template using the framework's recommended testing library. Include examples of rendering tests, user interaction tests, and mocking.
+        type: code
+        language: typescript
+      - id: testing-best-practices
+        title: Testing Best Practices
+        type: numbered-list
+        items:
+          - "**Unit Tests**: Test individual components in isolation"
+          - "**Integration Tests**: Test component interactions"
+          - "**E2E Tests**: Test critical user flows (using Cypress/Playwright)"
+          - "**Coverage Goals**: Aim for 80% code coverage"
+          - "**Test Structure**: Arrange-Act-Assert pattern"
+          - "**Mock External Dependencies**: API calls, routing, state management"
+
+  - id: environment-configuration
+    title: Environment Configuration
+    instruction: List required environment variables based on the chosen framework. Show the appropriate format and naming conventions for the framework.
+    elicit: true
+
+  - id: frontend-developer-standards
+    title: Frontend Developer Standards
+    sections:
+      - id: critical-coding-rules
+        title: Critical Coding Rules
+        instruction: List essential rules that prevent common AI mistakes, including both universal rules and framework-specific ones.
+        elicit: true
+      - id: quick-reference
+        title: Quick Reference
+        instruction: |
+          Create a framework-specific cheat sheet with:
+          - Common commands (dev server, build, test)
+          - Key import patterns
+          - File naming conventions
+          - Project-specific patterns and utilities

package/#Tools/APPIQ-METHOD/deployment/build/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.