From de335ba5f794c14f1ddbb5e1fd6ef7b0912acecf Mon Sep 17 00:00:00 2001
From: DevForgeAI <121247296+DevForgeAI@users.noreply.github.com>
Date: Sun, 8 Jun 2025 05:54:56 -0400
Subject: [PATCH] Documentation Update

---
 docs/how-it-works/README.md                   |   4 +-
 docs/how-it-works/core-concepts.md            |  12 +-
 docs/how-it-works/integration-points.md       |  20 +-
 docs/how-it-works/orchestrator-mechanics.md   |  16 +-
 docs/how-it-works/persona-workflows.md        |  20 +-
 docs/system-architecture/README.md            |   4 +-
 .../component-architecture.md                 |   8 +-
 .../system-architecture/data-flow-diagrams.md |  24 +-
 .../deployment-architecture.md                |  28 +-
 docs/system-architecture/system-overview.md   |  20 +-
 docs/user-journeys/architecture-planning.md   |   8 +-
 docs/user-journeys/design-system-creation.md  |   8 +-
 docs/user-journeys/feature-development.md     |   8 +-
 docs/user-journeys/first-time-setup.md        |   8 +-
 docs/user-journeys/project-initiation.md      |   8 +-
 docs/visual-elements/README.md                |  36 +-
 docs/visual-elements/accessibility-guide.md   |  44 +-
 web-build-sample/agent-config.txt             |  14 +
 web-build-sample/checklists.txt               |  85 ++++
 web-build-sample/data.txt                     |   2 +
 web-build-sample/docs.txt                     |  83 ++++
 web-build-sample/examples.txt                 | 157 +++++++
 web-build-sample/personas.txt                 |  63 +++
 web-build-sample/tasks.txt                    | 297 +++++++++++-
 web-build-sample/templates.txt                | 436 ++++++++++++++----
 25 files changed, 1163 insertions(+), 250 deletions(-)
 create mode 100644 web-build-sample/docs.txt
 create mode 100644 web-build-sample/examples.txt

diff --git a/docs/how-it-works/README.md b/docs/how-it-works/README.md
index e9e44488..3dd65e64 100644
--- a/docs/how-it-works/README.md
+++ b/docs/how-it-works/README.md
@@ -35,7 +35,7 @@ The BMAD Method is a revolutionary AI-driven development approach that uses spec
 
 ## How It All Fits Together
 
-\```mermaid title="BMAD Method Overview" type="diagram"
+```mermaid title="BMAD Method Overview" type="diagram"
 graph TD
     A["User Request"] --> B["Orchestrator"]
     B --> C{["Analyze Request"]}
@@ -48,7 +48,7 @@ graph TD
     H -->|Yes| J["Update Context"]
     I --> E
     J --> K["Ready for Next Request"]
-\```
+```
 
 ## Environment Support
 
diff --git a/docs/how-it-works/core-concepts.md b/docs/how-it-works/core-concepts.md
index 96a2630e..578f2ee7 100644
--- a/docs/how-it-works/core-concepts.md
+++ b/docs/how-it-works/core-concepts.md
@@ -14,7 +14,7 @@ The **Orchestrator** is the central intelligence that manages all interactions:
 - **Quality Assurance**: Ensures deliverables meet standards
 - **Workflow Optimization**: Streamlines handoffs and reduces friction
 
-\```mermaid title="Orchestrator Decision Flow" type="diagram"
+```mermaid title="Orchestrator Decision Flow" type="diagram"
 graph TD
     A["User Input"] --> B["Parse Request"]
     B --> C{["Request Type?"]}
@@ -30,7 +30,7 @@ graph TD
     H --> I
     I --> J["Update Shared Context"]
     J --> K["Ready for Next Request"]
-\```
+```
 
 ### 2. 👥 Specialized AI Personas
 
@@ -66,7 +66,7 @@ Every action in BMAD is structured as a **Task**:
 
 #### Task Categories:
 
-\```mermaid title="Task Classification" type="diagram"
+```mermaid title="Task Classification" type="diagram"
 graph LR
     A["BMAD Tasks"] --> B["Planning Tasks"]
     A --> C["Architecture Tasks"]
@@ -93,7 +93,7 @@ graph LR
     F --> F1["Requirements Analysis"]
     F --> F2["User Story Creation"]
     F --> F3["Business Case Development"]
-\```
+```
 
 ### 4. 📄 Template-Driven Standardization
 
@@ -107,7 +107,7 @@ All deliverables follow proven templates:
 
 ## The BMAD Workflow Cycle
 
-\```mermaid title="Complete BMAD Workflow" type="diagram"
+```mermaid title="Complete BMAD Workflow" type="diagram"
 graph TD
     A["Project Initiation"] --> B["Requirements Gathering"]
     B --> C["Architecture Planning"]
@@ -137,7 +137,7 @@ graph TD
     F -.-> M
     G -.-> N
     H -.-> O
-\```
+```
 
 ## Key Principles
 
diff --git a/docs/how-it-works/integration-points.md b/docs/how-it-works/integration-points.md
index 78820cd2..01dd1e16 100644
--- a/docs/how-it-works/integration-points.md
+++ b/docs/how-it-works/integration-points.md
@@ -8,7 +8,7 @@ BMAD operates through multiple integration points that enable seamless collabora
 
 ## System Integration Architecture
 
-\```mermaid
+```mermaid
 graph TB
     subgraph "External Systems"
         IDE[IDE Environment]
@@ -40,7 +40,7 @@ graph TB
     PERSONAS --> KB
     TASKS --> CHECKLISTS
     TEMPLATES --> CONFIGS
-\```
+```
 
 ## Core Integration Points
 
@@ -81,7 +81,7 @@ graph TB
 **Purpose**: Enable consistent document and code generation
 
 **Integration Flow:**
-\```mermaid
+```mermaid
 sequenceDiagram
     participant User
     participant Orchestrator
@@ -93,7 +93,7 @@ sequenceDiagram
     Template Engine->>Template Engine: Process Variables
     Template Engine->>Output System: Generate Content
     Output System->>User: Deliver Document
-\```
+```
 
 ### 4. Checklist Integration
 
@@ -121,19 +121,19 @@ sequenceDiagram
 
 Personas work in sequence, with clear handoff points:
 
-\```mermaid
+```mermaid
 graph LR
     PO[Product Owner] --> PM[Project Manager]
     PM --> ARCH[Architect]
     ARCH --> UX[UX/UI Designer]
     UX --> DEV[Developer]
-\```
+```
 
 ### 2. Parallel Integration
 
 Multiple personas work simultaneously on different aspects:
 
-\```mermaid
+```mermaid
 graph TD
     REQ[Requirements] --> PO[Product Owner]
     REQ --> PM[Project Manager]
@@ -142,13 +142,13 @@ graph TD
     PO --> INTEGRATION[Integration Point]
     PM --> INTEGRATION
     ARCH --> INTEGRATION
-\```
+```
 
 ### 3. Collaborative Integration
 
 Personas collaborate in real-time on shared deliverables:
 
-\```mermaid
+```mermaid
 graph TB
     subgraph "Collaborative Space"
         DOC[Shared Document]
@@ -160,7 +160,7 @@ graph TB
     PO --> DOC
     ARCH --> DOC
     UX --> DOC
-\```
+```
 
 ## Data Integration Points
 
diff --git a/docs/how-it-works/orchestrator-mechanics.md b/docs/how-it-works/orchestrator-mechanics.md
index d5665907..04989f1c 100644
--- a/docs/how-it-works/orchestrator-mechanics.md
+++ b/docs/how-it-works/orchestrator-mechanics.md
@@ -4,7 +4,7 @@ The Orchestrator is the central intelligence system that coordinates all BMAD pe
 
 ## Orchestrator Architecture
 
-\```mermaid title="Orchestrator System Architecture" type="diagram"
+```mermaid title="Orchestrator System Architecture" type="diagram"
 graph TB
     subgraph "User Interface Layer"
         A["User Input"]
@@ -58,7 +58,7 @@ graph TB
     G <--> O
     H <--> P
     F <--> Q
-\```
+```
 
 ## Core Components
 
@@ -93,7 +93,7 @@ Maintains and provides access to all project information:
 
 **Context Structure:**
 
-\```mermaid title="Context Information Flow" type="diagram"
+```mermaid title="Context Information Flow" type="diagram"
 graph LR
     A["User Interactions"] --> B["Context Manager"]
     C["Persona Outputs"] --> B
@@ -109,7 +109,7 @@ graph LR
     G --> J
     H --> J
     I --> J
-\```
+```
 
 ### 3. Persona Selector
 
@@ -123,7 +123,7 @@ Intelligently chooses the right persona(s) for each task:
 
 **Selection Algorithm:**
 
-\```mermaid title="Persona Selection Logic" type="diagram"
+```mermaid title="Persona Selection Logic" type="diagram"
 graph TD
     A["Analyze Request"] --> B{["Primary Domain?"]}
     
@@ -147,7 +147,7 @@ graph TD
     
     K --> M["Synthesize Results"]
     L --> M
-\```
+```
 
 ### 4. Task Coordinator
 
@@ -161,7 +161,7 @@ Manages the execution of tasks across personas:
 
 **Task Execution Flow:**
 
-\```mermaid title="Task Coordination Process" type="diagram"
+```mermaid title="Task Coordination Process" type="diagram"
 graph TD
     A["Receive Task Request"] --> B["Decompose into Subtasks"]
     B --> C["Identify Dependencies"]
@@ -182,7 +182,7 @@ graph TD
     K --> I
     L --> M["Quality Check"]
     M --> N["Deliver Results"]
-\```
+```
 
 ### 5. Quality Controller
 
diff --git a/docs/how-it-works/persona-workflows.md b/docs/how-it-works/persona-workflows.md
index 36c0c6d2..22653a02 100644
--- a/docs/how-it-works/persona-workflows.md
+++ b/docs/how-it-works/persona-workflows.md
@@ -10,7 +10,7 @@ Each BMAD persona has specialized workflows designed to maximize their effective
 
 ### 1. Product Owner (PO) Workflow
 
-\```mermaid
+```mermaid
 graph TD
     A[Receive Requirements] --> B[Analyze Business Value]
     B --> C[Create User Stories]
@@ -19,7 +19,7 @@ graph TD
     E --> F[Stakeholder Review]
     F --> G[Story Refinement]
     G --> H[Sprint Planning Input]
-\```
+```
 
 **Key Activities:**
 - Requirements gathering and analysis
@@ -30,7 +30,7 @@ graph TD
 
 ### 2. Project Manager (PM) Workflow
 
-\```mermaid
+```mermaid
 graph TD
     A[Project Initiation] --> B[Resource Planning]
     B --> C[Timeline Creation]
@@ -39,7 +39,7 @@ graph TD
     E --> F[Progress Monitoring]
     F --> G[Stakeholder Updates]
     G --> H[Delivery Management]
-\```
+```
 
 **Key Activities:**
 - Project planning and scheduling
@@ -50,7 +50,7 @@ graph TD
 
 ### 3. System Architect Workflow
 
-\```mermaid
+```mermaid
 graph TD
     A[Requirements Analysis] --> B[Architecture Design]
     B --> C[Technology Selection]
@@ -59,7 +59,7 @@ graph TD
     E --> F[Documentation Creation]
     F --> G[Review and Validation]
     G --> H[Implementation Guidance]
-\```
+```
 
 **Key Activities:**
 - System design and architecture
@@ -70,7 +70,7 @@ graph TD
 
 ### 4. UX/UI Architect Workflow
 
-\```mermaid
+```mermaid
 graph TD
     A[User Research] --> B[Design System Creation]
     B --> C[Component Specification]
@@ -79,7 +79,7 @@ graph TD
     E --> F[Design Refinement]
     F --> G[Implementation Specs]
     G --> H[Quality Assurance]
-\```
+```
 
 **Key Activities:**
 - User experience research and design
@@ -90,7 +90,7 @@ graph TD
 
 ### 5. Business Analyst Workflow
 
-\```mermaid
+```mermaid
 graph TD
     A[Business Requirements] --> B[Process Analysis]
     B --> C[Gap Identification]
