fraim-framework 2.0.30 → 2.0.34

package/registry/workflows/replicate/re-implementation-strategy.md

@@ -1,226 +0,0 @@
-# Re-implementation Strategy Workflow
-
-## INTENT
-To systematically re-implement an application based on discovered use cases and analysis, ensuring feature parity and completeness.
-
-## PRINCIPLES
-- **Feature Parity**: Ensure all discovered features are implemented
-- **Systematic Approach**: Follow structured implementation phases
-- **Incremental Progress**: Implement features one at a time
-- **Validation**: Verify parity at each stage
-
-## Overview
-This workflow guides agents through systematically re-implementing an application based on discovered use cases and analysis, ensuring feature parity and completeness.
-
-## When to Use This Workflow
-
-Use this workflow when:
-- Re-implementing an existing application
-- Migrating an application to a new technology stack
-- Creating a feature-complete replica of an application
-
-This workflow builds on:
-- `workflows/replicate/website-discovery-analysis.md` - Initial discovery
-- `workflows/replicate/use-case-extraction.md` - Use case documentation
-
-And uses:
-- `workflows/spec.md` - Specification phase
-- `workflows/design.md` - Design phase
-- `workflows/implement.md` - Implementation phase
-- `workflows/test.md` - Testing phase
-
-## Prerequisites
-- Completed Website Discovery & Analysis workflow (`workflows/replicate/website-discovery-analysis.md`)
-- Completed Use Case Extraction workflow (`workflows/replicate/use-case-extraction.md`)
-- Technology stack selected (e.g., React, Node.js, MongoDB)
-- Development environment set up
-
-## Workflow Steps
-
-### Phase 1: Feature Mapping
-
-1. **Create Feature Inventory**
-   - List all features from use case documentation
-   - Group features by domain/area (Auth, Events, Organizations, etc.)
-   - Identify dependencies between features
-   - Create implementation priority matrix
-
-2. **Map Features to Implementation Tasks**
-   For each feature, identify:
-   - **Database Models**: What data structures are needed
-   - **API Endpoints**: What backend routes are required
-   - **Frontend Components**: What UI components are needed
-   - **User Flows**: What navigation and interactions are required
-
-3. **Create Implementation Checklist**
-   - Use template: `templates/replicate/implementation-checklist.md`
-   - Track status: Not Started / In Progress / Complete / Blocked
-   - Link to use cases and screenshots
-
-### Phase 2: Architecture Design
-
-1. **Database Schema Design**
-   - Analyze forms to infer data models
-   - Identify relationships between entities
-   - Design schemas for chosen database
-   - Document data validation requirements
-
-2. **API Design**
-   - Map user actions to API endpoints
-   - Design request/response structures
-   - Identify authentication requirements
-   - Plan error handling strategies
-
-3. **Frontend Structure**
-   - Design component hierarchy
-   - Plan routing structure
-   - Identify shared components
-   - Design state management approach
-
-### Phase 3: Incremental Implementation
-
-Follow the standard FRAIM implementation workflow (`workflows/implement.md`) for each feature.
-
-1. **Implementation Order**
-   Follow this order for stability:
-   1. **Foundation**: Database models, basic API structure
-   2. **Authentication**: User accounts, login, sessions
-   3. **Core Features**: Most important use cases first
-   4. **Secondary Features**: Supporting functionality
-   5. **Polish**: UI/UX improvements, edge cases
-
-2. **Feature Implementation Pattern**
-   For each feature, follow `workflows/implement.md`:
-   - Use `workflows/spec.md` for documenting requirements
-   - Use `workflows/design.md` for architecture design
-   - Use `workflows/implement.md` for implementation
-   - Use `workflows/test.md` for testing
-   - Use `workflows/quality-assurance/iterative-improvement-cycle.md` for quality assurance
-
-3. **Maintain Working State**
-   - After each feature, ensure application still works
-   - Fix issues immediately, don't accumulate debt
-   - Run tests after each change
-   - Commit working states frequently
-   - Follow `workflows/implement.md` best practices
-
-### Phase 4: Feature Parity Validation
-
-1. **Use Case Coverage Check**
-   - For each use case, verify implementation
-   - Test user flows match original application
-   - Check all pages are implemented
-   - Verify all forms work correctly
-
-2. **Visual Parity Check**
-   - Compare screenshots with implemented UI
-   - Verify layout and styling match
-   - Check responsive design
-   - Validate accessibility
-
-3. **Functional Parity Check**
-   - Test all user interactions
-   - Verify data persistence
-   - Check error handling
-   - Validate edge cases
-
-### Phase 5: Quality Assurance
-
-1. **Code Quality**
-   - Follow coding standards
-   - Ensure consistent patterns
-   - Remove unused code
-   - Document complex logic
-
-2. **Performance**
-   - Optimize database queries
-   - Minimize API calls
-   - Optimize frontend rendering
-   - Check bundle sizes
-
-3. **Security**
-   - Validate all inputs
-   - Implement authentication properly
-   - Check authorization on all endpoints
-   - Sanitize user data
-
-## Implementation Patterns
-
-### Database-First Pattern
-1. Design and create database models
-2. Create seed data for testing
-3. Build API endpoints
-4. Build frontend components
-5. Integrate and test
-
-### API-First Pattern
-1. Design API contracts
-2. Create mock API responses
-3. Build frontend against mocks
-4. Implement backend API
-5. Replace mocks with real API
-
-### Component-Driven Pattern
-1. Build reusable UI components
-2. Compose pages from components
-3. Add interactivity
-4. Connect to API
-5. Polish and optimize
-
-## Best Practices
-
-1. **Start Small**: Implement simplest features first
-2. **Test Frequently**: Write tests as you build
-3. **Iterate Quickly**: Get features working, then refine
-4. **Document Decisions**: Note why you made choices
-5. **Stay Organized**: Keep code organized and clean
-
-## Common Challenges
-
-1. **Missing Information**: Some features may not be obvious from analysis
-   - **Solution**: Make reasonable assumptions, document them, validate later
-
-2. **Technology Differences**: Original may use different tech stack
-   - **Solution**: Focus on functionality, not exact implementation
-
-3. **Incomplete Discovery**: May discover features during implementation
-   - **Solution**: Add to checklist, prioritize, implement
-
-4. **Scope Creep**: Temptation to add features not in original
-   - **Solution**: Stick to discovered features, document improvements separately
-
-## Output Artifacts
-
-1. **Implementation Checklist**
-   - Feature tracking document
-   - Status of each feature
-   - Links to code and tests
-
-2. **Architecture Documentation**
-   - Database schema diagrams
-   - API endpoint documentation
-   - Component hierarchy
-
-3. **Feature Parity Report**
-   - Comparison with original
-   - Known differences
-   - Missing features (if any)
-
-## Next Steps
-
-After completing this workflow, proceed to:
-- **Testing Phase** (`workflows/test.md`) - Write comprehensive tests
-- **Quality Assurance** (`workflows/quality-assurance/iterative-improvement-cycle.md`) - Systematic improvement
-- **Browser Validation** (`workflows/quality-assurance/browser-validation.md`) - Browser testing
-- **Deployment** (`workflows/deploy/cloud-deployment.md`) - Deploy to cloud
-
-## Related Workflows
-- `workflows/replicate/website-discovery-analysis.md` - Initial discovery phase
-- `workflows/replicate/use-case-extraction.md` - Use case documentation
-- `workflows/replicate/re-implementation-strategy.md` - Re-implementation strategy
-- `workflows/spec.md` - Specification phase (use for documenting requirements)
-- `workflows/design.md` - Design phase (use for architecture design)
-- `workflows/implement.md` - Implementation phase (follow for incremental implementation)
-- `workflows/test.md` - Testing phase (use for writing tests)
-- `workflows/quality-assurance/iterative-improvement-cycle.md` - Quality assurance
-- `workflows/quality-assurance/browser-validation.md` - Browser validation

