Initial commit

2025-11-30 08:53:00 +08:00
commit c961db41d7
20 changed files with 2110 additions and 0 deletions
--- a/commands/prp-poc-execute-parallel.md
+++ b/commands/prp-poc-execute-parallel.md
@@ -0,0 +1,326 @@
+# 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.