mycontext-cli 1.0.84 → 1.0.85

package/dist/commands/generate-context-files.js

@@ -72,20 +72,24 @@ class GenerateContextFilesCommand {
             await this.generateUserFlowsFile(contextDir, contextContent);
             await this.generateEdgeCasesFile(contextDir, contextContent);
             await this.generateTechnicalSpecsFile(contextDir, contextContent);
-            logger_1.logger.success("Context Files Generated Successfully!");
-            logger_1.logger.verbose("Generated files:");
-            logger_1.logger.verbose("  • 01a-features.md - Product features and capabilities");
-            logger_1.logger.verbose("  • 01b-user-flows.md - User journey maps and interactions");
-            logger_1.logger.verbose("  • 01c-edge-cases.md - Error scenarios and edge conditions");
-            logger_1.logger.verbose("  • 01d-technical-specs.md - Architecture and technical requirements");
-            logger_1.logger.step("Next Steps:");
-            logger_1.logger.info("1. Review and refine the generated context files");
-            logger_1.logger.info("2. Run 'mycontext compile-prd' to generate the PRD");
-            logger_1.logger.verbose("3. Run 'mycontext generate types' to generate TypeScript types");
-            logger_1.logger.verbose("4. Run 'mycontext generate brand-kit' to create brand guidelines");
-            logger_1.logger.verbose("5. Run 'mycontext generate components-list' to plan components");
-            logger_1.logger.verbose("6. Run 'mycontext generate-components all --local --with-tests' to generate components");
-            this.spinner.succeed("Context files generated successfully!");
+            logger_1.logger.success("User-Centric Context Documentation Generated Successfully!");
+            logger_1.logger.verbose("Generated user interaction documentation files:");
+            logger_1.logger.verbose("  • 01a-features.md - Every user action and system response");
+            logger_1.logger.verbose("  • 01b-user-flows.md - Complete user journey interactions");
+            logger_1.logger.verbose("  • 01c-edge-cases.md - User error scenarios and recovery paths");
+            logger_1.logger.verbose("  • 01d-technical-specs.md - Technical details supporting user experience");
+            logger_1.logger.step("🚨 CRITICAL NEXT STEP - Human-in-the-Loop Validation:");
+            logger_1.logger.info("1. 📖 Read each context file carefully - AI might miss requirements");
+            logger_1.logger.info("2. ✏️ Edit files to correct mistakes and add missing business logic");
+            logger_1.logger.info("3. 🎯 Add specific requirements AI doesn't know about your domain");
+            logger_1.logger.info("4. 🔍 Clarify ambiguous areas and remove irrelevant content");
+            logger_1.logger.step("💡 This is why MyContext works - you ensure accuracy at the source!");
+            logger_1.logger.info("5. Run 'mycontext compile-prd' when satisfied with context files");
+            logger_1.logger.verbose("6. Run 'mycontext generate types' to generate TypeScript types");
+            logger_1.logger.verbose("7. Run 'mycontext generate brand-kit' to create brand guidelines");
+            logger_1.logger.verbose("8. Run 'mycontext generate components-list' to plan components");
+            logger_1.logger.verbose("9. Run 'mycontext generate-components all --with-tests' to generate components from your corrected context");
+            this.spinner.succeed("User-centric context documentation generated successfully!");
         }
         catch (error) {
             this.spinner.fail("Context file generation failed");
@@ -124,10 +128,10 @@ class GenerateContextFilesCommand {
             });
             const content = this.formatFeaturesContent(response.text);
             await fs.writeFile(path_1.default.join(contextDir, "01a-features.md"), content);
-            console.log(chalk_1.default.green("  ✅ Features generated"));
+            console.log(chalk_1.default.green("  ✅ User interactions documented"));
         }
         catch (error) {
-            console.log(chalk_1.default.red("  ❌ Features generation failed"));
+            console.log(chalk_1.default.red("  ❌ User interactions documentation failed"));
             throw error;
         }
     }
@@ -147,10 +151,10 @@ class GenerateContextFilesCommand {
             });
             const content = this.formatUserFlowsContent(response.text);
             await fs.writeFile(path_1.default.join(contextDir, "01b-user-flows.md"), content);