package/registry/workflows/replicate/use-case-extraction.md

@@ -1,135 +0,0 @@
-# Use Case Extraction Workflow
-
-## Overview
-This workflow guides agents through systematically extracting, documenting, and validating use cases from discovered website content and analysis data.
-
-## Prerequisites
-- Completed Website Discovery & Analysis workflow
-- Access to analysis JSON files (site_analysis.json, interaction_analysis.json, comprehensive_analysis.json)
-- Screenshots from discovery phase
-- Understanding of the target application domain
-
-## Workflow Steps
-
-### Phase 1: Data Aggregation
-
-1. **Collect All Analysis Data**
-   - Load `site_analysis.json` (page structure, forms, links)
-   - Load `interaction_analysis.json` (user interactions, flows)
-   - Load `comprehensive_analysis.json` (detailed content, use case hints)
-   - Review all screenshots
-
-2. **Identify User Roles**
-   - Analyze forms and pages to identify different user types
-   - Common roles: Guest, User, Admin, Organization, Volunteer
-   - Document role-specific features and access levels
-
-### Phase 2: Use Case Identification
-
-1. **Extract Use Cases from Data**
-   - Review all pages and their purposes
-   - Identify user actions (buttons, forms, links)
-   - Map user journeys through the application
-   - Group related actions into use cases
-
-2. **Use Case Categories**
-   Organize use cases into logical categories:
-   - **Authentication & Account Management**
-   - **Content Discovery & Browsing**
-   - **Content Creation & Management**
-   - **Data Collection & Reporting**
-   - **Administration & Configuration**
-   - **Communication & Collaboration**
-
-3. **Document Each Use Case**
-   Use the template structure:
-   ```markdown
-   ## Use Case: [Name]
-   
-   **Actor**: [Who performs this]
-   **Preconditions**: [What must be true]
-   **Steps**:
-   1. [Step description]
-   2. [Step description]
-   **Postconditions**: [Expected outcomes]
-   **Screenshots**: [References]
-   **Priority**: High/Medium/Low
-   ```
-
-### Phase 3: Use Case Validation
-
-1. **Completeness Check**
-   - Every page should have at least one associated use case
-   - Every form should have a documented workflow
-   - Every major button/link should be part of a use case
-   - All user roles should have documented use cases
-
-2. **Flow Validation**
-   - Trace user journeys from start to completion
-   - Verify navigation paths are logical
-   - Check for missing steps or broken flows
-   - Identify edge cases and error scenarios
-
-3. **Priority Assignment**
-   - **High**: Core functionality, critical user paths
-   - **Medium**: Important but not critical features
-   - **Low**: Nice-to-have features, edge cases
-
-### Phase 4: Documentation
-
-1. **Create Use Case Document**
-   - Use template: `templates/replicate/use-cases-template.md`
-   - Organize by category
-   - Include screenshots references
-   - Add navigation flow diagrams (text-based)
-
-2. **Create Use Case Index**
-   - List all use cases with quick reference
-   - Include actor, priority, and status
-   - Link to detailed documentation
-
-## Output Artifacts
-
-1. **USE_CASES_AND_SCREENSHOTS_REPORT.md**
-   - Complete use case documentation
-   - Organized by category
-   - Includes all details and screenshots
-
-2. **USE_CASE_INDEX.md**
-   - Quick reference index
-   - Use case status tracking
-   - Implementation checklist
-
-## Best Practices
-
-1. **Be Specific**: Use cases should be detailed enough to implement
-2. **User-Centric**: Focus on what users do, not technical details
-3. **Complete Flows**: Document entire user journeys, not just individual actions
-4. **Validate**: Manually test each use case in the original application
-5. **Iterate**: Refine use cases as you discover more about the application
-
-## Common Patterns
-
-### Authentication Flow
-- Sign Up → Email Verification → Login → Dashboard
-- Login → Forgot Password → Reset → Login
-
-### CRUD Operations
-- Create: Navigate → Fill Form → Submit → Confirmation
-- Read: Navigate → View List → View Details
-- Update: Navigate → Select Item → Edit → Save
-- Delete: Navigate → Select Item → Delete → Confirm
-
-### Search & Filter
-- Navigate to Search → Enter Query → View Results → Filter → Select Result
-
-## Next Steps
-
-After completing this workflow, proceed to:
-- **Re-implementation Strategy** workflow (`workflows/replicate/re-implementation-strategy.md`)
-- **Use Case-Driven Testing** workflow (`workflows/testing/use-case-driven-testing.md`)
-
-## Related Workflows
-- `workflows/replicate/website-discovery-analysis.md`
-- `workflows/replicate/re-implementation-strategy.md`
-- `workflows/testing/use-case-driven-testing.md`

