# Create Parallel React POCs

## Request: $ARGUMENTS

Usage: `/prp-poc-create-parallel [number_of_demos] "[problem_statement]"`
Example: `/prp-poc-create-parallel 5 "create a dashboard for tracking team productivity with real-time metrics"`

## Parallel POC Creation Mission

Create multiple React POC variations simultaneously to **maximize concept validation** through diverse implementation approaches. This command generates PRPs for parallel execution using specialized UI/UX and User Journey agents.

**Critical Understanding**: Each POC targets different aspects of the same problem:
- Different UI/UX approaches (minimal, polished, experimental)
- Different user journey focuses (power user, casual user, admin)
- Different technical approaches (component-heavy, page-based, single-file)
- Different fidelity levels (wireframe, demo, MVP)

## Parallel Creation Strategy

### Agent Specialization Pattern

For **N demos** requested, create **N pairs** of specialized agents:
- **N UI-UX Agents**: Each focusing on different design approaches
- **N User Journey Agents**: Each targeting different user personas/flows

**Agent Assignment Matrix:**
```yaml
Demo 1: @ui-ux-agent (Minimal/Clean) + @user-journey-agent (Power User)
Demo 2: @ui-ux-agent (Polished/Professional) + @user-journey-agent (Casual User) 
Demo 3: @ui-ux-agent (Experimental/Modern) + @user-journey-agent (Admin User)
Demo 4: @ui-ux-agent (Dashboard-Heavy) + @user-journey-agent (Mobile-First)
Demo 5: @ui-ux-agent (Component-Library) + @user-journey-agent (Accessibility-First)
```

### POC Variation Strategy

Each POC should explore different aspects:

**Design Variations:**
- **Minimal**: Clean, simple, content-focused
- **Polished**: Professional, brand-aligned, stakeholder-ready
- **Experimental**: Modern patterns, micro-interactions, innovative UI
- **Dashboard-Heavy**: Data visualization focused, charts/graphs
- **Component-Library**: Showcases reusable design system components

**User Journey Variations:**
- **Power User**: Feature-rich, keyboard shortcuts, advanced workflows
- **Casual User**: Simplified navigation, guided experiences, fewer options
- **Admin User**: Management interfaces, bulk actions, system controls
- **Mobile-First**: Touch-optimized, responsive, gesture-based
- **Accessibility-First**: Screen reader optimized, keyboard navigation, high contrast

## Implementation Process

### Step 1: Problem Analysis & POC Strategy

Analyze the problem statement and create a **parallel execution plan**:

1. **Parse Request Arguments**
   - Extract number of demos requested (default: 5)
   - Analyze problem statement for key concepts and requirements
   - Identify core user personas and interaction patterns

2. **Design POC Matrix**
   - Create unique combination of UI approach + User journey for each demo
   - Ensure each POC validates different aspects of the problem
   - Plan directory structure: `poc-{problem-slug}-{variant-number}`

### Step 2: Parallel Agent Research

**Execute all research agents in PARALLEL using Task tool:**

```yaml
# Spawn N pairs of agents simultaneously
Task 1 - @ui-ux-agent for Demo 1:
"Analyze the problem: '{problem_statement}' and design a MINIMAL/CLEAN UI approach.
Focus on: Clean typography, generous whitespace, content-first design.
Research component patterns and create UI specifications for a React POC.
Target: Stakeholder presentations requiring clear concept demonstration.
Return: UI component architecture, styling approach, and design specifications."

Task 2 - @user-journey-agent for Demo 1:
"Analyze the problem: '{problem_statement}' and design a POWER USER journey.
Focus on: Advanced features, keyboard shortcuts, efficient workflows.
Research user patterns and create journey specifications for React POC.
Target: Users who need maximum functionality and control.
Return: User flow architecture, interaction patterns, and journey specifications."

Task 3 - @ui-ux-agent for Demo 2:
"Analyze the problem: '{problem_statement}' and design a POLISHED/PROFESSIONAL UI approach.
Focus on: Brand alignment, professional aesthetics, stakeholder-ready presentation.
Research premium component patterns and create UI specifications for React POC.
Target: Executive demos and client presentations.
Return: UI component architecture, styling approach, and design specifications."

Task 4 - @user-journey-agent for Demo 2:
"Analyze the problem: '{problem_statement}' and design a CASUAL USER journey.
Focus on: Simplified navigation, guided experiences, progressive disclosure.
Research beginner-friendly patterns and create journey specifications for React POC.
Target: Users new to the system who need guidance and simplicity.
Return: User flow architecture, interaction patterns, and journey specifications."

# Continue pattern for remaining demos...
```

### Step 3: PRP Generation from Research

After all research agents complete, **synthesize results into POC PRPs**:

1. **Use prp_poc_react.md template** for each POC
2. **Incorporate agent research** into context sections
3. **Customize each PRP** based on UI/UX + User Journey specifications
4. **Create unique identifiers** for parallel development

### Step 4: POC Specification Matrix

Generate **N PRPs** with these variations:

**POC 1: Minimal Power User**
```yaml
poc_name: "poc-{problem-slug}-minimal-power"
ui_approach: "Clean, typography-focused, content-first design"
user_journey: "Advanced features, keyboard shortcuts, efficient workflows"
fidelity: "Demo"
unique_aspects: "Focuses on functionality over aesthetics, rapid interaction patterns"
```