-            console.log(chalk_1.default.green("  ✅ User flows generated"));
+            console.log(chalk_1.default.green("  ✅ User interaction flows documented"));
         }
         catch (error) {
-            console.log(chalk_1.default.red("  ❌ User flows generation failed"));
+            console.log(chalk_1.default.red("  ❌ User interaction flows documentation failed"));
             throw error;
         }
     }
@@ -170,10 +174,10 @@ class GenerateContextFilesCommand {
             });
             const content = this.formatEdgeCasesContent(response.text);
             await fs.writeFile(path_1.default.join(contextDir, "01c-edge-cases.md"), content);
-            console.log(chalk_1.default.green("  ✅ Edge cases generated"));
+            console.log(chalk_1.default.green("  ✅ User error scenarios documented"));
         }
         catch (error) {
-            console.log(chalk_1.default.red("  ❌ Edge cases generation failed"));
+            console.log(chalk_1.default.red("  ❌ User error scenarios documentation failed"));
             throw error;
         }
     }
@@ -193,25 +197,103 @@ class GenerateContextFilesCommand {
             });
             const content = this.formatTechnicalSpecsContent(response.text);
             await fs.writeFile(path_1.default.join(contextDir, "01d-technical-specs.md"), content);
-            console.log(chalk_1.default.green("  ✅ Technical specs generated"));
+            console.log(chalk_1.default.green("  ✅ Technical implementation documented"));
         }
         catch (error) {
-            console.log(chalk_1.default.red("  ❌ Technical specs generation failed"));
+            console.log(chalk_1.default.red("  ❌ Technical implementation documentation failed"));
             throw error;
         }
     }
     buildFeaturesPrompt(contextContent) {
-        return `You are a product manager creating a comprehensive features document for a web application.
+        return `You are a user experience researcher documenting every user interaction for a web application.
 
-${contextContent ? `Project Context (from PRD): ${contextContent}` : "Generate features for a modern web application."}
+${contextContent ? `Project Context: ${contextContent}` : "Generate user interaction documentation for a modern web application."}
 
-Create a detailed features document that includes:
+Create a comprehensive user-centric features document that documents every user interaction:
 
-1. **Core Features** - Primary functionality that defines the product
-2. **User Features** - Features that directly benefit end users
-3. **Admin Features** - Administrative and management capabilities
-4. **Technical Features** - Backend, API, and infrastructure features
-5. **Integration Features** - Third-party integrations and APIs
+## 🎯 **User-Centric Features Documentation**
+
+### **What Users Can Do (User Actions)**
+Document every action users can take in the application:
+
+**❌ Don't write technical specs:**
+- User authentication system
+- Shopping cart functionality
+- Payment processing
+
+**✅ Write user interactions:**
+- User can click "Sign Up" to create an account
+- User can browse products by category and search
+- User can add items to cart with quantity selection
+- User can complete checkout with multiple payment options
+- User can view order history and track deliveries
+
+### **What Users See (System Responses)**
+Document what users see after each action:
+
+**❌ Don't write:**
+- Dashboard displays user profile
+- Products show in grid layout
+
+**✅ Write:**
+- After login, user sees personalized dashboard with recent orders
+- Product catalog shows items with images, prices, and "Add to Cart" buttons
+- Shopping cart displays items with quantity controls and remove options
+- Checkout form shows shipping address, payment method, and order summary
+- Order confirmation page displays order number, estimated delivery, and tracking info
+
+### **User Journey Documentation**
+Document complete user journeys from start to finish:
+
+1. **New User Onboarding**
+   - User visits homepage → sees hero section with "Get Started" button
+   - User clicks "Get Started" → registration form appears
+   - User fills out form → email verification sent
+   - User verifies email → redirected to dashboard
+
+2. **Product Purchase Flow**
+   - User browses catalog → sees product grid with filters
+   - User selects product → product detail page with reviews
+   - User adds to cart → cart shows item count in header
+   - User checks out → payment form with saved addresses
+
+### **User Feedback and States**
+Document what users see in different states:
+
+**Success States:**
+- Registration successful → welcome message with next steps
+- Order placed → confirmation with order number and tracking
+- Payment processed → receipt with download option
+
+**Error States:**
+- Login failed → error message with "Forgot password?" link
+- Out of stock → "Notify when available" option
+- Payment declined → retry form with error explanation
+
+**Loading States:**
+- Page loading → skeleton screens matching final layout
+- Form submitting → disabled inputs with progress indicator
+- Image loading → placeholder with smooth transition
+
+### **User Interactions by Role**
+Document interactions for different user types:
+
+**Guest Users:**
+- Can browse products and read reviews
+- Can add items to cart (requires registration to checkout)
+- Can view help documentation and contact support
+
+**Registered Users:**
+- Can save payment methods and addresses
+- Can view order history and reorder items
+- Can update profile and preferences
+- Can leave reviews and ratings
+
+**Admin Users:**
+- Can manage products and inventory
+- Can view user analytics and reports
+- Can process refunds and handle support
+- Can update site content and settings
 6. **Security Features** - Authentication, authorization, and data protection
 7. **Performance Features** - Optimization and scalability features
 8. **Accessibility Features** - WCAG compliance and inclusive design
@@ -226,86 +308,356 @@ For each feature, include:
 Format the output as a well-structured markdown document with clear sections and bullet points.`;
     }
     buildUserFlowsPrompt(contextContent) {
-        return `You are a UX designer creating comprehensive user flow documentation for a web application.
+        return `You are a user experience researcher documenting every user interaction and system response for a web application.
+
+${contextContent ? `Project Context: ${contextContent}` : "Generate user interaction flows for a modern web application."}
+
+Create comprehensive user-centric flow documentation that captures every user interaction:
+
+## 🎯 **User Interaction Flow Documentation**
+
+### **Document Every User Action → System Response**
 
-${contextContent ? `Project Context (from PRD): ${contextContent}` : "Generate user flows for a modern web application."}
+**❌ Don't write technical flows:**
+- User navigates to login page
+- System validates credentials
+- User is redirected
 
-Create detailed user flow documentation that includes:
+**✅ Write complete user interactions:**
+- User clicks "Login" button in navigation → login form appears with email and password fields
+- User enters email and clicks "Continue" → password field appears with "Show/Hide" toggle
+- User enters password and clicks "Sign In" → loading spinner shows for 2 seconds
+- User sees error message "Invalid credentials" with "Forgot password?" link → can click link to reset password
+- User clicks "Forgot password?" → reset form appears with email field and "Send reset link" button
+- User enters email and clicks "Send reset link" → success message "Check your email for reset instructions"
 
-1. **Primary User Journeys** - Main user paths through the application
-2. **Authentication Flows** - Login, signup, password reset, etc.
-3. **Core Feature Flows** - How users interact with main features
-4. **Error Handling Flows** - What happens when things go wrong
-5. **Admin/Management Flows** - Administrative user journeys
-6. **Mobile vs Desktop Flows** - Responsive design considerations
-7. **Accessibility Flows** - Screen reader and keyboard navigation paths
+### **Complete User Journey Documentation**
+Document every step users take and what they see:
 
-For each flow, include:
-- Flow name and description
-- Step-by-step user actions
-- System responses and feedback
-- Decision points and branches
-- Error states and recovery
-- Success criteria
+1. **Homepage Interaction Flow**
+   - User visits homepage → sees hero section with "Get Started" button
+   - User clicks "Get Started" → registration form slides in from right
+   - User sees form with name, email, password fields → each field has validation
+   - User fills out form with valid data → "Create Account" button becomes enabled
+   - User clicks "Create Account" → loading state with "Creating your account..."
+   - User sees success message "Account created! Please check your email to verify"
 
-Format the output as a well-structured markdown document with clear sections, numbered steps, and flow diagrams in text format.`;
+2. **Product Browsing Flow**
+   - User visits products page → sees filter sidebar and product grid
+   - User clicks category filter → products update instantly with smooth animation
+   - User searches for "wireless headphones" → search results appear with suggestions
+   - User clicks on product image → product detail page loads with image gallery
+   - User clicks "Add to Cart" → cart icon in header shows "1" and success toast appears
+   - User clicks cart icon → cart dropdown opens showing added item with quantity controls
+
+3. **Checkout Process Flow**
+   - User clicks "Checkout" → shipping address form appears with saved addresses
+   - User selects address or fills new one → payment method selection appears
+   - User chooses payment method → payment form loads with security indicators
+   - User enters payment details → order summary updates with totals and fees
+   - User clicks "Complete Order" → processing animation with progress steps
+   - User sees order confirmation → with order number, tracking info, and "Download receipt" button
+
+### **User Feedback Documentation**
+Document what users see in every state:
+
+**Success Feedback:**
+- Form submitted successfully → green checkmark with "Success!" message
+- Item added to cart → toast notification "Added to cart" with item name
+- Order completed → confetti animation with "Order confirmed!" message
+- Email sent → blue info banner "Check your email for next steps"
+
+**Error Feedback:**
+- Invalid email format → red error under field "Please enter a valid email"
+- Network error → retry banner "Connection lost. Please check your internet"
+- Payment failed → error card "Payment declined. Please try another card"
+- Session expired → redirect to login with "Please log in again" message
+
+**Loading Feedback:**
+- Page loading → skeleton screens matching the final layout
+- Form submitting → disabled inputs with pulsing "Processing..." button
+- Image loading → blur placeholder that sharpens when loaded
+- Search loading → "Searching..." with animated dots
+
+### **User Decision Points**
+Document where users make choices and what happens:
+
+**Navigation Choices:**
+- User clicks "Products" → product catalog loads with filters visible
+- User clicks "Categories" → category page with subcategories and breadcrumbs
+- User clicks "Profile" → account settings with tabs for different sections
+- User clicks "Help" → help center with search and popular topics
+
+**Feature Choices:**
+- User can choose "Express checkout" → skips shipping form and uses defaults
+- User can select "Guest checkout" → creates account automatically after purchase
+- User can choose "Save for later" → item moves to wishlist instead of cart
+- User can select "Notify me" → gets alerts when out-of-stock items return
+
+**Preference Choices:**
+- User can toggle "Dark mode" → entire interface switches theme instantly
+- User can select "Language" → content translates with loading indicator
+- User can choose "Notifications" → settings panel with granular options
+- User can set "Privacy" → different levels affect what data is collected
+
+### **User Error Recovery**
+Document how users recover from mistakes:
+
+**Input Errors:**
+- User enters invalid email → field highlights red with helpful message
+- User leaves required field empty → "This field is required" appears on blur
+- User enters weak password → strength meter shows with improvement tips
+- User selects invalid date → calendar widget shows available dates
+
+**System Errors:**
+- Server error during save → retry button with "Try again" and exponential backoff
+- Network timeout → offline banner with "Reconnecting..." and auto-retry
+- File upload fails → drag-and-drop area shows "Upload failed. Try again?"
+- Payment processing error → clear error message with support contact info
+
+**User Actions:**
+- User can click "Cancel" at any time → confirmation dialog "Discard changes?"
+- User can use "Back" button → returns to previous state without data loss
+- User can click "Help" icons → contextual help appears without leaving flow
+- User can contact support → chat widget opens with conversation context
+
+Format the output as a well-structured markdown document with clear sections and numbered steps.`;
     }
     buildEdgeCasesPrompt(contextContent) {
-        return `You are a QA engineer creating comprehensive edge cases and error scenarios documentation for a web application.
-
-${contextContent ? `Project Context (from PRD): ${contextContent}` : "Generate edge cases for a modern web application."}
-
-Create detailed edge cases documentation that includes:
-
-1. **Input Validation Edge Cases** - Invalid, malformed, or extreme input scenarios
-2. **Network Edge Cases** - Offline, slow connections, timeouts, API failures
-3. **Browser Edge Cases** - Different browsers, versions, disabled features
-4. **Device Edge Cases** - Mobile, tablet, desktop, different screen sizes
-5. **Data Edge Cases** - Empty data, large datasets, concurrent modifications
-6. **Security Edge Cases** - Injection attacks, XSS, CSRF, unauthorized access
-7. **Performance Edge Cases** - High load, memory constraints, slow operations
-8. **Accessibility Edge Cases** - Screen readers, keyboard-only navigation, high contrast
-9. **Integration Edge Cases** - Third-party service failures, API changes
-10. **Business Logic Edge Cases** - Boundary conditions, race conditions
-
-For each edge case, include:
-- Scenario description
-- Expected behavior
-- Potential impact
-- Mitigation strategies
-- Testing approach
+        return `You are a user experience researcher documenting error scenarios and edge cases from the user's perspective.
+
+${contextContent ? `Project Context: ${contextContent}` : "Generate user error scenarios for a modern web application."}
+
+Create comprehensive user-centric error documentation that captures what users experience when things go wrong:
+
+## 🎯 **User-Centric Error Scenarios Documentation**
+
+### **Document What Users See When Errors Happen**
+
+**❌ Don't write technical edge cases:**
+- Network timeout after 30 seconds
+- Invalid input validation failure
+- Database connection error
+
+**✅ Write user experiences:**
+- User clicks "Save" → sees "Saving..." for 5 seconds → gets "Connection lost. Please check your internet" message
+- User enters email without @ → field turns red → "Please enter a valid email address" appears below field
+- User tries to login with wrong password → "Invalid credentials" message appears → "Forgot password?" link becomes clickable
+
+### **User Error Recovery Documentation**
+Document how users recover from different error scenarios:
+
+1. **Network Issues**
+   - User clicks "Submit form" → sees loading spinner → connection drops
+   - User sees "Connection lost" banner with "Reconnecting..." message
+   - After 10 seconds, user sees "Connection restored" with auto-retry
+   - User can click "Retry now" to manually retry or "Try again later" to save draft
+
+2. **Input Validation Errors**
+   - User enters phone number "123" → field highlights red → "Phone number must be at least 10 digits"
+   - User leaves required field empty → clicks "Next" → form scrolls to empty field with red border
+   - User enters password "123" → strength meter shows red → "Password must be at least 8 characters"
+   - User enters mismatched passwords → confirmation field shows "Passwords don't match"
+
+3. **Authentication Errors**
+   - User clicks "Sign In" → loading spinner appears → "Invalid email or password" message shows
+   - User sees "Forgot password?" link → clicks it → reset form loads with email field
+   - User enters unregistered email for password reset → "No account found with that email" appears
+   - User enters registered email → "Reset instructions sent" with "Check your email" message
+
+4. **Payment Errors**
+   - User clicks "Complete payment" → processing animation starts → "Payment declined" message appears
+   - User sees "Please try another payment method" with card form → can select saved cards or add new
+   - User enters expired card → "Card expired. Please use a different card" with date validation
+   - User enters insufficient funds → "Insufficient funds" with suggestion to use different payment method
+
+5. **Data Loading Errors**
+   - User opens product page → sees skeleton loading → "Failed to load product information" message
+   - User clicks "Load more" → loading spinner appears → "Connection timeout. Try again?" message
+   - User searches for products → search bar shows "Searching..." → "No results found" with suggestions
+   - User opens cart → sees "Loading cart..." → "Your cart is empty" or "Failed to load cart items"
+
+6. **File Upload Errors**
+   - User drags file to upload area → sees "Uploading..." → "File too large (max 10MB)" message
+   - User selects unsupported file type → "Unsupported file type. Please use JPG, PNG, or PDF"
+   - User tries to upload during network issue → "Upload failed due to connection issues" with retry
+   - User uploads corrupted file → "File appears to be corrupted. Please try again"
+
+7. **Session Management Errors**
+   - User tries to access protected page → sees "Session expired. Please log in again" modal
+   - User clicks "Stay logged in" → redirected to login form with "Re-login required" message
+   - User logs in from new device → sees "Login from unrecognized device" with security options
+   - User has multiple tabs open → one tab shows "Account accessed from another location"
+
+8. **Browser/Device Compatibility**
+   - User on old browser → sees "Your browser is not supported. Please update to latest version"
+   - User on mobile device → sees "This feature works best on desktop" with mobile-optimized version
+   - User with JavaScript disabled → sees "JavaScript required for this feature to work"
+   - User with slow connection → sees "Loading slowly? Try our mobile app for better performance"
+
+9. **Business Logic Errors**
+   - User tries to buy out-of-stock item → sees "Out of stock" with "Notify when available" option
+   - User applies expired coupon → sees "Coupon expired" with suggestion to use current offers
+   - User tries to access admin area without permission → sees "Access denied" with contact info
+   - User reaches usage limits → sees "You've reached your monthly limit" with upgrade options
+
+10. **Third-Party Integration Errors**
+    - User tries to login with Google → sees "Google login temporarily unavailable" with email option
+    - User pays with PayPal → sees "PayPal service unavailable" with alternative payment methods
+    - User shares on social media → sees "Unable to connect to [platform]" with manual share option
+    - User gets email notifications → sees "Notification service issue" with settings to check preferences
+
+### **User Feedback and Recovery Patterns**
+Document consistent patterns for error handling:
+
+**Error Message Guidelines:**
+- Always explain what went wrong in user-friendly language
+- Suggest next steps or alternatives when possible
+- Provide contact information for complex issues
+- Use consistent visual styling (red borders, warning icons)
+
+**Recovery Action Guidelines:**
+- Offer retry options with clear labels ("Try again", "Retry", "Refresh")
+- Provide alternative paths when primary action fails
+- Save user progress when possible (drafts, partial forms)
+- Allow users to go back without losing data
+
+**Loading State Guidelines:**
+- Show progress indicators for long operations
+- Disable inputs during processing to prevent double-submission
+- Provide cancel options for non-critical operations
+- Use skeleton screens that match final layout
+
+**Help and Support Guidelines:**
+- Contextual help available without leaving current flow
+- Clear escalation paths for complex issues
+- Self-service options before contacting support
+- Preserve context when transferring to support
 
 Format the output as a well-structured markdown document with clear sections and detailed scenarios.`;
     }
     buildTechnicalSpecsPrompt(contextContent) {
-        return `You are a technical architect creating comprehensive technical specifications for a web application.
-
-${contextContent ? `Project Context (from PRD): ${contextContent}` : "Generate technical specs for a modern web application."}
-
-Create detailed technical specifications that include:
-
-1. **Architecture Overview** - System design, components, and relationships
-2. **Technology Stack** - Frontend, backend, database, deployment technologies
-3. **API Specifications** - Endpoints, request/response formats, authentication
-4. **Database Design** - Schema, relationships, indexing, data flow
-5. **Security Requirements** - Authentication, authorization, data protection
-6. **Performance Requirements** - Response times, throughput, scalability
-7. **Deployment Architecture** - Infrastructure, CI/CD, monitoring
-8. **Integration Requirements** - Third-party services, APIs, webhooks
-9. **Development Standards** - Code style, testing, documentation
-10. **Monitoring and Logging** - Error tracking, analytics, performance monitoring
-
-For each specification, include:
-- Requirement description
-- Technical approach
-- Implementation details
-- Dependencies
-- Success criteria
-
-Format the output as a well-structured markdown document with clear sections and technical details.`;
+        return `You are a user experience researcher documenting technical implementation details from the user's perspective.
+
+${contextContent ? `Project Context: ${contextContent}` : "Generate technical implementation details for a modern web application."}
+
+Create user-centric technical documentation that explains how the system works behind the scenes to support user interactions:
+
+## 🎯 **User-Centric Technical Implementation Documentation**
+
+### **Document Technical Details That Support User Experiences**
+
+**❌ Don't write abstract technical specs:**
+- React 18 with Next.js 14
+- PostgreSQL database with Prisma ORM
+- JWT authentication with refresh tokens
+
+**✅ Write user-focused technical details:**
+- Pages load instantly with React Server Components → users see content immediately without loading delays
+- Database queries optimized for product catalog → users can browse thousands of products with instant search
+- Authentication tokens automatically refreshed → users stay logged in even after browser restart
+- Images served via CDN → users see product photos instantly even on slow connections
+
+### **User Performance Documentation**
+Document how technical choices affect user experience:
+
+1. **Loading Performance**
+   - Homepage loads in <2 seconds → users see hero content immediately
+   - Product images load progressively → users see low-res preview first, then full quality
+   - Search results appear in <100ms → users get instant feedback as they type
+   - Page transitions use client-side routing → users navigate without full page reloads
+
+2. **Responsive Design Implementation**
+   - CSS Grid and Flexbox for flexible layouts → users see properly aligned content on any screen size
+   - Mobile-first responsive breakpoints → users get optimized experience on phones and tablets
+   - Touch-friendly interaction targets → users can easily tap buttons and links on mobile
+   - Keyboard navigation support → users can navigate entirely with keyboard if needed
+
+3. **Accessibility Implementation**
+   - ARIA labels and semantic HTML → screen readers announce content correctly to users
+   - High contrast color schemes → users with visual impairments can read all text
+   - Keyboard shortcuts for common actions → power users can navigate efficiently
+   - Focus management for complex interactions → users never lose their place in forms
+
+4. **Error Handling Implementation**
+   - Graceful degradation for failed requests → users see helpful messages instead of blank pages
+   - Retry mechanisms with exponential backoff → users get automatic recovery from temporary issues
+   - Offline detection and messaging → users understand when connection issues occur
+   - Fallback content for missing data → users see alternative content when primary data fails to load
+
+5. **Security Implementation**
+   - HTTPS encryption for all data → users' personal information is protected in transit
+   - CSRF protection on forms → users' actions are protected from cross-site attacks
+   - XSS prevention measures → users' data is safe from script injection attacks
+   - Secure password hashing → users' credentials are protected even if database is compromised
+
+6. **Data Management Implementation**
+   - Real-time data synchronization → users see live updates without refreshing
+   - Optimistic UI updates → users see immediate feedback while server processes requests
+   - Conflict resolution for concurrent edits → users' changes are preserved when multiple people edit
+   - Data validation on client and server → users get immediate feedback on invalid input
+
+7. **Integration Implementation**
+   - Payment processor integration → users can complete purchases securely
+   - Email service integration → users receive order confirmations and notifications
+   - Analytics tracking → user behavior is measured to improve experience
+   - Social media integration → users can share products with their networks
+
+8. **Performance Optimization**
+   - Code splitting for faster loading → users only download code they need for current page
+   - Image optimization and lazy loading → users see optimized images without waiting
+   - Caching strategies for repeat visits → returning users get even faster experience
+   - Bundle optimization → users download minimal JavaScript for fast execution
+
+9. **Monitoring and Analytics**
+   - User interaction tracking → understand how users navigate and where they get stuck
+   - Performance monitoring → identify slow pages and optimize user experience
+   - Error tracking → quickly identify and fix issues affecting users
+   - A/B testing framework → test different approaches to improve user experience
+
+10. **Scalability Considerations**
+    - Horizontal scaling capabilities → handle traffic spikes without user impact
+    - Database optimization → maintain performance as user base grows
+    - CDN integration → serve content quickly to users worldwide
+    - Rate limiting protection → prevent abuse while maintaining service for legitimate users
+
+### **Technical Implementation Guidelines**
+Document how technical choices support user needs:
+
+**User Experience Priority:**
+- Always prioritize user experience over technical complexity
+- Choose technologies that enable smooth, fast user interactions
+- Implement graceful fallbacks for when things go wrong
+- Monitor real user impact of technical changes
+
+**Performance First:**
+- Optimize for perceived performance (what users actually experience)
+- Use loading states and progress indicators
+- Implement skeleton screens that match final layouts
+- Cache intelligently to improve repeat visit performance
+
+**Accessibility by Design:**
+- Build accessibility into components from the start
+- Test with screen readers and keyboard navigation
+- Follow WCAG guidelines for color contrast and interaction
+- Consider users with different abilities and devices
+
+**Error Resilience:**
+- Implement comprehensive error handling
+- Provide clear recovery paths for users
+- Use retry mechanisms with user-friendly messaging
+- Log errors for developers while showing helpful messages to users
+
+**Security User-Focused:**
+- Protect user data without compromising usability
+- Use security measures that are invisible to users
+- Provide clear security status indicators
+- Balance security with user convenience
+
+Format the output as a well-structured markdown document with clear sections and detailed scenarios.`;
     }
     formatFeaturesContent(response) {
-        return `# Product Features
+        return `# User-Centric Features Documentation
 
 ${response}
 
@@ -315,7 +667,7 @@ ${response}
 `;
     }
     formatUserFlowsContent(response) {
-        return `# User Flows
+        return `# User Interaction Flows Documentation
 
 ${response}
 
@@ -325,7 +677,7 @@ ${response}
 `;
     }
     formatEdgeCasesContent(response) {
-        return `# Edge Cases and Error Scenarios
+        return `# User Error Scenarios and Recovery Documentation
 
 ${response}
 
@@ -335,7 +687,7 @@ ${response}
 `;
     }
     formatTechnicalSpecsContent(response) {
-        return `# Technical Specifications
+        return `# User-Centric Technical Implementation Documentation
 
 ${response}