ma-agents 2.22.1 → 3.0.0

package/lib/bmad-cache/wds/src/workflows/wds-4-ux-design/templates/test-scenario.template.yaml

@@ -0,0 +1,192 @@
+# WDS Test Scenario Template
+# Save to: test-scenarios/TS-XXX-name.yaml
+
+test_scenario:
+  id: "TS-XXX" # Format: TS-001, TS-002, etc.
+  name: "Feature Testing" # Human-readable name
+  delivery_id: "DD-XXX" # Related Design Delivery
+  type: "user_acceptance" # user_acceptance | integration | e2e
+  status: "ready" # ready | in_progress | blocked
+  tester: "designer" # designer | qa | developer
+  created_at: "YYYY-MM-DDTHH:MM:SSZ"
+
+test_objectives:
+  - "Validate implementation matches design specifications"
+  - "Verify user flow is intuitive and smooth"
+  - "Confirm all edge cases are handled"
+  - "Ensure design system components are used correctly"
+  - "Test accessibility and usability"
+
+test_environment:
+  devices:
+    - "Device 1 (OS version)"
+    - "Device 2 (OS version)"
+
+  test_data:
+    - field: "value"
+    - field: "value"
+
+# Happy Path Tests
+happy_path:
+  - id: "HP-001"
+    name: "Main User Flow"
+    priority: "critical" # critical | high | medium | low
+
+    steps:
+      - action: "[User action]"
+        expected: "[Expected result]"
+        design_ref: "[Path to specification]#[section]"
+
+      - action: "[User action]"
+        expected: "[Expected result]"
+        design_ref: "[Path to specification]#[section]"
+
+    success_criteria:
+      - "[Success criterion 1]"
+      - "[Success criterion 2]"
+      - "[Success criterion 3]"
+
+# Error State Tests
+error_states:
+  - id: "ES-001"
+    name: "Error Scenario"
+    priority: "high"
+
+    steps:
+      - action: "[Action that triggers error]"
+      - expected: "[Expected error message]"
+      - expected: "[Expected recovery option]"
+      - design_ref: "[Path to specification]#[error-section]"
+
+    success_criteria:
+      - "[Error handling criterion 1]"
+      - "[Error handling criterion 2]"
+
+# Edge Case Tests
+edge_cases:
+  - id: "EC-001"
+    name: "Edge Case Scenario"
+    priority: "medium"
+
+    steps:
+      - action: "[Unusual action]"
+      - expected: "[Expected handling]"
+      - design_ref: "[Path to specification]#[edge-case-section]"
+
+    success_criteria:
+      - "[Edge case criterion 1]"
+
+# Design System Validation
+design_system_checks:
+  - id: "DS-001"
+    name: "Component Validation"
+    checks:
+      - component: "Component Name"
+        instances: ["Location 1", "Location 2"]
+        verify:
+          - "[Visual property 1]"
+          - "[Visual property 2]"
+          - "[State behavior 1]"
+        design_ref: "D-Design-System/path/to/component.md"
+
+# Accessibility Tests
+accessibility:
+  - id: "A11Y-001"
+    name: "Screen Reader Navigation"
+    priority: "high"
+
+    setup: "Enable screen reader (VoiceOver/TalkBack)"
+
+    steps:
+      - action: "[Navigate with screen reader]"
+      - verify:
+          - "[Accessibility check 1]"
+          - "[Accessibility check 2]"
+
+    success_criteria:
+      - "[Accessibility criterion 1]"
+      - "[Accessibility criterion 2]"
+
+# Usability Tests
+usability:
+  - id: "UX-001"
+    name: "First Impression"
+    type: "observational"
+
+    instructions: |
+      [Instructions for conducting usability test]
+
+    success_criteria:
+      - "[Usability criterion 1]"
+      - "[Usability criterion 2]"
+
+# Performance Tests
+performance:
+  - id: "PERF-001"
+    name: "Performance Check"
+
+    verify:
+      - "[Performance metric 1]"
+      - "[Performance metric 2]"
+
+    success_criteria:
+      - "[Performance target 1]"
+      - "[Performance target 2]"
+
+# Test Report Template
+report_template:
+  sections:
+    - name: "Test Summary"
+      fields:
+        - "Date tested"
+        - "Tester name"
+        - "Device tested"
+        - "Build version"
+        - "Overall result (Pass/Fail/Partial)"
+
+    - name: "Happy Path Results"
+      fields:
+        - "Test ID"
+        - "Result (Pass/Fail)"
+        - "Notes"
+        - "Screenshots"
+
+    - name: "Issues Found"
+      fields:
+        - "Issue ID"
+        - "Severity (Critical/High/Medium/Low)"
+        - "Description"
+        - "Steps to reproduce"
+        - "Expected vs Actual"
+        - "Screenshot/Video"
+        - "Design reference violated"
+
+    - name: "Design System Compliance"
+      fields:
+        - "Component"
+        - "Compliant (Yes/No)"
+        - "Deviations noted"
+
+    - name: "Recommendations"
+      fields:
+        - "What worked well"
+        - "What needs improvement"
+        - "Suggested changes"
+
+# Sign-off Criteria
+sign_off:
+  required_for_approval:
+    - "All critical tests pass"
+    - "No critical or high severity issues"
+    - "Design system compliance > 95%"
+    - "Accessibility tests pass"
+    - "Usability metrics meet targets"
+
+  designer_approval:
+    statement: |
+      I confirm that the implemented feature matches the design
+      specifications and meets the quality standards defined in
+      this test scenario.
+
+    signature: "________________"
+    date: "________________"