package/registry/workflows/replicate/visual-analysis.md

@@ -1,154 +0,0 @@
-# Visual Analysis Workflow
-
-## Overview
-This workflow guides agents through organizing, analyzing, and documenting screenshots and visual elements from the discovery phase to understand UI/UX patterns and component relationships.
-
-## Prerequisites
-- Completed Website Discovery & Analysis workflow
-- Screenshots captured from discovery phase
-- Analysis JSON files available
-
-## Workflow Steps
-
-### Phase 1: Screenshot Organization
-
-1. **Organize by Category**
-   Create folder structure:
-   ```
-   screenshots/
-   ├── authentication/
-   ├── events/
-   ├── organizations/
-   ├── profiles/
-   └── ...
-   ```
-
-2. **Naming Convention**
-   Use descriptive names:
-   - `[category]_[page]_[state]_[timestamp].png`
-   - Example: `events_list_filtered_20241118_172418.png`
-
-3. **Create Screenshot Index**
-   Document each screenshot:
-   - Filename
-   - Page/Route
-   - Description
-   - Related use case
-   - Key elements visible
-
-### Phase 2: UI Component Analysis
-
-1. **Identify Reusable Components**
-   From screenshots, identify:
-   - Navigation components
-   - Form components
-   - Card/List components
-   - Button styles
-   - Input styles
-   - Modal/Dialog patterns
-
-2. **Document Component Patterns**
-   For each component type:
-   - Visual appearance
-   - States (default, hover, active, disabled)
-   - Variations
-   - Usage patterns
-
-3. **Create Component Inventory**
-   - List all unique components
-   - Document where they're used
-   - Note styling patterns
-
-### Phase 3: Layout & Structure Analysis
-
-1. **Page Layout Patterns**
-   Analyze:
-   - Header/Navigation structure
-   - Sidebar patterns
-   - Content area layouts
-   - Footer patterns
-
-2. **Responsive Design Analysis**
-   - Desktop layout patterns
-   - Mobile layout patterns
-   - Breakpoint behavior
-   - Navigation adaptations
-
-3. **Visual Hierarchy**
-   - Typography scale
-   - Color usage
-   - Spacing patterns
-   - Visual weight distribution
-
-### Phase 4: Interaction Patterns
-
-1. **User Interaction Flows**
-   From screenshots, document:
-   - Button click flows
-   - Form submission flows
-   - Navigation patterns
-   - Modal/dialog interactions
-
-2. **State Transitions**
-   Document:
-   - Loading states
-   - Success states
-   - Error states
-   - Empty states
-
-3. **Feedback Patterns**
-   Identify:
-   - Success messages
-   - Error messages
-   - Validation feedback
-   - Progress indicators
-
-### Phase 5: Documentation
-
-1. **Create Visual Inventory**
-   - Screenshot index with descriptions
-   - Component catalog
-   - Layout patterns document
-   - Interaction patterns document
-
-2. **Create Style Guide**
-   - Color palette
-   - Typography scale
-   - Spacing system
-   - Component styles
-
-## Output Artifacts
-
-1. **SCREENSHOT_INDEX.md**
-   - Complete index of all screenshots
-   - Organized by category
-   - With descriptions and use case links
-
-2. **COMPONENT_CATALOG.md**
-   - List of all UI components
-   - Visual examples (screenshot references)
-   - Usage patterns
-
-3. **STYLE_GUIDE.md**
-   - Colors, typography, spacing
-   - Component styles
-   - Design patterns
-
-## Best Practices
-
-1. **Be Systematic**: Organize screenshots immediately
-2. **Document Context**: Note what each screenshot shows
-3. **Compare Patterns**: Look for consistent patterns
-4. **Note Variations**: Document when patterns differ
-5. **Reference Use Cases**: Link screenshots to use cases
-
-## Next Steps
-
-After completing this workflow, proceed to:
-- **Re-implementation Strategy** workflow (`workflows/replicate/re-implementation-strategy.md`)
-- Use visual analysis to guide UI implementation
-
-## Related Workflows
-- `workflows/replicate/website-discovery-analysis.md`
-- `workflows/replicate/use-case-extraction.md`
-- `workflows/replicate/re-implementation-strategy.md`