**POC 2: Polished Casual User**
```yaml
poc_name: "poc-{problem-slug}-polished-casual"
ui_approach: "Professional aesthetics, brand-aligned, premium components"
user_journey: "Guided experience, progressive disclosure, help tooltips"
fidelity: "MVP"
unique_aspects: "Executive-ready presentation with beginner-friendly flows"
```

**POC 3: Experimental Admin**
```yaml
poc_name: "poc-{problem-slug}-experimental-admin"
ui_approach: "Modern patterns, micro-interactions, innovative UI elements"
user_journey: "Management interfaces, bulk actions, system administration"
fidelity: "Demo"
unique_aspects: "Cutting-edge design patterns with administrative power features"
```

**POC 4: Dashboard Mobile-First**
```yaml
poc_name: "poc-{problem-slug}-dashboard-mobile"
ui_approach: "Data visualization heavy, charts and metrics focused"
user_journey: "Touch-optimized interactions, responsive design, gesture-based"
fidelity: "Demo"
unique_aspects: "Analytics dashboard optimized for mobile devices"
```

**POC 5: Component-Library Accessible**
```yaml
poc_name: "poc-{problem-slug}-components-a11y"
ui_approach: "Design system showcase, reusable component patterns"
user_journey: "Screen reader optimized, keyboard navigation, inclusive design"
fidelity: "MVP"
unique_aspects: "Accessibility-first design with component library demonstration"
```

## PRP Output Structure

For each POC, generate a complete PRP file:

**File:** `PRPs/working-memory/{feature-name}/poc-{problem-slug}-{variant}.md`

**Content Structure:**
1. **Goal Section**: Specific to UI approach + User journey combination
2. **POC Scope**: Tailored to the variation's unique focus
3. **Context**: Incorporates both UI-UX and User Journey agent research
4. **Implementation Blueprint**: Customized task sequence for the variant
5. **Validation Loop**: POC-appropriate validation for the specific approach

## Parallel Execution Preparation

### Project Structure Setup

```
react-poc-project/
├── public/
├── src/
│   ├── poc-{problem-slug}-minimal-power/
│   ├── poc-{problem-slug}-polished-casual/
│   ├── poc-{problem-slug}-experimental-admin/
│   ├── poc-{problem-slug}-dashboard-mobile/
│   ├── poc-{problem-slug}-components-a11y/
│   └── App.tsx  # Main navigation between POCs
├── package.json
└── README.md
```

### Main App Navigation

Each POC should be accessible from a main navigation page:

```tsx
// App.tsx structure
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<POCNavigationHub />} />
        <Route path="/minimal-power" element={<POCMinimalPower />} />
        <Route path="/polished-casual" element={<POCPolishedCasual />} />
        <Route path="/experimental-admin" element={<POCExperimentalAdmin />} />
        <Route path="/dashboard-mobile" element={<POCDashboardMobile />} />
        <Route path="/components-a11y" element={<POCComponentsA11y />} />
      </Routes>
    </Router>
  )
}
```

## Success Criteria

### Research Quality
- [ ] **All agent pairs completed**: N UI-UX + N User Journey agents finished successfully
- [ ] **Diverse approaches identified**: Each POC targets different aspects of problem
- [ ] **Research synthesis complete**: Agent findings incorporated into PRP context
- [ ] **Unique value propositions**: Each POC validates different assumptions

### PRP Quality
- [ ] **N complete PRPs generated**: One for each POC variation
- [ ] **Context completeness**: Each PRP enables one-pass implementation
- [ ] **Validation approaches**: POC-appropriate testing for each variant
- [ ] **Implementation clarity**: Clear task sequences for parallel development

### Parallel Readiness
- [ ] **Unique naming**: All POCs have distinct identifiers and directories
- [ ] **Isolated development**: POCs can be developed simultaneously without conflicts
- [ ] **Shared infrastructure**: Common mock data and routing setup defined
- [ ] **Execution ready**: All PRPs ready for parallel execution command

## Anti-Patterns

### Research Anti-Patterns
- ❌ **Don't create identical approaches**: Ensure each POC explores different aspects
- ❌ **Don't skip agent specialization**: Each agent should have distinct focus
- ❌ **Don't generalize findings**: Customize context for each POC's unique approach
- ❌ **Don't rush parallel research**: Let all agents complete before synthesis

### PRP Generation Anti-Patterns
- ❌ **Don't copy-paste PRPs**: Each should be tailored to its unique approach
- ❌ **Don't ignore agent research**: Incorporate all findings into appropriate PRPs
- ❌ **Don't create conflicting requirements**: Ensure POCs can coexist in same project
- ❌ **Don't skip validation customization**: Each POC needs appropriate testing approach

### DO Focus On
- ✅ **Maximum concept coverage**: Each POC validates different aspects of the problem
- ✅ **Specialized agent research**: Leverage UI-UX and User Journey expertise fully
- ✅ **Parallel development readiness**: Structure for simultaneous implementation
- ✅ **Stakeholder value**: Each POC provides unique insights for decision making

---

**Remember**: The goal is **comprehensive concept validation** through **diverse parallel approaches**. Each POC should explore the problem from a different angle, maximizing the insights available to stakeholders for informed decision-making.