bmad-enhanced 1.0.0-alpha

package/_bmad/bme/_designos/workflows/wireframe/steps/step-05-components.md

@@ -0,0 +1,128 @@
+---
+step: 5
+workflow: wireframe
+title: Components & Interactions
+---
+
+# Step 5: Components & Interactions
+
+Let's specify UI components, their states, and interactive behaviors.
+
+## Component Library
+
+Document which components are used:
+
+**Buttons:**
+- Primary CTA (main action)
+- Secondary (supporting action)
+- Tertiary/Text (less emphasis)
+
+**Input Controls:**
+- Text fields, dropdowns, checkboxes, radio buttons, toggles
+
+**Data Display:**
+- Cards, lists, tables, grids
+
+**Feedback:**
+- Toasts, alerts, modals, bottom sheets
+
+**Progress:**
+- Spinners, progress bars, skeleton screens
+
+## Interaction Specifications
+
+### Tap/Click Interactions
+```
+Element X → Action Y
+Example:
+- Tap "Transfer" button → Navigate to Transfer screen
+- Tap transaction item → Show transaction details modal
+- Pull to refresh → Reload balance and transactions
+```
+
+### Gestures (Mobile)
+```
+- Swipe left on transaction → Delete (with confirmation)
+- Swipe right on transaction → Mark as reviewed
+- Long press → Show context menu
+- Pinch to zoom → (if applicable)
+```
+
+### Keyboard (Desktop)
+```
+- Tab → Navigate between fields
+- Enter → Submit/Next
+- Esc → Cancel/Close modal
+```
+
+## Component States
+
+For each interactive component, define:
+
+**Button States:**
+- Default (idle)
+- Hover (desktop)
+- Pressed/Active
+- Disabled (greyed out)
+- Loading (spinner)
+
+**Input Field States:**
+- Empty (placeholder visible)
+- Focused (cursor visible, border highlighted)
+- Filled (user input present)
+- Error (validation failed, show error message)
+- Disabled
+
+**Screen States:**
+- Loading (skeleton/spinner)
+- Empty (no data, show empty state illustration)
+- Error (failed to load, show retry button)
+- Success (data loaded, normal display)
+
+## Responsive Breakpoints
+
+### Mobile (320px - 767px)
+- Single column layout
+- Stack buttons vertically
+- Bottom navigation
+
+### Tablet (768px - 1023px)
+- Two-column layout possible
+- Buttons side-by-side
+- Bottom or side navigation
+
+### Desktop (1024px+)
+- Multi-column layouts
+- Sidebar navigation
+- Hover states visible
+
+## Example
+
+```
+[Components Used]
+1. Button (Primary)
+   - Elements: "Transfer", "Pay Bills", "Deposit"
+   - Size: 100×48px, Border radius: 8px
+   - States: Default, Pressed, Disabled, Loading
+
+2. Transaction List Item
+   - Layout: [Icon 32×32] [Name + Amount] [Arrow →]
+   - Height: 64px
+   - Tap → Transaction detail screen
+   - Swipe left → Delete with confirmation
+
+[Interactions]
+- Tap balance → Account details screen
+- Tap quick action → Respective flow
+- Pull to refresh → Reload (with spinner)
+- Swipe transaction → Delete/Archive
+
+[Responsive]
+- Mobile (375px): Single column, stacked
+- Tablet (768px): Two columns for quick actions
+- Desktop (1024px+): Sidebar + main content
+```
+
+## Next Step
+
+{project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-06-synthesize.md

package/_bmad/bme/_designos/workflows/wireframe/steps/step-06-synthesize.md

@@ -0,0 +1,83 @@
+---
+step: 6
+workflow: wireframe
+title: Synthesize
+---
+
+# Step 6: Synthesize
+
+Time to bring it all together and create the final wireframe artifact!
+
+## Why This Matters
+
+We've gathered requirements, mapped user flows, designed information architecture, sketched wireframes, and specified components. Now we synthesize everything into a professional wireframe document that designers and developers can use.
+
+## What I'll Create
+
+Using the template at `wireframe.template.md`, I'll generate your complete wireframe artifact with:
+
+1. **Executive Summary** - Key design decisions at a glance
+2. **Requirements** - What we're solving for
+3. **User Flows** - How users navigate
+4. **Information Architecture** - Content organization
+5. **Wireframe Sketches** - ASCII art layouts
+6. **Component Specifications** - Detailed component specs
+7. **Interaction Design** - Behaviors and states
+8. **Responsive Breakpoints** - Adaptive layouts
+9. **Accessibility Notes** - WCAG compliance
+10. **Design Rationale** - Why these decisions?
+11. **Next Steps** - Handoff to high-fidelity design
+
+## Output Location
+
+**File:** `{output_folder}/wireframe-{screen-name}-{date}.md`
+
+Example: `wireframe-dashboard-home-2026-02-15.md`
+
+## Before I Generate
+
+Let me review all the information we've gathered:
+
+### Requirements Checklist
+- [ ] Screen name and platform defined
+- [ ] Target user identified
+- [ ] Primary action clear
+- [ ] Constraints documented
+
+### Flow Checklist
+- [ ] Entry points mapped
+- [ ] Happy path defined
+- [ ] Alternative flows considered
+- [ ] Exit points clear
+
+### Architecture Checklist
+- [ ] Visual hierarchy established
+- [ ] Content grouped logically
+- [ ] Navigation patterns defined
+
+### Wireframe Checklist
+- [ ] ASCII sketch created
+- [ ] Grid system followed
+- [ ] Component placements clear
+
+### Components Checklist
+- [ ] All components identified
+- [ ] Interactions specified
+- [ ] States documented
+- [ ] Responsive behavior defined
+
+## Your Turn
+
+Please confirm you're ready for me to generate the final wireframe artifact, or let me know if we need to revise any section.
+
+## What's Next After This?
+
+Once I create your wireframe artifact, you can:
+
+1. **Validate with users** - Show the wireframe to users and get feedback
+2. **Share with team** - Get stakeholder alignment on structure
+3. **Create high-fidelity designs** - Use this as foundation for visual design
+4. **Prototype** - Build interactive prototype from wireframe
+5. **Develop** - Hand off to developers with clear specifications
+
+Great work! This wireframe will be a solid foundation for your design and development. 🎨

package/_bmad/bme/_designos/workflows/wireframe/wireframe.template.md

@@ -0,0 +1,287 @@
+---
+artifact: wireframe
+version: 1.0.0
+created: {date}
+screen: {screen_name}
+platform: {platform}
+author: Wade (wireframe-designer)
+---
+
+# Wireframe: {screen_name}
+
+**Platform:** {platform}
+**Target User:** {target_user}
+**Created:** {date}
+**Designer:** Wade (wireframe-designer)
+
+---
+
+## Executive Summary
+
+**Screen Purpose:** {primary_action}
+
+**Key Design Decisions:**
+- {decision_1}
+- {decision_2}
+- {decision_3}
+
+**Target Breakpoints:**
+- Mobile: 375px (primary focus for mobile-first)
+- Tablet: 768px
+- Desktop: 1024px+
+
+**Accessibility Compliance:** WCAG 2.1 Level AA
+
+---
+
+## 1. Requirements
+
+### Screen Information
+- **Screen Name:** {screen_name}
+- **Platform:** {platform}
+- **Target User:** {target_user}
+- **Primary Action:** {primary_action}
+
+### Constraints
+{constraints}
+
+### Success Criteria
+{success_criteria}
+
+---
+
+## 2. User Flows
+
+### Entry Points
+{entry_points}
+
+### Happy Path
+{happy_path}
+
+### Alternative Flows
+{alternative_flows}
+
+### Exit Points
+{exit_points}
+
+---
+
+## 3. Information Architecture
+
+### Visual Hierarchy
+1. **Primary (Hero):** {primary_content}
+2. **Secondary (Supporting):** {secondary_content}
+3. **Tertiary (Metadata):** {tertiary_content}
+
+### Content Grouping
+{content_grouping}
+
+### Navigation Patterns
+{navigation_patterns}
+
+### Information Density
+- **Mobile:** {mobile_density}
+- **Desktop:** {desktop_density}
+
+---
+
+## 4. Wireframe Sketches
+
+### Mobile View (375px)
+
+```
+{mobile_wireframe_ascii}
+```
+
+**Annotations:**
+- {mobile_annotation_1}
+- {mobile_annotation_2}
+- {mobile_annotation_3}
+
+### Desktop View (1024px+)
+
+```
+{desktop_wireframe_ascii}
+```
+
+**Annotations:**
+- {desktop_annotation_1}
+- {desktop_annotation_2}
+- {desktop_annotation_3}
+
+---
+
+## 5. Component Specifications
+
+### Component Library
+
+{component_specifications}
+
+**Example Component Detail:**
+
+#### {component_name}
+- **Type:** {component_type}
+- **Location:** {component_location}
+- **Size:** {component_size}
+- **States:** {component_states}
+- **Behavior:** {component_behavior}
+
+---
+
+## 6. Interaction Design
+
+### Interactive Elements
+
+{interactive_elements}
+
+### States & Feedback
+
+{states_feedback}
+
+### Gestures & Input
+
+**Mobile:**
+- {mobile_gesture_1}
+- {mobile_gesture_2}
+
+**Desktop:**
+- {desktop_interaction_1}
+- {desktop_interaction_2}
+
+---
+
+## 7. Responsive Breakpoints
+
+### Breakpoint Strategy
+
+| Breakpoint | Width | Layout Changes |
+|------------|-------|----------------|
+| Mobile     | 375px | {mobile_layout_changes} |
+| Tablet     | 768px | {tablet_layout_changes} |
+| Desktop    | 1024px+ | {desktop_layout_changes} |
+
+### Adaptive Patterns
+{adaptive_patterns}
+
+---
+
+## 8. Accessibility Notes
+
+### WCAG 2.1 Compliance
+
+**Level AA Requirements:**
+- {accessibility_requirement_1}
+- {accessibility_requirement_2}
+- {accessibility_requirement_3}
+
+### Keyboard Navigation
+{keyboard_navigation}
+
+### Screen Reader Support
+{screen_reader_support}
+
+### Focus Management
+{focus_management}
+
+### Color Contrast
+{color_contrast_notes}
+
+---
+
+## 9. Design Rationale
+
+### Why This Layout?
+{layout_rationale}
+
+### Why This Information Hierarchy?
+{hierarchy_rationale}
+
+### Why These Components?
+{component_rationale}
+
+### Trade-offs Considered
+{tradeoffs}
+
+---
+
+## 10. Next Steps
+
+### For High-Fidelity Design
+- [ ] {hifi_step_1}
+- [ ] {hifi_step_2}
+- [ ] {hifi_step_3}
+
+### For Prototyping
+- [ ] {prototype_step_1}
+- [ ] {prototype_step_2}
+- [ ] {prototype_step_3}
+
+### For Development
+- [ ] {dev_step_1}
+- [ ] {dev_step_2}
+- [ ] {dev_step_3}
+
+### For User Testing
+- [ ] {testing_step_1}
+- [ ] {testing_step_2}
+- [ ] {testing_step_3}
+
+---
+
+## Appendix
+
+### Grid System
+- **Mobile:** 8pt grid, 16px margins
+- **Desktop:** 12-column grid, 24px gutters
+
+### Typography Scale
+- **H1:** 24-32px (Screen title)
+- **H2:** 20-24px (Section headers)
+- **Body:** 16px (Content text)
+- **Caption:** 12-14px (Metadata)
+
+### Spacing System
+- **XS:** 4px
+- **S:** 8px
+- **M:** 16px
+- **L:** 24px
+- **XL:** 32px
+- **XXL:** 48px
+
+### Component Heights
+- **Header:** 56-72px
+- **Bottom Navigation:** 48-72px
+- **Button:** 44-48px (mobile), 36-40px (desktop)
+- **Input Field:** 44-48px (mobile), 36-40px (desktop)
+- **List Item:** 56-72px
+
+---
+
+**Document Version:** 1.0.0
+**Last Updated:** {date}
+**Designer:** Wade (wireframe-designer)
+**Status:** Draft for Review
+
+---
+
+## Document Control
+
+**Change History:**
+
+| Version | Date | Changes | Author |
+|---------|------|---------|--------|
+| 1.0.0   | {date} | Initial wireframe created | Wade |
+
+**Approvals Required:**
+- [ ] Product Manager
+- [ ] UX Lead
+- [ ] Engineering Lead
+- [ ] Accessibility Specialist
+
+---
+
+**Questions or Feedback?**
+
+Contact the design team or leave comments in this document.
+
+Great work! This wireframe provides a solid foundation for your design and development. 🎨

package/_bmad/bme/_designos/workflows/wireframe/workflow.md

@@ -0,0 +1,44 @@
+---
+workflow: wireframe
+type: step-file
+description: Create wireframes through structured 6-step process
+author: Wade (wireframe-designer)
+---
+
+# Create Wireframe Workflow
+
+This workflow guides you through creating comprehensive wireframes for web or mobile applications.
+
+## What is a Wireframe?
+
+A wireframe is a low-fidelity visual representation of a user interface. It defines the structure, layout, and functionality of screens without focusing on visual design details like colors or fonts. Wireframes answer: Where am I? What can I do? Where can I go?
+
+## Workflow Structure
+
+**Step-file architecture:**
+- Just-in-time loading (each step loads only when needed)
+- Sequential enforcement (must complete step N before step N+1)
+- State tracking in frontmatter (progress preserved)
+
+## Steps Overview
+
+1. **Define Requirements** - What screen, platform, user, functionality?
+2. **User Flows** - How do users navigate? Entry → Goal → Exit
+3. **Information Architecture** - How is content organized and prioritized?
+4. **Wireframe Sketch** - Create layout using ASCII art and grids
+5. **Components & Interactions** - Specify UI components, states, behaviors
+6. **Synthesize** - Create the final wireframe artifact
+
+## Output
+
+**Artifact:** Wireframe markdown file in `{output_folder}/wireframe-{screen-name}-{date}.md`
+
+**Template:** Uses [wireframe.template.md](wireframe.template.md)
+
+---
+
+## INITIALIZATION
+
+Load config from {project-root}/_bmad/bme/_designos/config.yaml
+
+Load step: {project-root}/_bmad/bme/_designos/workflows/wireframe/steps/step-01-define-requirements.md