326 lines
13 KiB
Markdown
326 lines
13 KiB
Markdown
# Execute Parallel React POCs
|
|
|
|
## POC Directory: $ARGUMENTS
|
|
|
|
Usage: `/prp-poc-execute-parallel [poc_directory_pattern]`
|
|
Example: `/prp-poc-execute-parallel "PRPs/poc-dashboard-*"`
|
|
|
|
## Mission: Parallel POC Implementation Success
|
|
|
|
Transform multiple React POC PRPs into working demonstrations simultaneously through **coordinated parallel execution** using specialized UI/UX and User Journey agents.
|
|
|
|
**Critical Understanding**: Each POC requires specialized execution:
|
|
- **UI-focused implementation** leveraging @ui-ux-agent expertise
|
|
- **User journey validation** using @user-journey-agent insights
|
|
- **Parallel development** without interference between POCs
|
|
- **Coordinated validation** ensuring all POCs demonstrate successfully
|
|
|
|
## Parallel Execution Strategy
|
|
|
|
### Agent Orchestration Pattern
|
|
|
|
For **N POCs** discovered, create **N execution pairs**:
|
|
- **N UI-UX Implementation Agents**: Each building the specific UI approach
|
|
- **N User Journey Validation Agents**: Each ensuring journey flows work correctly
|
|
|
|
**Execution Agent Assignment:**
|
|
```yaml
|
|
POC 1: @ui-ux-agent (Build minimal/clean interface) + @user-journey-agent (Validate power user flows)
|
|
POC 2: @ui-ux-agent (Build polished/professional interface) + @user-journey-agent (Validate casual user flows)
|
|
POC 3: @ui-ux-agent (Build experimental/modern interface) + @user-journey-agent (Validate admin user flows)
|
|
POC 4: @ui-ux-agent (Build dashboard/data-heavy interface) + @user-journey-agent (Validate mobile-first flows)
|
|
POC 5: @ui-ux-agent (Build component-library interface) + @user-journey-agent (Validate accessibility flows)
|
|
```
|
|
|
|
## Pre-Execution Setup
|
|
|
|
### Step 1: Environment Preparation
|
|
|
|
1. **Create Fresh React Project**
|
|
```bash
|
|
npx create-react-app react-poc-demos --template typescript
|
|
cd react-poc-demos
|
|
npm install react-router-dom @faker-js/faker msw
|
|
npm install -D @types/react-router-dom
|
|
```
|
|
|
|
2. **Discover POC PRPs**
|
|
- Scan for POC PRP files matching the pattern
|
|
- Extract POC specifications and requirements
|
|
- Plan directory structure and routing
|
|
|
|
3. **Setup Project Structure**
|
|
```
|
|
src/
|
|
├── components/
|
|
│ └── shared/ # Shared components across POCs
|
|
├── data/
|
|
│ └── mocks/ # Shared mock data
|
|
├── poc-{name}-{variant}/
|
|
│ ├── components/ # POC-specific components
|
|
│ ├── pages/ # POC-specific pages
|
|
│ ├── hooks/ # POC-specific hooks
|
|
│ └── styles/ # POC-specific styles
|
|
└── App.tsx # Main navigation hub
|
|
```
|
|
|
|
## Parallel Implementation Process
|
|
|
|
### Step 2: Simultaneous POC Development
|
|
|
|
**Execute all implementation pairs in PARALLEL using Task tool:**
|
|
|
|
```yaml
|
|
# For each discovered POC, spawn specialized agent pair
|
|
Task 1 - @ui-ux-agent Implementation for POC 1:
|
|
"Read and implement PRP: 'PRPs/working-memory/{feature-name}/poc-{name}-{variant1}.md'
|
|
Focus on: Building the UI components and styling specified in the PRP.
|
|
Requirements:
|
|
- Follow the UI approach defined in the PRP context
|
|
- Implement all components with TypeScript interfaces
|
|
- Apply the styling approach (minimal/clean as specified)
|
|
- Create responsive layouts following the PRP requirements
|
|
- Use mock data integration as specified
|
|
Directory: src/poc-{name}-{variant1}/
|
|
Return: Complete UI implementation with all components functional"
|
|
|
|
Task 2 - @user-journey-agent Validation for POC 1:
|
|
"Read and validate PRP implementation: 'PRPs/working-memory/{feature-name}/poc-{name}-{variant1}.md'
|
|
Focus on: Ensuring user journey flows work as specified in the PRP.
|
|
Requirements:
|
|
- Test all user interactions defined in the PRP
|
|
- Validate navigation flows and state management
|
|
- Ensure mock data scenarios cover user journey requirements
|
|
- Test user flow completion from start to finish
|
|
- Document any journey friction points discovered
|
|
Directory: src/poc-{name}-{variant1}/
|
|
Return: Journey validation report and any flow improvements needed"
|
|
|
|
Task 3 - @ui-ux-agent Implementation for POC 2:
|
|
"Read and implement PRP: 'PRPs/working-memory/{feature-name}/poc-{name}-{variant2}.md'
|
|
Focus on: Building the UI components and styling specified in the PRP.
|
|
Requirements:
|
|
- Follow the UI approach defined in the PRP context (polished/professional)
|
|
- Implement all components with premium aesthetics
|
|
- Create brand-aligned styling and professional presentation
|
|
- Build stakeholder-ready demonstration interface
|
|
- Integrate realistic mock data for presentations
|
|
Directory: src/poc-{name}-{variant2}/
|
|
Return: Complete UI implementation with professional polish"
|
|
|
|
Task 4 - @user-journey-agent Validation for POC 2:
|
|
"Read and validate PRP implementation: 'PRPs/working-memory/{feature-name}/poc-{name}-{variant2}.md'
|
|
Focus on: Ensuring casual user journey flows work intuitively.
|
|
Requirements:
|
|
- Test simplified navigation and guided experiences
|
|
- Validate progressive disclosure and help systems
|
|
- Ensure beginner-friendly interaction patterns work
|
|
- Test complete user onboarding and guidance flows
|
|
- Document usability for non-expert users
|
|
Directory: src/poc-{name}-{variant2}/
|
|
Return: Casual user validation report and usability assessment"
|
|
|
|
# Continue pattern for all discovered POCs...
|
|
```
|
|
|
|
### Step 3: Main Navigation Implementation
|
|
|
|
**After all POCs are built, create navigation hub:**
|
|
|
|
```typescript
|
|
// App.tsx - Main navigation between POCs
|
|
import React from 'react'
|
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
|
|
import POCNavigationHub from './components/POCNavigationHub'
|
|
|
|
// Import all POC entry points (generated dynamically based on discovered POCs)
|
|
const pocRoutes = [
|
|
{ path: '/poc-1', component: lazy(() => import('./poc-{name}-{variant1}/pages/Demo')), title: 'Minimal Power User' },
|
|
{ path: '/poc-2', component: lazy(() => import('./poc-{name}-{variant2}/pages/Demo')), title: 'Polished Casual User' },
|
|
// ... additional routes for all POCs
|
|
]
|
|
|
|
function App() {
|
|
return (
|
|
<Router>
|
|
<Routes>
|
|
<Route path="/" element={<POCNavigationHub pocs={pocRoutes} />} />
|
|
{pocRoutes.map(({ path, component: Component }) => (
|
|
<Route key={path} path={path} element={<Suspense><Component /></Suspense>} />
|
|
))}
|
|
</Routes>
|
|
</Router>
|
|
)
|
|
}
|
|
```
|
|
|
|
### Step 4: Coordinated Validation
|
|
|
|
**Execute validation for all POCs simultaneously:**
|
|
|
|
1. **Technical Validation (All POCs)**
|
|
```bash
|
|
npm run lint # All POCs pass linting
|
|
npm run type-check # All TypeScript errors resolved
|
|
npm run build # Production build succeeds
|
|
npm run test # All POC smoke tests pass
|
|
```
|
|
|
|
2. **Functional Validation (Per POC)**
|
|
- Each POC loads without errors
|
|
- Core user journeys navigable in each POC
|
|
- Mock data displays correctly in all variations
|
|
- Navigation between POCs works seamlessly
|
|
|
|
3. **User Journey Validation (Agent-Specific)**
|
|
- Power user flows efficient and feature-complete
|
|
- Casual user flows intuitive and guided
|
|
- Admin flows comprehensive and control-focused
|
|
- Mobile flows touch-optimized and responsive
|
|
- Accessibility flows screen reader compatible
|
|
|
|
## Coordination & Conflict Resolution
|
|
|
|
### Step 5: Integration Management
|
|
|
|
1. **Shared Resource Coordination**
|
|
- Merge shared mock data without conflicts
|
|
- Resolve common component naming conflicts
|
|
- Integrate shared utilities and hooks
|
|
- Coordinate routing and navigation structure
|
|
|
|
2. **Style Isolation**
|
|
- Ensure POC-specific styles don't interfere
|
|
- Use CSS modules or styled-components for isolation
|
|
- Coordinate shared design system tokens
|
|
- Resolve competing global styles
|
|
|
|
3. **Dependency Management**
|
|
- Consolidate common dependencies
|
|
- Resolve version conflicts between POC requirements
|
|
- Optimize bundle size across all POCs
|
|
- Manage shared vs POC-specific packages
|
|
|
|
## Final Validation & Demo Preparation
|
|
|
|
### Step 6: Comprehensive Testing
|
|
|
|
**Multi-POC Validation Checklist:**
|
|
|
|
**Technical Completeness:**
|
|
- [ ] **All POCs Build Successfully**: No TypeScript or build errors across any POC
|
|
- [ ] **Shared Infrastructure Works**: Navigation, routing, shared components functional
|
|
- [ ] **Isolated Functionality**: Each POC operates independently without interference
|
|
- [ ] **Performance Acceptable**: All POCs load and perform adequately for demos
|
|
|
|
**Feature Completeness:**
|
|
- [ ] **All User Journeys Complete**: Each POC's primary user flow works end-to-end
|
|
- [ ] **Specialized Approaches Visible**: Unique value propositions clear in each POC
|
|
- [ ] **Mock Data Realistic**: All POCs display meaningful, realistic data scenarios
|
|
- [ ] **Cross-POC Navigation**: Users can move between different POC approaches easily
|
|
|
|
**Business Validation:**
|
|
- [ ] **Concept Differentiation Clear**: Each POC explores different aspects of the problem
|
|
- [ ] **Stakeholder Demo Ready**: All POCs ready for comparative evaluation
|
|
- [ ] **Findings Documentation**: Each POC's insights and limitations documented
|
|
- [ ] **Next Steps Identified**: Production recommendations available for each approach
|
|
|
|
### Step 7: Demo Script Preparation
|
|
|
|
**Create demonstration script for stakeholder presentations:**
|
|
|
|
```markdown
|
|
# POC Demonstration Script
|
|
|
|
## Introduction (2 minutes)
|
|
- Problem statement overview
|
|
- POC approach explanation
|
|
- Navigation between different solutions
|
|
|
|
## POC 1: Minimal Power User (3 minutes)
|
|
- Target audience: Expert users needing efficiency
|
|
- Key features demonstration
|
|
- Performance and workflow benefits
|
|
|
|
## POC 2: Polished Casual User (3 minutes)
|
|
- Target audience: General users needing guidance
|
|
- Guided experience demonstration
|
|
- Ease of use and accessibility benefits
|
|
|
|
## POC 3: Experimental Admin (3 minutes)
|
|
- Target audience: System administrators
|
|
- Advanced controls demonstration
|
|
- Management and oversight capabilities
|
|
|
|
## POC 4: Dashboard Mobile-First (3 minutes)
|
|
- Target audience: Mobile-centric users
|
|
- Data visualization demonstration
|
|
- Touch interaction and responsive benefits
|
|
|
|
## POC 5: Component-Library Accessible (3 minutes)
|
|
- Target audience: Inclusive design requirements
|
|
- Accessibility features demonstration
|
|
- Design system and consistency benefits
|
|
|
|
## Comparison & Recommendations (5 minutes)
|
|
- Side-by-side feature comparison
|
|
- User feedback integration
|
|
- Production implementation recommendations
|
|
```
|
|
|
|
## Success Metrics
|
|
|
|
### Implementation Success
|
|
- [ ] **All POCs Functional**: Every discovered PRP implemented successfully
|
|
- [ ] **Agent Specialization Effective**: UI-UX and User Journey agents delivered specialized results
|
|
- [ ] **Parallel Development Efficient**: No conflicts or interference between concurrent implementations
|
|
- [ ] **Validation Complete**: All POCs pass technical and functional validation
|
|
|
|
### Business Value Delivery
|
|
- [ ] **Comprehensive Concept Coverage**: Problem explored from multiple angles successfully
|
|
- [ ] **Clear Differentiation**: Each POC's unique value proposition demonstrated
|
|
- [ ] **Stakeholder Ready**: All POCs ready for evaluation and feedback gathering
|
|
- [ ] **Decision Support**: Sufficient information available for production approach selection
|
|
|
|
## Error Handling & Recovery
|
|
|
|
### Common Issues & Solutions
|
|
|
|
**Build Conflicts:**
|
|
- Isolate POC-specific dependencies
|
|
- Use namespace prefixes for shared utilities
|
|
- Implement CSS-in-JS for style isolation
|
|
|
|
**Agent Coordination Issues:**
|
|
- Re-assign failed implementations to backup agents
|
|
- Merge partial implementations when agents complete successfully
|
|
- Prioritize critical POCs if time constraints emerge
|
|
|
|
**Performance Issues:**
|
|
- Lazy load POC components to improve initial page load
|
|
- Optimize shared mock data generation
|
|
- Implement code splitting at POC boundaries
|
|
|
|
## Anti-Patterns
|
|
|
|
### Execution Anti-Patterns
|
|
- ❌ **Don't execute POCs sequentially**: Use parallel agent execution always
|
|
- ❌ **Don't ignore agent specialization**: UI-UX and User Journey agents have distinct roles
|
|
- ❌ **Don't rush validation**: Each POC needs proper testing and verification
|
|
- ❌ **Don't skip integration testing**: Cross-POC navigation and shared resources need validation
|
|
|
|
### Coordination Anti-Patterns
|
|
- ❌ **Don't allow POC interference**: Maintain isolation between implementations
|
|
- ❌ **Don't duplicate shared logic**: Coordinate common utilities and mock data
|
|
- ❌ **Don't ignore conflicts**: Resolve dependency and styling conflicts early
|
|
- ❌ **Don't skip demo preparation**: Stakeholder presentation needs coordination
|
|
|
|
### DO Focus On
|
|
- ✅ **Specialized agent utilization**: Leverage UI-UX and User Journey expertise fully
|
|
- ✅ **Parallel execution efficiency**: Maximum development speed through coordination
|
|
- ✅ **Cross-POC consistency**: Shared infrastructure and navigation experience
|
|
- ✅ **Business value delivery**: Each POC provides unique insights for decision making
|
|
|
|
---
|
|
|
|
**Remember**: The goal is **successful parallel implementation** of multiple POC approaches that collectively provide **comprehensive concept validation** for stakeholder decision-making. |