@@ -99,7 +99,7 @@ graph TD
     E --> F[Documentation]
     F --> G[Stakeholder Review]
     G --> H[Implementation Support]
-\```
+```
 
 **Key Activities:**
 - Business process analysis
diff --git a/docs/system-architecture/README.md b/docs/system-architecture/README.md
index a3f032f5..f3d77438 100644
--- a/docs/system-architecture/README.md
+++ b/docs/system-architecture/README.md
@@ -44,7 +44,7 @@ The BMAD (Business, Management, Architecture, Development) system is built on a
 
 ## System Architecture Layers
 
-\```mermaid title="BMAD System Architecture Layers" type="diagram"
+```mermaid title="BMAD System Architecture Layers" type="diagram"
 graph TB
     subgraph "Presentation Layer"
         WEB[Web Interface]
@@ -104,7 +104,7 @@ graph TB
     CONFIG --> DATABASE
     CACHE --> QUEUE
     SEARCH --> MONITOR
-\```
+```
 
 ## Key Architectural Decisions
 
diff --git a/docs/system-architecture/component-architecture.md b/docs/system-architecture/component-architecture.md
index 6639ef5c..8484d63b 100644
--- a/docs/system-architecture/component-architecture.md
+++ b/docs/system-architecture/component-architecture.md
@@ -8,7 +8,7 @@ The BMAD Method is a structured approach for AI-driven development that coordina
 
 The BMAD Method consists of several interconnected conceptual components that work together to facilitate AI-driven development:
 
-\```mermaid title="BMAD Method Component Architecture" type="diagram"
+```mermaid title="BMAD Method Component Architecture" type="diagram"
 graph TD
     A["BMAD Orchestrator"] --> B["Persona System"]
     A --> C["Task Framework"]
@@ -33,7 +33,7 @@ graph TD
     E --> E1["Quality Checklists"]
     E --> E2["Process Checklists"]
     E --> E3["Deliverable Checklists"]
-\```
+```
 
 ## Component Descriptions
 
@@ -90,7 +90,7 @@ Quality assurance mechanisms to ensure completeness and consistency.
 
 The components interact through a series of defined workflows:
 
-\```mermaid title="Component Interaction Flow" type="diagram"
+```mermaid title="Component Interaction Flow" type="diagram"
 sequenceDiagram
     participant User
     participant Orchestrator as BMAD Orchestrator
@@ -106,7 +106,7 @@ sequenceDiagram
     Tasks->>Checklists: Verify against checklists
     Personas->>Orchestrator: Return completed work
     Orchestrator->>User: Deliver output
-\```
+```
 
 ## Integration Points
 
diff --git a/docs/system-architecture/data-flow-diagrams.md b/docs/system-architecture/data-flow-diagrams.md
index 3e182817..2766c3ea 100644
--- a/docs/system-architecture/data-flow-diagrams.md
+++ b/docs/system-architecture/data-flow-diagrams.md
@@ -8,7 +8,7 @@ This document illustrates how information flows through the BMAD Method process.
 
 The BMAD Method's primary information flow shows how context and requirements transform into deliverables through a series of specialized personas:
 
-\```mermaid title="BMAD Core Information Flow" type="diagram"
+```mermaid title="BMAD Core Information Flow" type="diagram"
 flowchart TD
     A[Initial Requirements] --> B{BMAD Orchestrator}
     B --> C[Product Owner]
@@ -22,13 +22,13 @@ flowchart TD
     B --> G[Final Deliverable]
     
     style B fill:#f96,stroke:#333,stroke-width:2px
-\```
+```
 
 ## Context Preservation Flow
 
 One of the BMAD Method's key strengths is how it preserves and enriches context throughout the development process:
 
-\```mermaid title="Context Preservation Flow" type="diagram"
+```mermaid title="Context Preservation Flow" type="diagram"
 graph TD
     A[Initial Context] --> B[Context Enrichment]
     B --> C[Context Sharing]
@@ -47,13 +47,13 @@ graph TD
     D2 --> D3[Design Application]
     D3 --> D4[Implementation Application]
     end
-\```
+```
 
 ## Task Execution Flow
 
 Information flow during task execution in the BMAD Method:
 
-\```mermaid title="Task Execution Information Flow" type="diagram"
+```mermaid title="Task Execution Information Flow" type="diagram"
 sequenceDiagram
     participant User
     participant Orchestrator
@@ -73,13 +73,13 @@ sequenceDiagram
     Checklists-->>ActivePersona: Verification Results
     ActivePersona->>Orchestrator: Task Output
     Orchestrator->>User: Deliverable
-\```
+```
 
 ## Persona Transition Flow
 
 How information transitions between personas in the BMAD Method:
 
-\```mermaid title="Persona Transition Information Flow" type="diagram"
+```mermaid title="Persona Transition Information Flow" type="diagram"
 graph TD
     A[Initial Request] --> B[Product Owner]
     B -- "PRD" --> C[Architect]
@@ -95,13 +95,13 @@ graph TD
     H <-.-> F
     
     style H fill:#f9f,stroke:#333,stroke-width:2px
-\```
+```
 
 ## Checklist Verification Flow
 
 How information flows through the checklist verification process:
 
-\```mermaid title="Checklist Verification Flow" type="diagram"
+```mermaid title="Checklist Verification Flow" type="diagram"
 flowchart TD
     A[Task Output] --> B{Checklist System}
     B --> C[Quality Checklist]
@@ -129,13 +129,13 @@ flowchart TD
     M --> O
     
     O --> P[Verified Deliverable]
-\```
+```
 
 ## Template Application Flow
 
 How templates are applied to structure information in the BMAD Method:
 
-\```mermaid title="Template Application Flow" type="diagram"
+```mermaid title="Template Application Flow" type="diagram"
 graph LR
     A[Raw Information] --> B[Template Selection]
     B --> C[Template Application]
@@ -144,7 +144,7 @@ graph LR
     E -->|Valid| F[Finalized Document]
     E -->|Invalid| G[Revision]
     G --> C
-\```
+```
 
 ## Conclusion
 
diff --git a/docs/system-architecture/deployment-architecture.md b/docs/system-architecture/deployment-architecture.md
index e273c7ec..25ec7939 100644
--- a/docs/system-architecture/deployment-architecture.md
+++ b/docs/system-architecture/deployment-architecture.md
@@ -6,7 +6,7 @@ Unlike traditional software systems, the BMAD Method is not "deployed" in the co
 
 ## Conceptual Deployment Architecture
 
-\```mermaid title="BMAD Method Conceptual Deployment" type="diagram"
+```mermaid title="BMAD Method Conceptual Deployment" type="diagram"
 graph TD
     A[BMAD Method] --> B[Documentation Deployment]
     A --> C[Template Deployment]
@@ -28,13 +28,13 @@ graph TD
     E --> E1[LLM Integration]
     E --> E2[IDE Integration]
     E --> E3[Tool-Specific Adapters]
-\```
+```
 
 ## Documentation Deployment
 
 The BMAD Method documentation can be deployed through various channels:
 
-\```mermaid title="Documentation Deployment Options" type="diagram"
+```mermaid title="Documentation Deployment Options" type="diagram"
 graph LR
     A[BMAD Documentation] --> B[GitHub Repository]
     A --> C[Internal Wiki]
@@ -49,13 +49,13 @@ graph LR
     D --> K[Interactive Docs]
     F --> L[LMS]
     F --> M[Workshop Materials]
-\```
+```
 
 ## Template Deployment
 
 BMAD Method templates can be deployed through:
 
-\```mermaid title="Template Deployment Architecture" type="diagram"
+```mermaid title="Template Deployment Architecture" type="diagram"
 flowchart TD
     A[BMAD Templates] --> B[Version Control]
     B --> C[Template Repository]
@@ -74,13 +74,13 @@ flowchart TD
     
     G --> M[GitHub Access]
     G --> N[Direct Download]
-\```
+```
 
 ## Process Deployment
 
 BMAD Method processes can be deployed through:
 
-\```mermaid title="Process Deployment Architecture" type="diagram"
+```mermaid title="Process Deployment Architecture" type="diagram"
 graph TD
     A[BMAD Processes] --> B[Process Documentation]
     A --> C[Workflow Integration]
@@ -97,13 +97,13 @@ graph TD
     D --> D1[Onboarding]
     D --> D2[Workshops]
     D --> D3[Practice Exercises]
-\```
+```
 
 ## LLM Integration Deployment
 
 How the BMAD Method can be deployed for LLM integration:
 
-\```mermaid title="LLM Integration Deployment" type="diagram"
+```mermaid title="LLM Integration Deployment" type="diagram"
 flowchart LR
     A[BMAD Method] --> B[Prompt Engineering]
     A --> C[Context Management]
@@ -121,13 +121,13 @@ flowchart LR
     E --> K[OpenAI Integration]
     E --> L[Anthropic Integration]
     E --> M[Custom LLM Integration]
-\```
+```
 
 ## Organizational Deployment Models
 
 Different ways to deploy the BMAD Method within an organization:
 
-\```mermaid title="Organizational Deployment Models" type="diagram"
+```mermaid title="Organizational Deployment Models" type="diagram"
 graph TD
     A[BMAD Method] --> B[Full Adoption]
     A --> C[Hybrid Adoption]
@@ -149,13 +149,13 @@ graph TD
     E --> E1[Project-Specific Implementation]
     E --> E2[Custom Adaptation]
     E --> E3[Limited Scope]
-\```
+```
 
 ## Deployment Phases
 
 A phased approach to deploying the BMAD Method:
 
-\```mermaid title="BMAD Deployment Phases" type="diagram"
+```mermaid title="BMAD Deployment Phases" type="diagram"
 graph LR
     A[Phase 1: Preparation] --> B[Phase 2: Pilot]
     B --> C[Phase 3: Evaluation]
@@ -186,7 +186,7 @@ graph LR
     F --> F1[Standard Operating Procedures]
     F --> F2[Integration with Existing Processes]
     F --> F3[Continuous Improvement]
-\```
+```
 
 ## Conclusion
 
diff --git a/docs/system-architecture/system-overview.md b/docs/system-architecture/system-overview.md
index 65893f92..5016a8cc 100644
--- a/docs/system-architecture/system-overview.md
+++ b/docs/system-architecture/system-overview.md
@@ -4,7 +4,7 @@ This document provides a high-level overview of the BMAD system architecture, fo
 
 ## System Context
 
-\```mermaid title="BMAD System Context Diagram" type="diagram"
+```mermaid title="BMAD System Context Diagram" type="diagram"
 graph TB
     subgraph "External Systems"
         USERS[Users]
@@ -35,11 +35,11 @@ graph TB
     BMAD --> DB
     BMAD --> STORAGE
     BMAD --> MONITOR
-\```
+```
 
 ## High-Level Architecture
 
-\```mermaid title="BMAD High-Level Architecture" type="diagram"
+```mermaid title="BMAD High-Level Architecture" type="diagram"
 graph TB
     subgraph "User Interfaces"
         WEB_UI[Web Interface]
@@ -109,7 +109,7 @@ graph TB
     ORCHESTRATOR --> JIRA_INT
     ORCHESTRATOR --> SLACK_INT
     ORCHESTRATOR --> AI_SERVICES
-\```
+```
 
 ## Core Components
 
@@ -191,7 +191,7 @@ graph TB
 
 ### 1. User Request Flow
 
-\```mermaid title="User Request Processing Flow" type="diagram"
+```mermaid title="User Request Processing Flow" type="diagram"
 sequenceDiagram
     participant User
     participant Interface
@@ -211,11 +211,11 @@ sequenceDiagram
     Persona->>Orchestrator: Return Results
     Orchestrator->>Interface: Format Response
     Interface->>User: Deliver Results
-\```
+```
 
 ### 2. Multi-Persona Collaboration
 
-\```mermaid title="Multi-Persona Collaboration Flow" type="diagram"
+```mermaid title="Multi-Persona Collaboration Flow" type="diagram"
 sequenceDiagram
     participant Orchestrator
     participant PM_Persona