package/lib/bmad-cache/wds/src/workflows/wds-5-agentic-development/bmad-skill-manifest.yaml

@@ -0,0 +1 @@
+type: skill

package/lib/bmad-cache/wds/src/workflows/wds-5-agentic-development/templates/components/dev-mode.css

@@ -0,0 +1,164 @@
+/* ============================================================================
+   PROTOTYPE DEV MODE STYLES
+   
+   Styles for developer/feedback mode that allows copying Object IDs
+   
+   Usage: Include these styles in your prototype HTML or CSS file
+   ============================================================================ */
+
+/* Dev Mode Toggle Button */
+.dev-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 9999;
+    background: #fff;
+    border: 2px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 10px 16px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: 500;
+    color: #6b7280;
+}
+
+.dev-mode-toggle:hover {
+    background: #f9fafb;
+    border-color: #d1d5db;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.dev-mode-toggle.active {
+    background: #0066CC;
+    border-color: #0066CC;
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);
+}
+
+.dev-mode-toggle svg {
+    flex-shrink: 0;
+}
+
+/* Dev Mode Active State */
+body.dev-mode-active {
+    cursor: help !important; /* Show help cursor to indicate special mode */
+}
+
+/* Subtle element highlighting on hover (not Shift held) */
+body.dev-mode-active [id]:hover {
+    outline: 2px solid #6b7280 !important;
+    outline-offset: 2px !important;
+    box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.2) !important;
+}
+
+/* Active highlighting when Shift is held (ready to copy) */
+body.dev-mode-active.shift-held {
+    cursor: copy !important;
+}
+
+body.dev-mode-active.shift-held [id]:hover {
+    outline: 3px solid #10B981 !important;
+    outline-offset: 3px !important;
+    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0.4) !important;
+}
+
+/* Dev Mode Tooltip */
+.dev-mode-tooltip {
+    position: fixed;
+    background: #1F2937;
+    color: #fff;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-size: 13px;
+    font-weight: 600;
+    font-family: 'Courier New', monospace;
+    z-index: 10000;
+    pointer-events: none;
+    white-space: nowrap;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    transition: background 0.2s;
+}
+
+.dev-mode-tooltip::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: 8px;
+    width: 8px;
+    height: 8px;
+    background: inherit;
+    transform: rotate(45deg);
+}
+
+/* Disable only certain interactions when Shift is held in dev mode */
+body.dev-mode-active.shift-held button:not(#dev-mode-toggle),
+body.dev-mode-active.shift-held input,
+body.dev-mode-active.shift-held select,
+body.dev-mode-active.shift-held textarea,
+body.dev-mode-active.shift-held a {
+    pointer-events: none !important;
+}
+
+/* But allow the toggle button to work */
+body.dev-mode-active #dev-mode-toggle,
+body.dev-mode-active #dev-mode-toggle * {
+    pointer-events: auto !important;
+    cursor: pointer !important;
+}
+
+/* Feedback overlay (created dynamically) */
+@keyframes fadeInOut {
+    0% { 
+        opacity: 0; 
+        transform: translate(-50%, -50%) scale(0.9); 
+    }
+    20% { 
+        opacity: 1; 
+        transform: translate(-50%, -50%) scale(1); 
+    }
+    80% { 
+        opacity: 1; 
+        transform: translate(-50%, -50%) scale(1); 
+    }
+    100% { 
+        opacity: 0; 
+        transform: translate(-50%, -50%) scale(0.9); 
+    }
+}
+
+/* Responsive: Adjust toggle button on mobile */
+@media (max-width: 768px) {
+    .dev-mode-toggle {
+        top: 10px;
+        right: 10px;
+        padding: 8px 12px;
+        font-size: 12px;
+    }
+    
+    .dev-mode-toggle span {
+        display: none; /* Hide text on mobile, show only icon */
+    }
+    
+    .dev-mode-toggle.active span {
+        display: inline; /* Show "ON" status */
+        max-width: 60px;
+    }
+}
+
+/* Optional: Add visual indicator when Shift is held */
+body.dev-mode-active.shift-held .dev-mode-toggle::after {
+    content: '⬆️';
+    margin-left: 4px;
+    animation: pulse 1s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: 0.7; transform: scale(1.1); }
+}
+

package/lib/bmad-cache/wds/src/workflows/wds-5-agentic-development/templates/components/dev-mode.html

@@ -0,0 +1,18 @@
+<!-- ============================================================================
+     PROTOTYPE DEV MODE - HTML SNIPPET
+     
+     Add this HTML to your prototype page (inside <body>, preferably at the top)
+     ============================================================================ -->
+
+<!-- Dev Mode Toggle Button (fixed position, top-right) -->
+<button id="dev-mode-toggle" class="dev-mode-toggle" title="Toggle Dev Mode (Ctrl+E)">
+    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
+        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
+    </svg>
+    <span>Dev Mode: OFF</span>
+</button>
+
+<!-- Dev Mode Tooltip (shown when hovering over elements in dev mode) -->
+<div id="dev-mode-tooltip" class="dev-mode-tooltip" style="display: none;"></div>
+