whiteport-design-studio 0.1.0

package/src/workflows/4-ux-design/modular-architecture/03-quick-refs/decision-tree.md

@@ -0,0 +1,67 @@
+# Content Placement Decision Tree
+
+**One-page flowchart for file placement**
+
+---
+
+## The Decision Tree
+
+```
+┌─────────────────────────────────────────────────┐
+│  Does CONTENT vary by page context?             │
+│  (text, images, data source)                    │
+└────────────┬────────────────────────────────────┘
+             │
+      ┌──────┴──────┐
+      │             │
+     YES            NO
+      │             │
+      ▼             ▼
+┌─────────────┐  ┌──────────────┐
+│ Page File   │  │ Feature File │
+│             │  │              │
+│ Document:   │  │ Document:    │
+│ - Headings  │  │ - Generic    │
+│ - Text      │  │   content    │
+│ - Images    │  │ - Default    │
+│ - Data API  │  │   config     │
+│ - Scope     │  │              │
+└─────────────┘  └──────────────┘
+```
+
+---
+
+## Examples
+
+**Page File (Content Varies):**
+
+- ✅ Hero heading: "Welcome" (Home) vs "About" (About)
+- ✅ Search placeholder: "Search products..." vs "Search help..."
+- ✅ Calendar header: "Familjen Svensson: Vecka 40" (user's family)
+- ✅ Data API: `/api/families/:currentFamilyId/walks` (user-specific)
+
+**Feature File (Content Same Everywhere):**
+
+- ✅ Button text: "Submit" (always the same)
+- ✅ Error message: "Invalid email" (generic validation)
+- ✅ Tooltip: "Click to expand" (generic interaction)
+- ✅ Data API: `/api/products` (same for all users)
+
+---
+
+## Visual Design?
+
+```
+Is this VISUAL design (colors, spacing, states)?
+│
+└─ YES → Component File
+         (Colors, typography, layout, states)
+```
+
+---
+
+## Quick Rule
+
+- **Page File** = WHERE + WHAT (page-specific)
+- **Component File** = HOW IT LOOKS (visual design)
+- **Feature File** = WHAT IT DOES (functionality + generic content)

package/src/workflows/4-ux-design/modular-architecture/validation-report-modular-architecture.md

@@ -0,0 +1,220 @@
+---
+validationDate: 2026-01-22
+workflowName: modular-architecture
+workflowPath: c:\dev\WDS\bmad-method-wds-expansion\src\workflows\4-ux-design\modular-architecture
+validationStatus: COMPLETE
+overallStatus: PASS - FIXED
+criticalIssues: 1
+criticalIssuesFixed: 1
+warnings: 0
+---
+
+# Validation Report: Modular Architecture
+
+**Validation Started:** 2026-01-22
+**Validator:** Wendy - BMAD Workflow Validation System
+**Standards Version:** BMAD v6 Workflow Standards
+
+---
+
+## Classification
+
+**Type:** Reference Guide Collection
+**Status:** This is NOT a workflow - it's architecture documentation
+
+---
+
+## File Structure
+
+### Current Structure
+
+```
+modular-architecture/
+├── 00-MODULAR-ARCHITECTURE-GUIDE.md (72 lines) - Navigation hub
+├── 00-foundation/
+│   └── agent-designer-collaboration.md (262 lines)
+├── 01-core-concepts/
+│   ├── complexity-detection.md
+│   ├── content-placement-rules.md
+│   └── three-tier-overview.md
+├── 02-workflows/
+│   ├── complexity-router-workflow.md
+│   ├── page-specification-workflow.md
+│   ├── storyboards-guide.md
+│   └── [storyboard substeps]
+└── 03-quick-refs/
+    ├── benefits.md
+    └── decision-tree.md
+```
+
+**Analysis:**
+- ❌ No workflow.md (but needed as entry point)
+- ✅ Well-organized documentation structure
+- ✅ Clear numbering and hierarchy
+- ✅ Comprehensive architecture guides
+
+---
+
+## What This Is
+
+**Purpose:** Reference documentation for three-tier modular component architecture
+
+**Content:**
+1. **Foundation** - Agent-designer collaboration philosophy
+2. **Core Concepts** - Three-tier architecture, content placement, complexity detection
+3. **Workflows** - Page specification, complexity routing, storyboards
+4. **Quick Refs** - Decision trees and benefits summary
+
+**Nature:** Static reference material guiding architectural decisions
+
+---
+
+## BMAD v6 Workflow Validation
+
+### Is This a Workflow?
+
+**NO.** This is an architecture guide collection.
+
+**Characteristics of a workflow:**
+- ❌ Step-by-step execution sequence
+- ❌ Agent instructions for automated/guided process
+- ❌ State tracking and progression
+- ❌ Input → Processing → Output flow
+
+**Characteristics of this content:**
+- ✅ Architecture documentation
+- ✅ Decision frameworks
+- ✅ Best practices and guidelines
+- ✅ Reference material for design work
+
+**Conclusion:** This should have workflow.md as entry point to guide navigation
+
+---
+
+## BMAD v6 Standards Compliance
+
+### ❌ CRITICAL ISSUE: Missing workflow.md
+
+**Problem:** Entry point is `00-MODULAR-ARCHITECTURE-GUIDE.md` instead of `workflow.md`
+
+**BMAD v6 Requirement:** Every workflow folder needs `workflow.md` as entry point
+
+**Impact:** Workflow loader cannot find entry point
+
+**Fix Required:** Create workflow.md that serves as navigation hub
+
+---
+
+## Recommendation
+
+### Create workflow.md (Recommended)
+
+**Action:** Create workflow.md as reference-style entry point
+
+**Content:**
+- Overview of modular architecture system
+- When to use these guides
+- Navigation to all sections
+- Quick reference for common questions
+
+**Structure:**
+```
+modular-architecture/
+├── workflow.md (entry point) ✅
+├── 00-foundation/ (existing docs)
+├── 01-core-concepts/ (existing docs)
+├── 02-workflows/ (existing docs)
+└── 03-quick-refs/ (existing docs)
+```
+
+**Benefits:**
+- Proper BMAD v6 entry point
+- User-friendly navigation
+- Maintains existing organization
+- Reference-style workflow pattern
+
+---
+
+## Summary
+
+**Validation Date:** 2026-01-22
+**Content Type:** Architecture Guide Collection
+**Overall Status:** ⚠️ **MISSING ENTRY POINT**
+
+### Key Findings
+
+**✅ Content Quality:**
+- Well-organized architecture documentation
+- Clear hierarchical structure
+- Comprehensive coverage of three-tier system
+- Good separation of concerns (foundation, concepts, workflows, refs)
+- Valuable design guidance
+
+**⚠️ Structure Issue:**
+- Missing workflow.md entry point
+- Has 00-MODULAR-ARCHITECTURE-GUIDE.md but not standard entry point
+
+**🎯 Conclusion:**
+This is **high-quality architecture documentation** that needs a **workflow.md entry point** for BMAD v6 compliance.
+
+**Recommended Action:**
+Create workflow.md as navigation hub for architecture guides
+
+**Priority:** Medium - Content is excellent, just needs proper entry point
+
+---
+
+**Audit Completed:** 2026-01-22
+**Classification:** Architecture Reference Material
+
+---
+
+## UPDATE: FIXED (2026-01-22)
+
+**Issue:** Missing workflow.md entry point
+
+**Resolution:** Created reference-style workflow entry point
+
+### Changes Made:
+
+1. ✅ **Created workflow.md** (entry point)
+   - Overview of three-tier architecture system
+   - When to use these guides
+   - Navigation to all four sections
+   - Quick decision framework
+   - Integration with WDS design process
+
+2. ✅ **Preserved existing structure**
+   - Kept 00-MODULAR-ARCHITECTURE-GUIDE.md as detailed index
+   - Maintained folder organization (00-foundation, 01-core-concepts, etc.)
+   - No changes to existing documentation
+   - workflow.md provides higher-level entry
+
+### New Structure:
+
+```
+modular-architecture/
+├── workflow.md (entry point) ✅
+├── 00-MODULAR-ARCHITECTURE-GUIDE.md (detailed navigation)
+├── 00-foundation/
+│   └── agent-designer-collaboration.md
+├── 01-core-concepts/
+│   ├── complexity-detection.md
+│   ├── content-placement-rules.md
+│   └── three-tier-overview.md
+├── 02-workflows/
+│   ├── complexity-router-workflow.md
+│   ├── page-specification-workflow.md
+│   └── storyboards-guide.md
+└── 03-quick-refs/
+    ├── benefits.md
+    └── decision-tree.md
+```
+
+**New Status:** ✅ PASS - Properly structured reference-style workflow
+
+**Note:** This remains a guide collection but now has proper workflow.md structure for user navigation and BMAD v6 compliance.
+
+---
+
+_Generated by Wendy - BMAD Workflow Validation System_

package/src/workflows/4-ux-design/modular-architecture/workflow.md

@@ -0,0 +1,289 @@
+---
+name: Modular Component Architecture
+description: Reference guides for three-tier specification system (Pages, Components, Features)
+web_bundle: true
+---
+
+# Modular Component Architecture
+
+**Goal:** Understand and apply three-tier architecture for component specification
+
+**Your Role:** Architecture reference for designing modular, maintainable component systems
+
+---
+
+## OVERVIEW
+
+This is a **guide collection** for three-tier modular architecture, not a step-by-step workflow.
+
+**Three-Tier System:**
+- **Pages** - Full page layouts and compositions
+- **Components** - Reusable UI elements (simple and complex)
+- **Features** - Complex component decompositions
+
+**Purpose:** Separate concerns, reduce duplication, enable modularity
+
+---
+
+## WHEN TO USE
+
+**Use these guides when:**
+- ✅ Writing page specifications
+- ✅ Decomposing complex components
+- ✅ Deciding where to document content
+- ✅ Need to understand component complexity
+- ✅ Want to optimize agent-designer collaboration
+
+**Skip these guides when:**
+- ❌ Building simple prototypes without specs
+- ❌ Already familiar with the architecture
+- ❌ Using different specification system
+
+---
+
+## THE FOUR SECTIONS
+
+### 00. Foundation
+
+**[Agent-Designer Collaboration](00-foundation/agent-designer-collaboration.md)**
+
+How AI agents optimize designer craft without replacing designer thinking.
+
+**Use when:** Understanding the philosophy behind modular architecture
+
+**Topics:**
+- Designer maintains creative control
+- AI handles decomposition and optimization
+- Collaborative workflow patterns
+
+---
+
+### 01. Core Concepts
+
+Three fundamental concepts of the architecture:
+
+**[Three-Tier Overview](01-core-concepts/three-tier-overview.md)**
+- Overview of Pages, Components, and Features separation
+- When to use each tier
+- Benefits of separation
+
+**[Content Placement Rules](01-core-concepts/content-placement-rules.md)**
+- Decision tree for where to document content
+- Simple vs complex component rules
+- Page-specific vs shared content
+
+**[Complexity Detection](01-core-concepts/complexity-detection.md)**
+- How to identify simple vs complex components
+- When to decompose further
+- Complexity indicators
+
+**Use when:** Learning the architecture or making placement decisions
+
+---
+
+### 02. Workflows
+
+Practical workflows for applying the architecture:
+
+**[Page Specification Workflow](02-workflows/page-specification-workflow.md)**
+- Step-by-step page decomposition from sketch to specs
+- Extracting components from page layouts
+- Handling page-specific content
+
+**[Complexity Router Workflow](02-workflows/complexity-router-workflow.md)**
+- Guided decomposition for complex components
+- When to create feature folders
+- Substep breakdown patterns
+
+**[Storyboards Guide](02-workflows/storyboards-guide.md)**
+- Using visual storyboards for complex components
+- State documentation
+- Interaction flows
+
+**Use when:** Actively creating specifications
+
+---
+
+### 03. Quick References
+
+Fast lookup guides for common questions:
+
+**[Decision Tree](03-quick-refs/decision-tree.md)**
+- One-page flowchart for file placement
+- Quick decision making
+- Common scenarios
+
+**[Benefits Summary](03-quick-refs/benefits.md)**
+- Why this architecture works
+- Advantages of three-tier system
+- Problem it solves
+
+**Use when:** Need quick answers or reminders
+
+---
+
+## DETAILED NAVIGATION
+
+For comprehensive navigation of all guides and substeps:
+
+**[Modular Architecture Guide](00-MODULAR-ARCHITECTURE-GUIDE.md)**
+
+This provides detailed index of all files including examples and substeps.
+
+---
+
+## QUICK START
+
+### "Where do I document this component?"
+
+Start here: [Content Placement Rules](01-core-concepts/content-placement-rules.md)
+
+Then use: [Decision Tree](03-quick-refs/decision-tree.md)
+
+---
+
+### "How do I write a page specification?"
+
+Start here: [Page Specification Workflow](02-workflows/page-specification-workflow.md)
+
+Reference: [Three-Tier Overview](01-core-concepts/three-tier-overview.md)
+
+---
+
+### "When should I decompose a component?"
+
+Start here: [Complexity Detection](01-core-concepts/complexity-detection.md)
+
+Then use: [Complexity Router Workflow](02-workflows/complexity-router-workflow.md)
+
+---
+
+### "How do I document complex interactions?"
+
+Start here: [Storyboards Guide](02-workflows/storyboards-guide.md)
+
+Reference: [Complexity Router Workflow](02-workflows/complexity-router-workflow.md)
+
+---
+
+## INTEGRATION WITH WDS
+
+### During Page Specification Phase
+
+After sketching, before implementation:
+
+1. Review page sketch
+2. Apply [Page Specification Workflow](02-workflows/page-specification-workflow.md)
+3. Use [Content Placement Rules](01-core-concepts/content-placement-rules.md) for each component
+4. Document simple components inline
+5. Create feature folders for complex components
+6. Use [Complexity Router](02-workflows/complexity-router-workflow.md) for decomposition
+
+### During Prototype Implementation
+
+When building from specs:
+
+1. Read page specification
+2. Identify shared vs page-specific components
+3. Build modular component library
+4. Reference storyboards for complex interactions
+
+---
+
+## ARCHITECTURE BENEFITS
+
+**For Designers:**
+- ✅ Reduced duplication
+- ✅ Clear decision framework
+- ✅ Maintain creative control
+- ✅ Better AI collaboration
+
+**For Developers:**
+- ✅ Modular component structure
+- ✅ Clear implementation boundaries
+- ✅ Reusable components identified
+- ✅ Less ambiguity
+
+**For Teams:**
+- ✅ Consistent specification format
+- ✅ Scalable architecture
+- ✅ Easier maintenance
+- ✅ Better handoff quality
+
+---
+
+## KEY PRINCIPLES
+
+**1. Separation of Concerns**
+- Pages handle layout and composition
+- Components define reusable elements
+- Features decompose complex components
+
+**2. DRY (Don't Repeat Yourself)**
+- Define once, reference everywhere
+- Shared components in component library
+- Page-specific variants documented inline
+
+**3. Progressive Complexity**
+- Start simple
+- Decompose only when needed
+- Use complexity detection to guide decisions
+
+**4. Designer Agency**
+- AI assists but doesn't replace designer thinking
+- Designer makes final placement decisions
+- Architecture enables, doesn't constrain
+
+---
+
+## TROUBLESHOOTING
+
+### "I don't know if my component is complex enough to decompose"
+
+Use: [Complexity Detection](01-core-concepts/complexity-detection.md)
+
+Look for: Multiple states, conditional logic, nested interactions
+
+### "I'm not sure where to document this content"
+
+Use: [Decision Tree](03-quick-refs/decision-tree.md)
+
+Ask: Is it page-specific or shared? Simple or complex?
+
+### "The page specification feels too long"
+
+Use: [Complexity Router Workflow](02-workflows/complexity-router-workflow.md)
+
+Extract complex components to feature folders
+
+---
+
+## EXAMPLES
+
+Throughout the guides, you'll find examples:
+
+- **Simple Button** - Single file documentation
+- **Complex Calendar** - Three-tier decomposition
+- **Search Bar** - Page-specific content handling
+
+These demonstrate the architecture in practice.
+
+---
+
+## NOTES
+
+**This is architecture guidance** - not mandatory workflow steps.
+
+Apply as needed based on:
+- Project complexity
+- Team size
+- Specification requirements
+- Development process
+
+The architecture scales from small to large projects.
+
+**Start simple, add structure when needed.**
+
+---
+
+_Modular Component Architecture - Clear structure, better collaboration_