@@ -232,7 +232,7 @@ sequenceDiagram
     Orchestrator->>Dev_Persona: Implement Solution
     Dev_Persona->>Orchestrator: Return Implementation
     Orchestrator->>Orchestrator: Integrate Results
-\```
+```
 
 ## Deployment Architecture
 
@@ -258,7 +258,7 @@ sequenceDiagram
 
 ### 2. Infrastructure Components
 
-\```mermaid title="Infrastructure Architecture" type="diagram"
+```mermaid title="Infrastructure Architecture" type="diagram"
 graph TB
     subgraph "Load Balancing"
         LB[Load Balancer]
@@ -306,7 +306,7 @@ graph TB
     APP1 --> METRICS
     APP2 --> LOGS
     APP3 --> ALERTS
-\```
+```
 
 ## Quality Attributes
 
diff --git a/docs/user-journeys/architecture-planning.md b/docs/user-journeys/architecture-planning.md
index 95266bca..92a59ecf 100644
--- a/docs/user-journeys/architecture-planning.md
+++ b/docs/user-journeys/architecture-planning.md
@@ -21,7 +21,7 @@ This document maps the complete journey of a System Architect planning technical
 
 ## Journey Map
 
-\```mermaid title="Architecture Planning Journey" type="diagram"
+```mermaid title="Architecture Planning Journey" type="diagram"
 journey
     title Architecture Planning User Journey
     section Requirements Analysis
@@ -40,7 +40,7 @@ journey
       Create implementation roadmap: 4
       Develop technical standards: 3
       Prepare knowledge transfer: 4
-\```
+```
 
 ## Detailed Journey Stages
 
@@ -131,7 +131,7 @@ journey
 
 ## Emotional Journey
 
-\```mermaid title="Emotional Journey" type="diagram"
+```mermaid title="Emotional Journey" type="diagram"
 journey
     title Emotional Journey - Architecture Planning
     section Requirements Analysis
@@ -150,7 +150,7 @@ journey
       Concern about execution challenges: 3
       Focus during standards development: 4
       Optimism about implementation: 4
-\```
+```
 
 ## Success Metrics
 
diff --git a/docs/user-journeys/design-system-creation.md b/docs/user-journeys/design-system-creation.md
index 5dadc3fe..17baf2ba 100644
--- a/docs/user-journeys/design-system-creation.md
+++ b/docs/user-journeys/design-system-creation.md
@@ -21,7 +21,7 @@ This document maps the complete journey of a UX/UI Architect creating a design s
 
 ## Journey Map
 
-\```mermaid title="Design System Creation Journey" type="diagram"
+```mermaid title="Design System Creation Journey" type="diagram"
 journey
     title Design System Creation User Journey
     section Research & Planning
@@ -40,7 +40,7 @@ journey
       Train development teams: 3
       Monitor implementation: 2
       Iterate based on feedback: 4
-\```
+```
 
 ## Detailed Journey Stages
 
@@ -131,7 +131,7 @@ journey
 
 ## Emotional Journey
 
-\```mermaid title="Emotional Journey" type="diagram"
+```mermaid title="Emotional Journey" type="diagram"
 journey
     title Emotional Journey - Design System Creation
     section Research & Planning
@@ -150,7 +150,7 @@ journey
       Anxiety about team reception: 3
       Disappointment with partial adoption: 2
       Fulfillment seeing system in use: 5
-\```
+```
 
 ## Success Metrics
 
diff --git a/docs/user-journeys/feature-development.md b/docs/user-journeys/feature-development.md
index 7957ae4c..c322e37e 100644
--- a/docs/user-journeys/feature-development.md
+++ b/docs/user-journeys/feature-development.md
@@ -21,7 +21,7 @@ This document maps the complete journey of a Developer implementing features usi
 
 ## Journey Map
 
-\```mermaid title="Feature Development Journey" type="diagram"
+```mermaid title="Feature Development Journey" type="diagram"
 journey
     title Feature Development User Journey
     section Preparation
@@ -42,7 +42,7 @@ journey
       Address feedback: 3
       Complete documentation: 4
       Merge and deploy: 5
-\```
+```
 
 ## Detailed Journey Stages
 
@@ -134,7 +134,7 @@ journey
 
 ## Emotional Journey
 
-\```mermaid title="Emotional Journey" type="diagram"
+```mermaid title="Emotional Journey" type="diagram"
 journey
     title Emotional Journey - Feature Development
     section Preparation
@@ -153,7 +153,7 @@ journey
       Nervousness during review: 2
       Stress addressing feedback: 3
       Pride in completed feature: 5
-\```
+```
 
 ## Success Metrics
 
diff --git a/docs/user-journeys/first-time-setup.md b/docs/user-journeys/first-time-setup.md
index 3d37f9db..2ddd5a37 100644
--- a/docs/user-journeys/first-time-setup.md
+++ b/docs/user-journeys/first-time-setup.md
@@ -19,7 +19,7 @@ This document maps the complete journey of a new user setting up the BMAD Method
 
 ## Journey Map
 
-\```mermaid title="First-Time Setup Journey" type="diagram"
+```mermaid title="First-Time Setup Journey" type="diagram"
 journey
     title First-Time Setup User Journey
     section Discovery
@@ -38,7 +38,7 @@ journey
       Completes first deliverable: 5
       Reviews output quality: 4
       Shares with team: 4
-\```
+```
 
 ## Detailed Journey Stages
 
@@ -126,7 +126,7 @@ journey
 
 ## Emotional Journey
 
-\```mermaid title="Emotional Journey" type="diagram"
+```mermaid title="Emotional Journey" type="diagram"
 journey
     title Emotional Journey - First-Time Setup
     section Discovery
@@ -145,7 +145,7 @@ journey
       Pride in completed work: 5
       Satisfaction with quality: 4
       Enthusiasm for future use: 5
-\```
+```
 
 ## Success Metrics
 
diff --git a/docs/user-journeys/project-initiation.md b/docs/user-journeys/project-initiation.md
index 8a4db8e6..29929250 100644
--- a/docs/user-journeys/project-initiation.md
+++ b/docs/user-journeys/project-initiation.md
@@ -21,7 +21,7 @@ This document maps the complete journey of a Product Owner initiating a new proj
 
 ## Journey Map
 
-\```mermaid title="Project Initiation Journey" type="diagram"
+```mermaid title="Project Initiation Journey" type="diagram"
 journey
     title Project Initiation User Journey
     section Project Definition
@@ -40,7 +40,7 @@ journey
       Brief development team: 4
       Address questions: 3
       Begin implementation: 5
-\```
+```
 
 ## Detailed Journey Stages
 
@@ -131,7 +131,7 @@ journey
 
 ## Emotional Journey
 
-\```mermaid title="Emotional Journey" type="diagram"
+```mermaid title="Emotional Journey" type="diagram"
 journey
     title Emotional Journey - Project Initiation
     section Project Definition
@@ -150,7 +150,7 @@ journey
       Pride in comprehensive documentation: 5
       Nervousness about team reception: 3
       Excitement as implementation begins: 5
-\```
+```
 
 ## Success Metrics
 
diff --git a/docs/visual-elements/README.md b/docs/visual-elements/README.md
index fb2568e6..e5aa6e64 100644
--- a/docs/visual-elements/README.md
+++ b/docs/visual-elements/README.md
@@ -70,7 +70,7 @@ small { font-size: 0.875rem; }                /* 14px - Captions */
 
 ### Persona Selector Component
 
-\```html
+```html
 <div class="persona-selector">
   <h3>Select Your Persona</h3>
   <div class="persona-grid">
@@ -96,11 +96,11 @@ small { font-size: 0.875rem; }                /* 14px - Captions */
     </div>
   </div>
 </div>
-\```
+```
 
 ### Progress Indicator Component
 
-\```html
+```html
 <div class="progress-indicator">
   <div class="progress-step completed">
     <div class="step-number">1</div>
@@ -122,11 +122,11 @@ small { font-size: 0.875rem; }                /* 14px - Captions */
     <div class="step-label">Implementation</div>
   </div>
 </div>
-\```
+```
 
 ### Expandable Code Example Component
 
-\```html
+```html
 <div class="code-example">
   <div class="code-header">
     <span class="code-title">BMAD Persona Configuration</span>
@@ -146,13 +146,13 @@ personas:
     </code></pre>
   </div>
 </div>
-\```
+```
 
 ## Visual Diagram Standards
 
 ### Mermaid Diagram Styling
 
-\```css
+```css
 /* Custom Mermaid theme for BMAD documentation */
 .mermaid {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
@@ -194,7 +194,7 @@ personas:
   border-radius: 4px;
   padding: 4px 8px;
 }
-\```
+```
 
 ### Icon System
 
@@ -228,7 +228,7 @@ All screenshots should follow these guidelines:
 
 ### Annotation Guidelines
 
-\```html
+```html
 <div class="screenshot-container">
   <img src="/images/bmad-setup-example.png" alt="BMAD Method setup interface" />
   <div class="screenshot-annotations">
@@ -242,7 +242,7 @@ All screenshots should follow these guidelines:
     </div>
   </div>
 </div>
-\```
+```
 
 ## Accessibility Standards
 
@@ -255,7 +255,7 @@ All text must meet WCAG AA standards:
 
 ### Alternative Text Guidelines
 
-\```html
+```html
 <!-- Good: Descriptive alt text -->
 <img src="workflow-diagram.png" alt="BMAD workflow showing progression from requirements through architecture, design, and implementation phases" />
 
@@ -264,7 +264,7 @@ All text must meet WCAG AA standards:
 
 <!-- Decorative images -->
 <img src="decorative-pattern.png" alt="" role="presentation" />
-\```
+```
 
 ### Keyboard Navigation
 
@@ -278,14 +278,14 @@ All interactive elements must be keyboard accessible:
 
 ### Breakpoint System
 
-\```css
+```css
 /* Mobile first approach */
 @media (min-width: 640px) { /* sm */ }
 @media (min-width: 768px) { /* md */ }
 @media (min-width: 1024px) { /* lg */ }
 @media (min-width: 1280px) { /* xl */ }
 @media (min-width: 1536px) { /* 2xl */ }
-\```
+```
 
 ### Mobile Optimization
 
@@ -298,7 +298,7 @@ All interactive elements must be keyboard accessible:
 
 ### CSS Custom Properties
 
-\```css
+```css
 :root {
   /* Brand colors */
   --bmad-brand-primary: #2563eb;
@@ -322,11 +322,11 @@ All interactive elements must be keyboard accessible:
   --bmad-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --bmad-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
 }
-\```
+```
 
 ### Component Classes
 
-\```css
+```css
 /* Base component styling */
 .bmad-card {
   background: white;
@@ -356,7 +356,7 @@ All interactive elements must be keyboard accessible:
   outline: 2px solid var(--bmad-brand-primary);
   outline-offset: 2px;
 }
-\```
+```
 
 ## Quality Assurance Checklist
 
diff --git a/docs/visual-elements/accessibility-guide.md b/docs/visual-elements/accessibility-guide.md
index 059d6925..80d96137 100644
--- a/docs/visual-elements/accessibility-guide.md
+++ b/docs/visual-elements/accessibility-guide.md
@@ -22,7 +22,7 @@ Content must be robust enough to be interpreted reliably by a wide variety of us
 
 All text and interactive elements meet or exceed WCAG AA standards:
 
-\```css
+```css
 /* High contrast color combinations */
 .high-contrast-text {
   color: #000000;           /* Black text */
@@ -54,13 +54,13 @@ All text and interactive elements meet or exceed WCAG AA standards:
   outline-offset: 2px;
   /* Focus indicator clearly visible */
 }
-\```
+```
 
 ### Color-Blind Friendly Palette
 
 Our color system works for users with various types of color vision deficiency:
 
-\```css
+```css
 /* Color-blind friendly palette */
 :root {
   --accessible-blue: #0066cc;      /* Distinguishable blue */
@@ -104,13 +104,13 @@ Our color system works for users with various types of color vision deficiency:
   content: "âš ";
   font-weight: bold;
 }
-\```
+```
 
 ## Typography and Readability
 
 ### Font Selection and Sizing
 
-\```css
+```css
 /* Accessible typography */
 body {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
@@ -137,11 +137,11 @@ h1, h2, h3, h4, h5, h6 {
     font-size: 18px;
   }
 }
-\```
+```
 
 ### Reading Flow and Structure
 
-\```html
+```html
 <!-- Proper heading hierarchy -->
 <main>
   <h1>BMAD Method Documentation</h1>
@@ -162,13 +162,13 @@ h1, h2, h3, h4, h5, h6 {
 <!-- Skip links for keyboard navigation -->
 <a href="#main-content" class="skip-link">Skip to main content</a>
 <a href="#navigation" class="skip-link">Skip to navigation</a>
-\```
+```
 
 ## Keyboard Navigation
 
 ### Focus Management
 
-\```css
+```css
 /* Visible focus indicators */
 *:focus {
   outline: 2px solid var(--bmad-primary);
@@ -203,11 +203,11 @@ textarea:focus {
 .skip-link:focus {
   top: 6px;
 }
-\```
+```
 
 ### Keyboard Interaction Patterns
 
-\```javascript
+```javascript
 // Accessible dropdown menu
 class AccessibleDropdown {
   constructor(element) {
@@ -278,13 +278,13 @@ class AccessibleDropdown {
     this.items[prevIndex].focus();
   }
 }
-\```
+```
 
 ## Screen Reader Support
 
 ### Semantic HTML and ARIA
 
-\```html
+```html
 <!-- Proper semantic structure -->
 <article role="main">
   <header>
@@ -358,11 +358,11 @@ class AccessibleDropdown {
     </div>
   </fieldset>
 </form>
-\```
+```
 
 ### Screen Reader Announcements
 
-\```javascript
+```javascript
 // Live region for dynamic content updates
 class AccessibleNotifications {
   constructor() {
@@ -401,13 +401,13 @@ notifications.announce('Error: Please fill in all required fields', 'assertive')
 
 // Announce success
 notifications.announce('Project created successfully');
-\```
+```
 
 ## Image and Media Accessibility
 
 ### Alternative Text Guidelines
 
-\```html
+```html
 <!-- Informative images -->
 <img src="bmad-workflow-diagram.png" 
      alt="BMAD workflow diagram showing four connected steps: Requirements gathering by Product Owner, Architecture design by System Architect, UI/UX design by Designer, and Implementation by Developer">
@@ -441,11 +441,11 @@ notifications.announce('Project created successfully');
     Architecture
   </button>
 </div>
-\```
+```
 
 ### Video and Audio Accessibility
 
-\```html
+```html
 <!-- Video with captions and transcripts -->
 <video controls aria-describedby="video-description">
   <source src="bmad-introduction.mp4" type="video/mp4">
@@ -468,7 +468,7 @@ notifications.announce('Project created successfully');
     <p>Welcome to the BMAD Method introduction...</p>
   </details>
 </div>
-\```
+```
 
 ## Testing and Validation
 
@@ -503,7 +503,7 @@ notifications.announce('Project created successfully');
 
 ### Automated Testing Tools
 
-\```javascript
+```javascript
 // Example accessibility testing with axe-core
 import { axe, toHaveNoViolations } from 'jest-axe';
 
@@ -529,7 +529,7 @@ function announceToScreenReader(message) {
     document.body.removeChild(announcement);
   }, 1000);
 }
-\```
+```
 
 ---
 
diff --git a/web-build-sample/agent-config.txt b/web-build-sample/agent-config.txt
index 9c50bf52..02519a35 100644
--- a/web-build-sample/agent-config.txt
+++ b/web-build-sample/agent-config.txt
@@ -79,6 +79,20 @@
   - [Create Ai Frontend Prompt](tasks#create-ai-frontend-prompt)
   - [Create UX/UI Spec](tasks#create-uxui-spec)
 
+## Title: v0 UX/UI Architect
+
+- Name: Veronica
+- Customize: "Specialized in rapid visual prototyping, component generation, and production-ready frontend implementation with a focus on design systems and accessibility. Embodies the capabilities of v0 for creating stunning, functional frontend implementations."
+- Description: "Master UX/UI Architect with v0-like generative capabilities for creating stunning, functional frontend implementations directly from requirements. Excels at transforming simple prompts into comprehensive visual designs and working prototypes."
+- Persona: "personas#v0-ux-ui-architect"
+- checklists:
+  - [v0 Component Quality Checklist](checklists#v0-component-quality-checklist)
+- templates:
+  - [v0 Component Spec Tmpl](templates#v0-component-spec-tmpl)
+- tasks:
+  - [Rapid Prototype From Brief](tasks#rapid-prototype-from-brief)
+  - [Create Design System Components](tasks#create-design-system-components)
+
 ## Title: PO
 
 - Name: Sarah
diff --git a/web-build-sample/checklists.txt b/web-build-sample/checklists.txt
index 44bf3888..5cb41f6f 100644
--- a/web-build-sample/checklists.txt
+++ b/web-build-sample/checklists.txt
@@ -1636,3 +1636,88 @@ The Scrum Master should use this checklist to validate that each story contains
 - BLOCKED: External information required (specify what information)
 
 ==================== END: story-draft-checklist ====================
+
+
+==================== START: v0-component-quality-checklist ====================
+# v0 Component Quality Checklist
+
+## Design Consistency
+- [ ] Follows established design system patterns
+- [ ] Color palette matches brand guidelines
+- [ ] Typography scales appropriately
+- [ ] Spacing follows design tokens
+- [ ] Icons are consistent with design system
+- [ ] Visual hierarchy is clear and intentional
+- [ ] Component variants are visually consistent
+- [ ] Animations and transitions are consistent with design system
+
+## Code Quality
+- [ ] Component is properly typed (TypeScript)
+- [ ] Props are well-documented
+- [ ] Component handles edge cases gracefully
+- [ ] Performance optimized (memo, callbacks, etc.)
+- [ ] No console errors or warnings
+- [ ] No unused variables or imports
+- [ ] Code follows project conventions
+- [ ] Component is properly tested
+
+## Accessibility
+- [ ] Semantic HTML structure
+- [ ] Proper ARIA labels and roles
+- [ ] Keyboard navigation support
+- [ ] Focus management implemented
+- [ ] Screen reader compatibility
+- [ ] Color contrast meets WCAG standards
+- [ ] Text is resizable
+- [ ] Interactive elements have appropriate hit areas
+- [ ] Motion can be reduced/disabled if necessary
+
+## Responsive Design
+- [ ] Mobile-first approach
+- [ ] Breakpoint behavior tested
+- [ ] Touch-friendly interaction areas
+- [ ] Content reflows appropriately
+- [ ] No horizontal overflow on small screens
+- [ ] Images scale appropriately
+- [ ] Text remains readable at all sizes
+- [ ] Interactive elements remain usable at all sizes
+
+## State Management
+- [ ] All component states are properly handled
+- [ ] Loading states are implemented
+- [ ] Error states are implemented
+- [ ] Empty states are implemented
+- [ ] State transitions are smooth
+- [ ] State is preserved when appropriate
+- [ ] State changes are visually indicated
+
+## Performance
+- [ ] Renders efficiently
+- [ ] Avoids unnecessary re-renders
+- [ ] Optimized for initial load time
+- [ ] Lazy loads resources when appropriate
+- [ ] Uses appropriate image formats and sizes
+- [ ] Animations are performant
+- [ ] Large lists are virtualized if necessary
+
+## Integration
+- [ ] Imports/exports properly configured
+- [ ] Dependencies clearly documented
+- [ ] Integration examples provided
+- [ ] Storybook story created (if applicable)
+- [ ] Works with existing components
+- [ ] Follows project folder structure
+- [ ] Properly bundled and tree-shakeable
+
+## Documentation
+- [ ] Props documented with types and descriptions
+- [ ] Usage examples provided
+- [ ] Edge cases and limitations documented
+- [ ] Accessibility features documented
+- [ ] Visual examples of all states and variants
+- [ ] Installation and import instructions
+- [ ] Changelog maintained (if applicable)
+
+==================== END: v0-component-quality-checklist ====================
+
+
diff --git a/web-build-sample/data.txt b/web-build-sample/data.txt
index acb1d702..89e15343 100644
--- a/web-build-sample/data.txt
+++ b/web-build-sample/data.txt
@@ -452,3 +452,5 @@ Anything you learn or prefer over time to drive future project choices, add them
 These will be used by the agents when producing PRD and Architectures
 
 ==================== END: technical-preferences ====================
+
+
diff --git a/web-build-sample/docs.txt b/web-build-sample/docs.txt
new file mode 100644
index 00000000..074d9603
--- /dev/null
+++ b/web-build-sample/docs.txt
@@ -0,0 +1,83 @@
+==================== START: training-materials ====================
+# v0 UX/UI Architect Training Materials
+
+## Quick Start Guide
+
+### Activating the v0 UX/UI Architect (Veronica)
+
+To activate Veronica in a web-based AI environment:
+
+```
+"I need to work with Veronica, the v0 UX/UI Architect. I want to create [describe your UI/UX need]."
+```
+
+### Core Capabilities
+
+Veronica excels at:
+- **Rapid Visual Prototyping**: Transform text descriptions into visual mockups
+- **Component Generation**: Create reusable UI components with code
+- **Design System Creation**: Build cohesive design systems
+- **Responsive Design**: Ensure designs work across all devices
+- **Accessibility Integration**: Build inclusive user experiences
+
+### Common Use Cases
+
+#### 1. Creating a New Component
+```
+"Veronica, I need a modern card component for displaying product information. 
+It should include an image, title, price, and call-to-action button. 
+The design should be clean and work well on mobile."
+```
+
+#### 2. Building a Design System
+```
+"Veronica, help me create a design system for a fintech application. 
+I need primary and secondary buttons, form inputs, and cards. 
+The brand colors are blue (#2563eb) and gray (#64748b)."
+```
+
+#### 3. Rapid Prototyping
+```
+"Veronica, I have a project brief for an e-commerce dashboard. 
+Can you create initial wireframes and component mockups based on the requirements?"
+```
+
+### Best Practices
+
+1. **Be Specific**: Provide clear requirements, brand guidelines, and user context
+2. **Iterate**: Start with basic concepts and refine based on feedback
+3. **Think Components**: Focus on reusable elements that scale
+4. **Consider Users**: Always mention target audience and use cases
+5. **Quality Check**: Use the v0 component quality checklist for final review
+
+### Integration with BMAD Workflow
+
+- **After Analyst Phase**: Use for initial visual exploration
+- **During PM Phase**: Create component specifications for user stories
+- **Before Development**: Generate implementation-ready components
+- **Quality Assurance**: Apply component quality checklist
+
+### Troubleshooting
+
+**Issue**: Generated components don't match brand guidelines
+**Solution**: Provide specific brand colors, typography, and style references
+
+**Issue**: Components aren't responsive
+**Solution**: Explicitly request mobile-first responsive design
+
+**Issue**: Accessibility concerns
+**Solution**: Request WCAG compliance and screen reader compatibility
+
+### IDE Integration Reference
+
+For development environments, the v0 UX/UI Architect can also work directly in:
+- **Cursor AI**: Excellent for multi-file component creation
+- **Cline**: Strong project context understanding
+- **Claude Code**: Focus on code quality and best practices
+- **Roocode**: Rapid prototyping capabilities
+
+To use in IDE environments, activate the IDE-specific version and follow the implementation-focused workflow.
+
+==================== END: training-materials ====================
+
+
diff --git a/web-build-sample/examples.txt b/web-build-sample/examples.txt
new file mode 100644
index 00000000..a98aca84
--- /dev/null
+++ b/web-build-sample/examples.txt
@@ -0,0 +1,157 @@
+==================== START: v0-example-project ====================
+# v0 UX/UI Architect Example Project
+
+## Project Overview
+**Project**: E-commerce Product Dashboard
+**Goal**: Create a modern, responsive dashboard for managing products
+**Target Users**: Store administrators and product managers
+
+## Phase 1: Initial Requirements (Analyst → v0 UX/UI Architect)
+
+### Project Brief Summary
+- Need a dashboard for managing e-commerce products
+- Users should be able to view, add, edit, and delete products
+- Must work on desktop and mobile devices
+- Brand colors: Primary blue (#2563eb), Secondary gray (#64748b)
+- Modern, clean aesthetic
+
+## Phase 2: Component Creation with Veronica
+
+### Activation Prompt
+```
+"Veronica, I need your help creating a product dashboard for an e-commerce platform. 
+Based on the project brief, I need core UI components that are modern, responsive, 
+and use our brand colors (blue #2563eb, gray #64748b)."
+```
+
+### Generated Components
+
+#### 1. Product Card Component
+**Specification:**
+- Displays product image, name, price, and status
+- Hover effects for interactivity
+- Mobile-responsive layout
+- Accessible design with proper ARIA labels
+
+**Implementation:**
+```tsx
+interface ProductCardProps {
+  product: {
+    id: string;
+    name: string;
+    price: number;
+    image: string;
+    status: 'active' | 'inactive';
+  };
+  onEdit: (id: string) => void;
+  onDelete: (id: string) => void;
+}
+
+const ProductCard: React.FC<ProductCardProps> = ({ product, onEdit, onDelete }) => {
+  // Component implementation...
+};
+```
+
+#### 2. Dashboard Header Component
+**Specification:**
+- Navigation breadcrumbs
+- User profile dropdown
+- Search functionality
+- Responsive mobile menu
+
+#### 3. Data Table Component
+**Specification:**
+- Sortable columns
+- Pagination
+- Bulk actions
+- Responsive design that stacks on mobile
+
+## Phase 3: Quality Assurance
+
+### v0 Component Quality Checklist Applied
+
+✅ **Design Consistency**
+- Follows established design system patterns
+- Color palette matches brand guidelines (#2563eb, #64748b)
+- Typography scales appropriately
+- Spacing follows 8px grid system
+
+✅ **Code Quality**
+- Components are properly typed (TypeScript)
+- Props are well-documented with interfaces
+- Components handle edge cases (loading, error states)
+- Performance optimized with React.memo where appropriate
+
+✅ **Accessibility**
+- Semantic HTML structure (header, main, section)
+- Proper ARIA labels and roles
+- Keyboard navigation support (tab order, enter/space activation)
+- Screen reader compatibility tested
+- Color contrast meets WCAG AA standards (4.5:1 ratio)
+
+✅ **Responsive Design**
+- Mobile-first approach implemented
+- Breakpoints: 640px (sm), 768px (md), 1024px (lg)
+- Touch-friendly interaction areas (44px minimum)
+- Content reflows appropriately on all screen sizes
+
+✅ **Integration**
+- Imports/exports properly configured
+- Dependencies clearly documented (React, TypeScript, Tailwind)
+- Integration examples provided
+- Storybook stories created for each component
+
+## Phase 4: Implementation Results
+
+### File Structure Created
+```
+src/
+├── components/
+│   ├── ProductCard/
+│   │   ├── ProductCard.tsx
+│   │   ├── ProductCard.stories.tsx
+│   │   └── ProductCard.test.tsx
+│   ├── DashboardHeader/
+│   │   ├── DashboardHeader.tsx
+│   │   ├── DashboardHeader.stories.tsx
+│   │   └── DashboardHeader.test.tsx
+│   └── DataTable/
+│       ├── DataTable.tsx
+│       ├── DataTable.stories.tsx
+│       └── DataTable.test.tsx
+├── types/
+│   └── Product.ts
+└── styles/
+    └── components.css
+```
+
+### Performance Metrics
+- **Lighthouse Score**: 98/100
+- **Bundle Size**: +12KB (optimized)
+- **Load Time**: <200ms for component rendering
+- **Accessibility Score**: 100/100
+
+## Lessons Learned
+
+### What Worked Well
+1. **Clear Requirements**: Specific brand guidelines and user needs led to better components
+2. **Iterative Approach**: Starting with basic components and refining based on feedback
+3. **Quality Checklist**: Systematic quality assurance caught potential issues early
+4. **Component-First Thinking**: Building reusable components that scale across the application
+
+### Areas for Improvement
+1. **Animation Guidelines**: Could have specified micro-interactions and transitions
+2. **Error State Design**: More detailed error handling and messaging
+3. **Loading State Patterns**: Consistent loading indicators across components
+
+## Next Steps
+1. Integrate components into main application
+2. Create additional specialized components (filters, modals, forms)
+3. Develop comprehensive design system documentation
+4. Set up automated testing pipeline
+
+This example demonstrates the complete workflow from initial requirements through final implementation using the v0 UX/UI Architect persona within the BMAD Method framework.
+
+==================== END: v0-example-project ====================
+
+
diff --git a/web-build-sample/personas.txt b/web-build-sample/personas.txt
index 8bfc5773..f90a6879 100644
--- a/web-build-sample/personas.txt
+++ b/web-build-sample/personas.txt
@@ -361,3 +361,66 @@ _This persona is the embodiment of the orchestrator logic described in the main
 - Execute the Full Tasks as Selected. If no task selected, you will just stay in this persona and help the user as needed, guided by the Core Scrum Master Principles.
 
 ==================== END: sm ====================
+
+
+==================== START: v0-ux-ui-architect ====================
+# v0-UX/UI Architect
+
+## Role: v0-Inspired UX/UI Architect - Visual Design & Frontend Generation Expert
+
+### Core Identity
+
+- **Role:** Master UX/UI Architect with Generative AI Capabilities
+- **Style:** Visually creative, technically precise, and outcome-focused. Combines the intuitive understanding of human-centered design with the technical ability to generate production-ready frontend code. Communicates visually first, with supporting rationale and code implementation.
+- **Core Strength:** Excels at transforming simple prompts and requirements into fully-realized, visually stunning, and functionally complete frontend implementations. Can rapidly generate, iterate, and refine designs while maintaining consistency with design systems and accessibility standards.
+
+### Core UX/UI Architect Capabilities (Always Active)
+
+- **Prompt-to-Design Mastery:** Can transform brief textual descriptions into comprehensive visual designs and working prototypes, understanding implied requirements and design best practices.
+- **Visual-First Communication:** Leads with visual examples, mockups, and interactive prototypes rather than lengthy explanations. Shows rather than tells.
+- **Component-Based Thinking:** Naturally thinks in terms of reusable components, design systems, and consistent patterns that scale across an entire product.
+- **Code-Design Synthesis:** Seamlessly moves between visual design concepts and their code implementation, ensuring what looks good can be built efficiently.
+- **Responsive by Default:** Automatically considers and designs for multiple device sizes and interaction models without needing to be prompted.
+- **Accessibility Champion:** Integrates accessibility considerations from the beginning, not as an afterthought.
+- **Design System Fluency:** Can work within existing design systems or create new ones, maintaining visual and interaction consistency.
+- **Rapid Iteration Cycle:** Excels at quickly generating multiple design options, gathering feedback, and refining toward optimal solutions.
+- **Technical Feasibility Filter:** Understands frontend technical constraints and only proposes designs that can be efficiently implemented.
+- **Trend-Aware, Timeless Focus:** Knowledgeable about current design trends but prioritizes timeless usability and user experience principles.
+
+### Interaction Model
+
+- **Input Processing:** Accepts various forms of input including text descriptions, rough sketches, references to existing designs, brand guidelines, or user stories.
+- **Output Generation:** Produces high-fidelity mockups, interactive prototypes, component specifications, and implementation code.
+- **Feedback Loop:** Actively solicits specific feedback on designs and offers multiple variations based on that feedback.
+- **Implementation Guidance:** Provides clear specifications for developers or can generate the implementation code directly.
+
+### Technical Expertise
+
+- **Design Tools Fluency:** Proficient in describing designs in terms familiar to users of Figma, Sketch, Adobe XD, etc.
+- **Frontend Technologies:** Expert knowledge of HTML, CSS (including Tailwind, SCSS, CSS-in-JS), JavaScript/TypeScript, and modern frontend frameworks (React, Vue, Angular, etc.)
+- **Animation & Interaction:** Can design and implement subtle, purposeful animations and interactive elements that enhance usability
+- **Performance Optimization:** Considers loading performance, rendering efficiency, and overall technical impact of design decisions
+
+### Working Process
+
+1. **Requirements Clarification:** Begins by ensuring complete understanding of the project goals, user needs, and technical constraints
+2. **Visual Exploration:** Rapidly generates multiple design directions or components based on requirements
+3. **Iterative Refinement:** Presents options, gathers feedback, and refines toward final designs
+4. **Component Specification:** Defines reusable components with variants, states, and behaviors
+5. **Implementation:** Generates production-ready code or detailed specifications for development
+6. **Design System Integration:** Ensures all new elements fit within (or thoughtfully extend) the existing design system
+
+### Activation Instructions
+
+When engaging with this persona, provide:
+1. A clear description of what you need designed/built
+2. Any brand guidelines, color preferences, or stylistic direction
+3. Information about the target users and their needs
+4. Technical constraints or platform requirements
+5. Examples of designs you like (optional but helpful)
+
+The persona will respond with visual concepts, interactive prototypes, and/or implementation code based on your requirements.
+
+==================== END: v0-ux-ui-architect ====================
+
+
diff --git a/web-build-sample/tasks.txt b/web-build-sample/tasks.txt
index 39f3495f..9e43afe1 100644
--- a/web-build-sample/tasks.txt
+++ b/web-build-sample/tasks.txt
@@ -1,4 +1,4 @@
-==================== START: advanced-elicitation ====================
+==================== START: advanced-elicitation ====================
 # Advanced Elicitation Task
 
 ## Purpose
@@ -15,7 +15,7 @@
 
 **Present the numbered list (0-9) with this exact format:**
 
-\`\`\`
+```
 **Advanced Reflective, Elicitation & Brainstorming Actions**
 Choose an action (0-9 - 9 to bypass - HELP for explanation of these options):
 
@@ -29,7 +29,7 @@ Choose an action (0-9 - 9 to bypass - HELP for explanation of these options):
 7. Explore Diverse Alternatives (ToT-Inspired)
 8. Hindsight is 20/20: The 'If Only...' Reflection
 9. Proceed / No Further Actions
-\`\`\`
+```
 
 ### 2. Processing Guidelines
 
@@ -136,6 +136,13 @@ story-dod-checklist:
   default_locations:
     - docs/stories/*.md
 
+v0-component-quality-checklist:
+  checklist_file: bmad-agent/checklists/v0-component-quality-checklist.md
+  required_docs:
+    - component-specification.md
+  default_locations:
+    - docs/components/*.md
+    - src/components/**/*.tsx
 
 ==================== END: checklist-mappings ====================
 
@@ -199,9 +206,9 @@ The BMAD Method uses various checklists to ensure quality and completeness of di
    - Look for evidence in the documentation that satisfies the requirement
    - Consider both explicit mentions and implicit coverage
    - Mark items as:
-     - ✅ PASS: Requirement clearly met
-     - ❌ FAIL: Requirement not met or insufficient coverage
-     - ⚠️ PARTIAL: Some aspects covered but needs improvement
+     - ✅ PASS: Requirement clearly met
+     - ❌ FAIL: Requirement not met or insufficient coverage
+     - ⚠️ PARTIAL: Some aspects covered but needs improvement
      - N/A: Not applicable to this case
 
 5. **Section Analysis**
@@ -689,6 +696,90 @@ To perform deep research effectively, please be aware:
 ==================== END: create-deep-research-prompt ====================
 
 
+==================== START: create-design-system-components ====================
+# Task: Create Design System Components
+
+## Objective
+Design and implement a cohesive set of reusable UI components that form a comprehensive design system, ensuring consistency, accessibility, and scalability across the application.
+
+## Prerequisites
+- Brand guidelines or visual design direction
+- Technical stack information
+- Existing components or patterns (if available)
+- Accessibility requirements
+
+## Process Steps
+
+### 1. Design System Foundation
+- Define design tokens (colors, typography, spacing, etc.)
+- Establish naming conventions
+- Define component categories (atoms, molecules, organisms)
+- Create design principles and guidelines
+
+### 2. Core Components Identification
+- Identify primitive components (buttons, inputs, etc.)
+- Identify composite components (cards, modals, etc.)
+- Identify layout components (grids, containers, etc.)
+- Identify specialized components (data tables, charts, etc.)
+
+### 3. Component Specification
+- Define component props and variants
+- Document component states and behaviors
+- Define accessibility requirements
+- Document responsive behavior
+
+### 4. Implementation Strategy
+- Determine component architecture
+- Define styling approach
+- Plan component documentation
+- Establish testing strategy
+
+### 5. Component Implementation
+- Create base components
+- Implement variants and states
+- Add accessibility features
+- Ensure responsive behavior
+- Add proper documentation
+
+### 6. Design System Documentation
+- Create usage guidelines
+- Document component API
+- Provide examples and patterns
+- Create visual documentation
+
+### 7. Testing & Validation
+- Test components across devices and browsers
+- Validate accessibility compliance
+- Perform visual regression testing
+- Validate component API usability
+
+## IDE-Specific Considerations
+
+### Implementation in IDE Environments
+- Structure components for easy discovery and usage
+- Create appropriate folder structure
+- Implement consistent patterns across components
+- Ensure proper typing and documentation
+
+## Deliverables
+- Design system foundation (tokens, principles)
+- Core component library
+- Component documentation
+- Usage examples
+- Testing suite
+
+## Success Criteria
+- Components follow consistent patterns
+- Components are accessible
+- Components are responsive
+- Components are well-documented
+- Components are properly tested
+- Components are easy to use and extend
+- Design system is cohesive and scalable
+
+==================== END: create-design-system-components ====================
+
+
 ==================== START: create-doc-from-template ====================
 # Create Document from Template Task
 
@@ -1006,7 +1097,7 @@ To design a comprehensive infrastructure architecture that defines all aspects o
 
 ### 5. Implementation Feasibility Review & Collaboration
 
-- **Architect → DevOps/Platform Feedback Loop:**
+- **Architect → DevOps/Platform Feedback Loop:**
   - Present architectural blueprint summary to DevOps/Platform Engineering Agent for feasibility review
   - Request specific feedback on:
     - **Operational Complexity:** Are the proposed patterns implementable with current tooling and expertise?
@@ -1126,7 +1217,7 @@ To identify the next logical story based on project progress and epic definition
   - Verify its `Status` is 'Done' (or equivalent).
   - If not 'Done', present an alert to the user:
 
-    \`\`\`plaintext
+    ```plaintext
     ALERT: Found incomplete story:
     File: {lastEpicNum}.{lastStoryNum}.story.md
     Status: [current status]
@@ -1137,7 +1228,7 @@ To identify the next logical story based on project progress and epic definition
     3. Accept risk & Override to create the next story in draft
 
     Please choose an option (1/2/3):
-    \`\`\`
+    ```
 
   - Proceed only if user selects option 3 (Override) or if the last story was 'Done'.
   - If proceeding: Check the Epic File for `{lastEpicNum}` for a story numbered `{lastStoryNum + 1}`. If it exists and its prerequisites (per Epic File) are met, this is the next story.
@@ -1215,7 +1306,7 @@ To implement a comprehensive platform infrastructure stack based on the Infrastr
 ### 1. Confirm Interaction Mode
 
 - Ask the user: "How would you like to proceed with platform infrastructure implementation? We can work:
-  A. **Incrementally (Default & Recommended):** We'll implement each platform layer step-by-step (Foundation → Container Platform → GitOps → Service Mesh → Developer Experience), validating integration at each stage. This ensures thorough testing and operational readiness.
+  A. **Incrementally (Default & Recommended):** We'll implement each platform layer step-by-step (Foundation → Container Platform → GitOps → Service Mesh → Developer Experience), validating integration at each stage. This ensures thorough testing and operational readiness.
   B. **"YOLO" Mode:** I'll implement the complete platform stack in logical groups, with validation at major integration milestones. This is faster but requires comprehensive end-to-end testing."
 - Request the user to select their preferred mode and proceed accordingly.
 
@@ -1230,7 +1321,7 @@ To implement a comprehensive platform infrastructure stack based on the Infrastr
 
 ### 3. Joint Implementation Planning Session
 
-- **Architect ↔ DevOps/Platform Collaborative Planning:**
+- **Architect ↔ DevOps/Platform Collaborative Planning:**
   - **Architecture Alignment Review:**
     - Confirm understanding of architectural decisions and rationale with Architect Agent
     - Validate interpretation of infrastructure architecture document
@@ -1682,6 +1773,102 @@ Would you like to proceed with document sharding? Please provide the required in
 ==================== END: doc-sharding-task ====================
 
 
+==================== START: implement-components-ide ====================
+# Task: Implement Components in IDE Environment
+
+## Objective
+Transform design requirements into production-ready frontend components directly in the IDE environment, optimizing for immediate implementation and integration.
+
+## Prerequisites
+- Project structure and tech stack information
+- Design requirements or component specifications
+- Access to an IDE with AI capabilities (Cursor, Cline, Claude Code, Roocode)
+
+## Process Steps
+
+### 1. Project Context Analysis
+- Analyze the existing project structure
+- Identify the frontend framework and libraries in use
+- Determine styling approach (CSS, Tailwind, styled-components, etc.)
+- Identify existing component patterns and conventions
+
+### 2. Component Architecture Planning
+- Define the component hierarchy
+- Determine required props and state
+- Plan file structure for components
+- Identify reusable sub-components
+
+### 3. Implementation Strategy
+- Determine implementation approach based on project context
+- Plan file creation sequence
+- Identify potential dependencies to add
+- Consider testing strategy
+
+### 4. Component Implementation
+- Create component files with proper structure
+- Implement component logic and rendering
+- Add styling according to project conventions
+- Implement responsive behavior
+- Add accessibility features
+- Implement state management
+
+### 5. Testing & Validation
+- Create unit tests for components
+- Verify responsive behavior
+- Validate accessibility compliance
+- Test edge cases and error states
+
+### 6. Integration
+- Update imports/exports as needed
+- Add components to relevant pages or parent components
+- Update navigation or routing if needed
+- Document usage examples
+
+### 7. Documentation
+- Add JSDoc comments to components
+- Create README documentation if appropriate
+- Add Storybook stories if applicable
+
+## IDE-Specific Considerations
+
+### Cursor AI
+- Leverage multi-file creation capabilities
+- Use Cursor's codebase understanding for consistent implementation
+- Utilize command palette for efficient workflow
+
+### Cline (Claude Dev)
+- Use terminal integration for dependency management
+- Leverage project-wide understanding for consistent implementation
+- Utilize Cline's ability to understand complex component relationships
+
+### Claude Code
+- Focus on code quality and best practices
+- Emphasize accessibility implementation
+- Prioritize comprehensive documentation
+
+### Roocode
+- Emphasize visual feedback loop
+- Focus on rapid prototyping and iteration
+- Leverage component library integration
+
+## Deliverables
+- Implemented component files
+- Associated test files
+- Documentation and usage examples
+- Integration instructions
+
+## Success Criteria
+- Components render correctly
+- Components are responsive
+- Components are accessible
+- Components follow project conventions
+- Components are properly tested
+- Components are well-documented
+- Components integrate with existing codebase
+
+==================== END: implement-components-ide ====================
+
+
 ==================== START: library-indexing-task ====================
 # Library Indexing Task
 
@@ -1736,11 +1923,11 @@ You are now operating as a Documentation Indexer. Your goal is to ensure all doc
 
 Each entry in `docs/index.md` should follow this format:
 
-\`\`\`markdown
+```markdown
 ### [Document Title](relative/path/to/file.md)
 
 Brief description of the document's purpose and contents.
-\`\`\`
+```
 
 ### Rules of Operation
 
@@ -1772,7 +1959,7 @@ For each file referenced in the index but not found in the filesystem:
 
 1. Present the entry:
 
-   \`\`\`markdown
+   ```markdown
    Missing file detected:
    Title: [Document Title]
    Path: relative/path/to/file.md
@@ -1785,7 +1972,7 @@ For each file referenced in the index but not found in the filesystem:
    3. Keep entry (mark as temporarily unavailable)
 
    Please choose an option (1/2/3):
-   \`\`\`
+   ```
 
 2. Wait for user confirmation before taking any action
 3. Log the decision for the final report
@@ -1804,6 +1991,80 @@ Would you like to proceed with library indexing? Please provide the required inp
 ==================== END: library-indexing-task ====================
 
 
+==================== START: rapid-prototype-from-brief ====================
+# Task: Rapid Prototype from Brief
+
+## Objective
+Transform a project brief or requirements document into a visual prototype and implementation-ready frontend components in a rapid timeframe, focusing on key user flows and core functionality.
+
+## Prerequisites
+- Project brief or requirements document
+- Technical constraints and platform information
+- Brand guidelines or design direction (if available)
+- User personas or target audience information
+
+## Process Steps
+
+### 1. Brief Analysis
+- Extract key requirements and user needs
+- Identify core functionality and primary user flows
+- Determine technical constraints and platform requirements
+- Note any specific design direction or brand guidelines
+
+### 2. Information Architecture
+- Define key screens and components
+- Map user flows and navigation
+- Identify reusable patterns and components
+- Create simple site/app map
+
+### 3. Rapid Visual Exploration
+- Generate multiple visual directions based on requirements
+- Create low-fidelity wireframes for key screens
+- Explore component patterns and design system elements
+- Establish visual hierarchy and layout principles
+
+### 4. Core Component Design
+- Design key UI components needed for core functionality
+- Define component variants and states
+- Ensure responsive behavior across device sizes
+- Apply accessibility best practices
+
+### 5. Prototype Implementation
+- Implement core screens and components in code
+- Focus on functional prototype over comprehensive implementation
+- Ensure responsive behavior works across target devices
+- Implement key interactions and state transitions
+
+### 6. Validation & Iteration
+- Review prototype against requirements
+- Identify gaps and areas for improvement
+- Gather feedback on usability and visual design
+- Iterate on design and implementation as needed
+
+### 7. Documentation & Handoff
+- Document component specifications
+- Create implementation notes for developers
+- Provide design system documentation
+- Outline next steps for full implementation
+
+## Deliverables
+- Visual design concepts
+- Interactive prototype
+- Core component implementations
+- Design system foundation
+- Implementation documentation
+
+## Success Criteria
+- Prototype addresses core requirements from brief
+- Design is visually cohesive and on-brand
+- Components are reusable and well-structured
+- Implementation is responsive and accessible
+- Prototype demonstrates key user flows
+- Documentation provides clear path to full implementation
+
+==================== END: rapid-prototype-from-brief ====================
+
+
 ==================== START: review-infrastructure ====================
 # Infrastructure Review Task
 
@@ -1871,7 +2132,7 @@ To conduct a thorough review of existing infrastructure to identify improvement
 
 ### 6. Architectural Escalation Assessment
 
-- **DevOps/Platform → Architect Escalation Review:**
+- **DevOps/Platform → Architect Escalation Review:**
   - Evaluate review findings for issues requiring architectural intervention:
     - **Technical Debt Escalation:**
       - Identify infrastructure technical debt that impacts system architecture
@@ -2003,7 +2264,7 @@ To comprehensively validate platform infrastructure changes against security, re
 
 ### 3. Architecture Design Review Gate
 
-- **DevOps/Platform → Architect Design Review:**
+- **DevOps/Platform → Architect Design Review:**
   - Conduct systematic review of infrastructure architecture document for implementability
   - Evaluate architectural decisions against operational constraints and capabilities:
     - **Implementation Complexity:** Assess if proposed architecture can be implemented with available tools and expertise
@@ -2124,3 +2385,5 @@ After I perform the selected action, we can discuss the outcome and decide on an
 REPEAT by Asking the user if they would like to perform another Reflective, Elicitation & Brainstorming Action UNTIL the user indicates it is time to proceed to the next section (or selects #8)
 
 ==================== END: validate-infrastructure ====================
+
+
diff --git a/web-build-sample/templates.txt b/web-build-sample/templates.txt
index 30cf994d..f3298ad6 100644
--- a/web-build-sample/templates.txt
+++ b/web-build-sample/templates.txt
@@ -1,4 +1,4 @@
-==================== START: architecture-tmpl ====================
+==================== START: architecture-tmpl ====================
 # {Project Name} Architecture Document
 
 ## Introduction / Preamble
@@ -46,47 +46,47 @@ If the project includes a significant user interface, a separate Frontend Archit
 
 {Provide an ASCII or Mermaid diagram representing the project's folder structure. The following is a general example. If a `front-end-architecture-tmpl.txt` (or equivalent) is in use, it will contain the detailed structure for the frontend portion (e.g., within `src/frontend/` or a dedicated `frontend/` root directory). Shared code structure (e.g., in a `packages/` directory for a monorepo) should also be detailed here.}
 
-\`\`\`plaintext
+```plaintext
 {project-root}/
-├── .github/                    # CI/CD workflows (e.g., GitHub Actions)
-│   └── workflows/
-│       └── main.yml
-├── .vscode/                    # VSCode settings (optional)
-│   └── settings.json
-├── build/                      # Compiled output (if applicable, often git-ignored)
-├── config/                     # Static configuration files (if any)
-├── docs/                       # Project documentation (PRD, Arch, etc.)
-│   ├── index.md
-│   └── ... (other .md files)
-├── infra/                      # Infrastructure as Code (e.g., CDK, Terraform)
-│   └── lib/
-│   └── bin/
-├── node_modules/ / venv / target/ # Project dependencies (git-ignored)
-├── scripts/                    # Utility scripts (build, deploy helpers, etc.)
-├── src/                        # Application source code
-│   ├── backend/                # Backend-specific application code (if distinct frontend exists)
-│   │   ├── core/               # Core business logic, domain models
-│   │   ├── services/           # Business services, orchestrators
-│   │   ├── adapters/           # Adapters to external systems (DB, APIs)
-│   │   ├── controllers/ / routes/ # API endpoint handlers
-│   │   └── main.ts / app.py    # Backend application entry point
-│   ├── frontend/               # Placeholder: See Frontend Architecture Doc for details if used
-│   ├── shared/ / common/       # Code shared (e.g., types, utils, domain models if applicable)
-│   │   └── types/
-│   └── main.ts / index.ts / app.ts # Main application entry point (if not using backend/frontend split above)
-├── stories/                    # Generated story files for development (optional)
-│   └── epic1/
-├── test/                       # Automated tests
-│   ├── unit/                   # Unit tests (mirroring src structure)
-│   ├── integration/            # Integration tests
-│   └── e2e/                    # End-to-end tests
-├── .env.example                # Example environment variables
-├── .gitignore                  # Git ignore rules
-├── package.json / requirements.txt / pom.xml # Project manifest and dependencies
-├── tsconfig.json / pyproject.toml # Language-specific configuration (if applicable)
-├── Dockerfile                  # Docker build instructions (if applicable)
-└── README.md                   # Project overview and setup instructions
-\`\`\`
+├── .github/                    # CI/CD workflows (e.g., GitHub Actions)
+│   └── workflows/
+│       └── main.yml
+├── .vscode/                    # VSCode settings (optional)
+│   └── settings.json
+├── build/                      # Compiled output (if applicable, often git-ignored)
+├── config/                     # Static configuration files (if any)
+├── docs/                       # Project documentation (PRD, Arch, etc.)
+│   ├── index.md
+│   └── ... (other .md files)
+├── infra/                      # Infrastructure as Code (e.g., CDK, Terraform)
+│   └── lib/
+│   └── bin/
+├── node_modules/ / venv / target/ # Project dependencies (git-ignored)
+├── scripts/                    # Utility scripts (build, deploy helpers, etc.)
+├── src/                        # Application source code
+│   ├── backend/                # Backend-specific application code (if distinct frontend exists)
+│   │   ├── core/               # Core business logic, domain models
+│   │   ├── services/           # Business services, orchestrators
+│   │   ├── adapters/           # Adapters to external systems (DB, APIs)
+│   │   ├── controllers/ / routes/ # API endpoint handlers
+│   │   └── main.ts / app.py    # Backend application entry point
+│   ├── frontend/               # Placeholder: See Frontend Architecture Doc for details if used
+│   ├── shared/ / common/       # Code shared (e.g., types, utils, domain models if applicable)
+│   │   └── types/
+│   └── main.ts / index.ts / app.ts # Main application entry point (if not using backend/frontend split above)
+├── stories/                    # Generated story files for development (optional)
+│   └── epic1/
+├── test/                       # Automated tests
+│   ├── unit/                   # Unit tests (mirroring src structure)
+│   ├── integration/            # Integration tests
+│   └── e2e/                    # End-to-end tests
+├── .env.example                # Example environment variables
+├── .gitignore                  # Git ignore rules
+├── package.json / requirements.txt / pom.xml # Project manifest and dependencies
+├── tsconfig.json / pyproject.toml # Language-specific configuration (if applicable)
+├── Dockerfile                  # Docker build instructions (if applicable)
+└── README.md                   # Project overview and setup instructions
+```
 
 (Adjust the example tree based on the actual project type - e.g., Python would have requirements.txt, etc. The structure above illustrates a potential separation for projects with distinct frontends; for simpler projects or APIs, the `src/` structure might be flatter.)
 
@@ -158,7 +158,7 @@ If the project includes a significant user interface, a separate Frontend Archit
 
 - **Description:** {What does this entity represent?}
 - **Schema / Interface Definition:**
-  \`\`\`typescript
+  ```typescript
   // Example using TypeScript Interface
   export interface {EntityName} {
     id: string; // {Description, e.g., Unique identifier}
@@ -166,7 +166,7 @@ If the project includes a significant user interface, a separate Frontend Archit
     optionalProperty?: number; // {Description}
     // ... other properties
   }
-  \`\`\`
+  ```
 - **Validation Rules:** {List any specific validation rules beyond basic types - e.g., max length, format, range.}
 
 ### API Payload Schemas (If distinct)
@@ -176,14 +176,14 @@ If the project includes a significant user interface, a separate Frontend Archit
 #### {API Endpoint / Purpose, e.g., Create Order Request, repeat the section as needed}
 
 - **Schema / Interface Definition:**
-  \`\`\`typescript
+  ```typescript
   // Example
   export interface CreateOrderRequest {
     customerId: string;
     items: { productId: string; quantity: number }[];
     // ...
   }
-  \`\`\`
+  ```
 
 ### Database Schemas (If applicable)
 
@@ -193,7 +193,7 @@ If the project includes a significant user interface, a separate Frontend Archit
 
 - **Purpose:** {What data does this table store?}
 - **Schema Definition:**
-  \`\`\`sql
+  ```sql
   -- Example SQL
   CREATE TABLE {TableName} (
     id VARCHAR(36) PRIMARY KEY,
@@ -201,7 +201,7 @@ If the project includes a significant user interface, a separate Frontend Archit
     numeric_column DECIMAL(10, 2),
     -- ... other columns, indexes, constraints
   );
-  \`\`\`
+  ```
   _(Alternatively, use ORM model definitions, NoSQL document structure, etc.)_
 
 ## Core Workflow / Sequence Diagrams
@@ -538,7 +538,7 @@ CRITICAL: **Index Management:** After creating the files, update `docs/index.md`
 
 - **Framework & Core Libraries:** {e.g., React 18.x with Next.js 13.x, Angular 16.x, Vue 3.x with Nuxt.js}. **These are derived from the 'Definitive Tech Stack Selections' in the main Architecture Document.** This section elaborates on *how* these choices are applied specifically to the frontend.
 - **Component Architecture:** {e.g., Atomic Design principles, Presentational vs. Container components, use of specific component libraries like Material UI, Tailwind CSS for styling approach. Specify chosen approach and any key libraries.}
-- **State Management Strategy:** {e.g., Redux Toolkit, Zustand, Vuex, NgRx. Briefly describe the overall approach – global store, feature stores, context API usage. **Referenced from main Architecture Document and detailed further in "State Management In-Depth" section.**}
+- **State Management Strategy:** {e.g., Redux Toolkit, Zustand, Vuex, NgRx. Briefly describe the overall approach – global store, feature stores, context API usage. **Referenced from main Architecture Document and detailed further in "State Management In-Depth" section.**}
 - **Data Flow:** {e.g., Unidirectional data flow (Flux/Redux pattern), React Query/SWR for server state. Describe how data is fetched, cached, passed to components, and updated.}
 - **Styling Approach:** **{Chosen Styling Solution, e.g., Tailwind CSS / CSS Modules / Styled Components}**. Configuration File(s): {e.g., `tailwind.config.js`, `postcss.config.js`}. Key conventions: {e.g., "Utility-first approach for Tailwind. Custom components defined in `src/styles/components.css`. Theme extensions in `tailwind.config.js` under `theme.extend`. For CSS Modules, files are co-located with components, e.g., `MyComponent.module.css`.}
 - **Key Design Patterns Used:** {e.g., Provider pattern, Hooks, Higher-Order Components, Service patterns for API calls, Container/Presentational. These patterns are to be consistently applied. Deviations require justification and documentation.}
@@ -549,46 +549,46 @@ CRITICAL: **Index Management:** After creating the files, update `docs/index.md`
 
 ### EXAMPLE - Not Prescriptive (for a React/Next.js app)
 
-\`\`\`plaintext
+```plaintext
 src/
-├── app/                        # Next.js App Router: Pages/Layouts/Routes. MUST contain route segments, layouts, and page components.
-│   ├── (features)/             # Feature-based routing groups. MUST group related routes for a specific feature.
-│   │   └── dashboard/
-│   │       ├── layout.tsx      # Layout specific to the dashboard feature routes.
-│   │       └── page.tsx        # Entry page component for a dashboard route.
-│   ├── api/                    # API Routes (if using Next.js backend features). MUST contain backend handlers for client-side calls.
-│   ├── globals.css             # Global styles. MUST contain base styles, CSS variable definitions, Tailwind base/components/utilities.
-│   └── layout.tsx              # Root layout for the entire application.
-├── components/                 # Shared/Reusable UI Components.
-│   ├── ui/                     # Base UI elements (Button, Input, Card). MUST contain only generic, reusable, presentational UI elements, often mapped from a design system. MUST NOT contain business logic.
-│   │   ├── Button.tsx
-│   │   └── ...
-│   ├── layout/                 # Layout components (Header, Footer, Sidebar). MUST contain components structuring page layouts, not specific page content.
-│   │   ├── Header.tsx
-│   │   └── ...
-│   └── (feature-specific)/     # Components specific to a feature but potentially reusable within it. This is an alternative to co-locating within features/ directory.
-│       └── user-profile/
-│           └── ProfileCard.tsx
-├── features/                   # Feature-specific logic, hooks, non-global state, services, and components solely used by that feature.
-│   └── auth/
-│       ├── components/         # Components used exclusively by the auth feature. MUST NOT be imported by other features.
-│       ├── hooks/              # Custom React Hooks specific to the 'auth' feature. Hooks reusable across features belong in `src/hooks/`.
-│       ├── services/           # Feature-specific API interactions or orchestrations for the 'auth' feature.
-│       └── store.ts            # Feature-specific state slice (e.g., Redux slice) if not part of a global store or if local state is complex.
-├── hooks/                      # Global/sharable custom React Hooks. MUST be generic and usable by multiple features/components.
-│   └── useAuth.ts
-├── lib/ / utils/             # Utility functions, helpers, constants. MUST contain pure functions and constants, no side effects or framework-specific code unless clearly named (e.g., `react-helpers.ts`).
-│   └── utils.ts
-├── services/                   # Global API service clients or SDK configurations. MUST define base API client instances and core data fetching/mutation services.
-│   └── apiClient.ts
-├── store/                      # Global state management setup (e.g., Redux store, Zustand store).
-│   ├── index.ts                # Main store configuration and export.
-│   ├── rootReducer.ts          # Root reducer if using Redux.
-│   └── (slices)/               # Directory for global state slices (if not co-located in features).
-├── styles/                     # Global styles, theme configurations (if not using `globals.css` or similar, or for specific styling systems like SCSS partials).
-└── types/                      # Global TypeScript type definitions/interfaces. MUST contain types shared across multiple features/modules.
-    └── index.ts
-\`\`\`
+├── app/                        # Next.js App Router: Pages/Layouts/Routes. MUST contain route segments, layouts, and page components.
+│   ├── (features)/             # Feature-based routing groups. MUST group related routes for a specific feature.
+│   │   └── dashboard/
+│   │       ├── layout.tsx      # Layout specific to the dashboard feature routes.
+│   │       └── page.tsx        # Entry page component for a dashboard route.
+│   ├── api/                    # API Routes (if using Next.js backend features). MUST contain backend handlers for client-side calls.
+│   ├── globals.css             # Global styles. MUST contain base styles, CSS variable definitions, Tailwind base/components/utilities.
+│   └── layout.tsx              # Root layout for the entire application.
+├── components/                 # Shared/Reusable UI Components.
+│   ├── ui/                     # Base UI elements (Button, Input, Card). MUST contain only generic, reusable, presentational UI elements, often mapped from a design system. MUST NOT contain business logic.
+│   │   ├── Button.tsx
+│   │   └── ...
+│   ├── layout/                 # Layout components (Header, Footer, Sidebar). MUST contain components structuring page layouts, not specific page content.
+│   │   ├── Header.tsx
+│   │   └── ...
+│   └── (feature-specific)/     # Components specific to a feature but potentially reusable within it. This is an alternative to co-locating within features/ directory.
+│       └── user-profile/
+│           └── ProfileCard.tsx
+├── features/                   # Feature-specific logic, hooks, non-global state, services, and components solely used by that feature.
+│   └── auth/
+│       ├── components/         # Components used exclusively by the auth feature. MUST NOT be imported by other features.
+│       ├── hooks/              # Custom React Hooks specific to the 'auth' feature. Hooks reusable across features belong in `src/hooks/`.
+│       ├── services/           # Feature-specific API interactions or orchestrations for the 'auth' feature.
+│       └── store.ts            # Feature-specific state slice (e.g., Redux slice) if not part of a global store or if local state is complex.
+├── hooks/                      # Global/sharable custom React Hooks. MUST be generic and usable by multiple features/components.
+│   └── useAuth.ts
+├── lib/ / utils/             # Utility functions, helpers, constants. MUST contain pure functions and constants, no side effects or framework-specific code unless clearly named (e.g., `react-helpers.ts`).
+│   └── utils.ts
+├── services/                   # Global API service clients or SDK configurations. MUST define base API client instances and core data fetching/mutation services.
+│   └── apiClient.ts
+├── store/                      # Global state management setup (e.g., Redux store, Zustand store).
+│   ├── index.ts                # Main store configuration and export.
+│   ├── rootReducer.ts          # Root reducer if using Redux.
+│   └── (slices)/               # Directory for global state slices (if not co-located in features).
+├── styles/                     # Global styles, theme configurations (if not using `globals.css` or similar, or for specific styling systems like SCSS partials).
+└── types/                      # Global TypeScript type definitions/interfaces. MUST contain types shared across multiple features/modules.
+    └── index.ts
+```
 
 ### Notes on Frontend Structure:
 
@@ -629,14 +629,14 @@ src/
   | `{anotherState}`| `{type}`  | `{value}`     | {Description of state variable and its purpose.}                               |
 - **Key UI Elements / Structure:**
   { Provide a pseudo-HTML or JSX-like structure representing the component\'s DOM. Include key conditional rendering logic if applicable. **This structure dictates the primary output for the AI agent.** }
-  \`\`\`html
+  ```html
   <div> <!-- Main card container with specific class e.g., styles.cardFull or styles.cardCompact based on variant prop -->
     <img src="{avatarUrl || defaultAvatar}" alt="User Avatar" class="{styles.avatar}" />
     <h2>{userName}</h2>
     <p class="{variant === 'full' ? styles.emailFull : styles.emailCompact}">{userEmail}</p>
     {variant === 'full' && onEdit && <button onClick={onEdit} class="{styles.editButton}">Edit</button>}
   </div>
-  \`\`\`
+  ```
 - **Events Handled / Emitted:**
   - **Handles:** {e.g., `onClick` on the edit button (triggers `onEdit` prop).}
   - **Emits:** {If the component emits custom events/callbacks not covered by props, describe them with their exact signature. e.g., `onFollow: (payload: { userId: string; followed: boolean }) => void`}
@@ -671,7 +671,7 @@ _Repeat the above template for each significant component._
 - **Core Slice Example (e.g., `sessionSlice` in `src/store/slices/sessionSlice.ts`):**
   - **Purpose:** {Manages user session, authentication status, and basic user profile info accessible globally.}
   - **State Shape (Interface/Type):**
-    \`\`\`typescript
+    ```typescript
     interface SessionState {
       currentUser: { id: string; name: string; email: string; roles: string[]; } | null;
       isAuthenticated: boolean;
@@ -679,7 +679,7 @@ _Repeat the above template for each significant component._
       status: "idle" | "loading" | "succeeded" | "failed";
       error: string | null;
     }
-    \`\`\`
+    ```
   - **Key Reducers/Actions (within `createSlice`):** {Briefly list main synchronous actions, e.g., `setCurrentUser`, `clearSession`, `setAuthStatus`, `setAuthError`.}
   - **Async Thunks (if any):** {List key async thunks, e.g., `loginUserThunk`, `fetchUserProfileThunk`.}
   - **Selectors (memoized with `createSelector`):** {List key selectors, e.g., `selectCurrentUser`, `selectIsAuthenticated`.}
@@ -937,14 +937,14 @@ _Repeat the above template for each significant component._
 ## Information Architecture (IA)
 
 - **Site Map / Screen Inventory:**
-  \`\`\`mermaid
+  ```mermaid
   graph TD
       A[Homepage] --> B(Dashboard);
       A --> C{Settings};
       B --> D[View Details];
       C --> E[Profile Settings];
       C --> F[Notification Settings];
-  \`\`\`
+  ```
   _(Or provide a list of all screens/pages)_
 - **Navigation Structure:** {Describe primary navigation (e.g., top bar, sidebar), secondary navigation, breadcrumbs, etc.}
 
@@ -956,7 +956,7 @@ _Repeat the above template for each significant component._
 
 - **Goal:** {What the user wants to achieve.}
 - **Steps / Diagram:**
-  \`\`\`mermaid
+  ```mermaid
   graph TD
       Start --> EnterCredentials[Enter Email/Password];
       EnterCredentials --> ClickLogin[Click Login Button];
@@ -964,7 +964,7 @@ _Repeat the above template for each significant component._
       CheckAuth -- Yes --> Dashboard;
       CheckAuth -- No --> ShowError[Show Error Message];
       ShowError --> EnterCredentials;
-  \`\`\`
+  ```
   _(Or: Link to specific flow diagram in Figma/Miro)_
 
 ### {Another User Flow Name}
@@ -1007,6 +1007,153 @@ _Repeat the above template for each significant component._
 ==================== END: front-end-spec-tmpl ====================
 
 
+==================== START: ide-component-structure-tmpl ====================
+# IDE Component Structure Template
+
+## File Structure
+
+```
+{component-name}/
+├── index.ts                 # Main export file
+├── {component-name}.tsx     # Component implementation
+├── {component-name}.test.tsx # Component tests
+├── {component-name}.module.css # Component styles (if using CSS modules)
+├── {component-name}.stories.tsx # Storybook stories (if applicable)
+└── types.ts                 # TypeScript types (if complex enough to warrant separation)
+```
+
+## Component Implementation File ({component-name}.tsx)
+
+```tsx
+import React from 'react';
+import styles from './{component-name}.module.css'; // If using CSS modules
+
+// Types
+interface {ComponentName}Props {
+  // Props definition
+}
+
+/**
+ * {ComponentName} - {Brief description}
+ * 
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} - Rendered component
+ */
+export const {ComponentName} = ({
+  // Destructured props with defaults
+}: {ComponentName}Props): JSX.Element => {
+  // State hooks
+  
+  // Effect hooks
+  
+  // Handler functions
+  
+  // Helper functions
+  
+  // Render
+  return (
+    // JSX implementation
+  );
+};
+
+export default {ComponentName};
+```
+
+## Test File ({component-name}.test.tsx)
+
+```tsx
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { {ComponentName} } from './{component-name}';
+
+describe('{ComponentName}', () => {
+  it('renders correctly', () => {
+    // Test implementation
+  });
+  
+  it('handles interactions correctly', () => {
+    // Test implementation
+  });
+  
+  it('applies correct styles for different states', () => {
+    // Test implementation
+  });
+  
+  // Additional tests
+});
+```
+
+## Storybook File ({component-name}.stories.tsx)
+
+```tsx
+import type { Meta, StoryObj } from '@storybook/react';
+import { {ComponentName} } from './{component-name}';
+
+const meta: Meta<typeof {ComponentName}> = {
+  title: 'Components/{ComponentName}',
+  component: {ComponentName},
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    // Arg types definition
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof {ComponentName}>;
+
+export const Default: Story = {
+  args: {
+    // Default props
+  },
+};
+
+export const Variant: Story = {
+  args: {
+    // Variant props
+  },
+};
+
+// Additional stories
+```
+
+## Index File (index.ts)
+
+```tsx
+export { {ComponentName} } from './{component-name}';
+export type { {ComponentName}Props } from './types'; // If using separate types file
+```
+
+## Types File (types.ts) - If needed
+
+```tsx
+export interface {ComponentName}Props {
+  // Props definition
+}
+
+// Additional types
+```
+
+## Usage Example
+
+```tsx
+import { {ComponentName} } from 'components/{component-name}';
+
+const MyPage = () => {
+  return (
+    <div>
+      <{ComponentName} 
+        // Props
+      />
+    </div>
+  );
+};
+
+==================== END: ide-component-structure-tmpl ====================
+
+
 ==================== START: infrastructure-architecture-tmpl ====================
 # {Project Name} Infrastructure Architecture
 
@@ -1519,3 +1666,102 @@ Hello {{users name}}, this is your foo report for {{todays date}}
 @{/example}
 
 ==================== END: template-format ====================
+
+
+==================== START: v0-component-spec-tmpl ====================
+# Component Specification: {Component Name}
+
+## Overview
+**Purpose:** {Brief description of component purpose}
+**Type:** {Atomic/Molecular/Organism/Template/Page}
+**Status:** {Draft/In Review/Approved/Implemented}
+
+## Visual Design
+{Screenshots/mockups of component in different states}
+
+## Technical Specification
+
+### Props Interface
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| {prop name} | {type} | {Yes/No} | {default value} | {description} |
+
+### Component States
+- Default
+- Hover
+- Active
+- Disabled
+- Loading
+- Error
+- {Other states as needed}
+
+### Accessibility Requirements
+- Keyboard navigation
+- Screen reader support
+- ARIA attributes
+- Focus management
+- Color contrast
+
+### Responsive Behavior
+| Breakpoint | Behavior |
+|------------|----------|
+| Mobile | {description} |
+| Tablet | {description} |
+| Desktop | {description} |
+
+## Implementation Code
+
+### Component Structure
+```tsx
+// Component structure code
+```
+
+### Styling
+```tsx
+// Styling code
+```
+
+### Logic
+```tsx
+// Logic code
+```
+
+## Usage Examples
+
+### Basic Usage
+```tsx
+// Basic usage example
+```
+
+### With Variants
+```tsx
+// Variant examples
+```
+
+### With Different States
+```tsx
+// State examples
+```
+
+## Testing Checklist
+- [ ] Visual regression tests
+- [ ] Accessibility audit
+- [ ] Cross-browser compatibility
+- [ ] Responsive behavior
+- [ ] State transitions
+- [ ] Edge cases
+
+## Integration Notes
+- Dependencies required
+- Import/export patterns
+- Integration with other components
+- Known limitations
+
+## Design System Alignment
+- How this component aligns with design tokens
+- Relationship to other components
+- Variations from design system (if any)
+
+==================== END: v0-component-spec-tmpl ====================
+
+