Examples and Patterns - johnpeterman72/CursorRIPER GitHub Wiki

Examples and Patterns

This page provides real-world examples and common patterns for using the CursorRIPER Framework effectively. These examples demonstrate how to apply the framework to different types of development tasks.

Complete Project Examples

Web Application Example

This example shows how to use the CursorRIPER Framework to develop a small web application from scratch.

Project Brief

# Project Brief: Task Manager Web App
*Version: 1.0*
*Created: April 5, 2025*
*Last Updated: April 5, 2025*

## Project Overview
A simple task management web application that allows users to create, organize, and track their tasks. The application will have a clean, responsive UI and basic user authentication.

## Core Requirements
- User registration and login
- Task creation, editing, and deletion
- Task categorization with labels
- Due date setting and reminders
- Task filtering and sorting
- Responsive design for mobile and desktop

## Success Criteria
- Users can register and manage their tasks
- Interface is intuitive and responsive
- Application works on all major browsers
- Loading time under 2 seconds

Development Process

START Phase:
- Requirements gathering (as shown above)
- Technology selection (React for frontend, Express/Node for backend, MongoDB for database)
- Architecture definition (SPA with RESTful API)

RESEARCH Mode:

/research
Help me understand how to structure a React/Express/MongoDB project for a task management application.

INNOVATE Mode:

/innovate
What are some approaches for implementing the task management interface? I'm trying to decide between a Kanban board and a list view.

PLAN Mode:

/plan
Create a detailed plan for implementing the user authentication system using JWT.

EXECUTE Mode:

/execute
Let's implement the user authentication system according to the plan.

REVIEW Mode:

/review
Verify that our authentication implementation matches the plan.

Iteration: Return to RESEARCH mode for the next feature and continue the cycle.

API Development Example

This example demonstrates using the framework for developing a RESTful API.

Sample Implementation Checklist (from PLAN Mode)

IMPLEMENTATION CHECKLIST:
1. Create User model in models/user.js with schema definition
2. Implement controller functions in controllers/auth.js:
   a. register() - Handle user registration
   b. login() - Authenticate and issue JWT
   c. verifyEmail() - Verify email confirmation
   d. resetPassword() - Reset user password
3. Create authentication middleware in middleware/auth.js
4. Set up routes in routes/auth.js:
   a. POST /api/auth/register
   b. POST /api/auth/login
   c. GET /api/auth/verify/:token
   d. POST /api/auth/reset-password
5. Implement email service in services/email.js
6. Add validation using Joi in utils/validation.js
7. Write unit tests for each component
8. Update API documentation

This clear, sequential checklist makes the EXECUTE phase straightforward, as each step is concretely defined.

Common Patterns

Feature Development Cycle

This pattern shows how to develop a new feature using the complete RIPER workflow:

RESEARCH:
- Understand existing functionality
- Identify integration points
- Review similar features
INNOVATE:
- Brainstorm implementation approaches
- Consider performance implications
- Explore UX options
PLAN:
- Define exact changes needed
- Create detailed implementation checklist
- Identify potential risks
EXECUTE:
- Follow checklist exactly
- Complete one step at a time
- Update memory bank as you progress
REVIEW:
- Compare implementation against plan
- Test all edge cases
- Document any deviations

Example conversation flow:

User: /research
      I need to understand how the current notification system works.

Claude: [MODE: RESEARCH]
        The current notification system uses a publisher-subscriber pattern...

User: /innovate
      How could we extend this to support push notifications?

Claude: [MODE: INNOVATE]
        We could approach this in several ways:
        1. Using the Web Push API...
        2. Implementing Firebase Cloud Messaging...
        3. Creating a WebSocket-based solution...

User: /plan
      Let's plan the implementation using Firebase Cloud Messaging.

Claude: [MODE: PLAN]
        First, I'll need to gather some information to create a comprehensive plan...
        [Asks clarifying questions]
        
        Based on your answers, here's the detailed implementation plan:
        
        IMPLEMENTATION CHECKLIST:
        1. Install Firebase dependencies
        2. Configure Firebase in the project
        3. Implement client-side registration
        4. ...

User: /execute
      Let's implement this plan.

Claude: [MODE: EXECUTE]
        I'll implement step 1: Install Firebase dependencies
        ...
        
User: /review
      Let's review what we've implemented.

Claude: [MODE: REVIEW]
        Comparing implementation against plan:
        Step 1: ✓ Firebase dependencies correctly installed
        Step 2: ✓ Firebase configuration added to correct files
        ...

Bug Fixing Workflow

This pattern demonstrates using the framework to diagnose and fix bugs:

RESEARCH:
- Understand the bug symptoms
- Locate affected code
- Identify potential causes
INNOVATE:
- Brainstorm possible solutions
- Consider different approaches to fixing
- Evaluate trade-offs between fixes
PLAN:
- Create detailed plan for implementing the fix
- Include test cases to verify the fix works
- List all files that need modification
EXECUTE:
- Implement the fix according to plan
- Add tests to prevent regression
- Document the fix
REVIEW:
- Verify the fix resolves the issue
- Check for any side effects
- Ensure tests pass

Example memory bank update in activeContext.md:

## Current Focus
Fixing the authentication timeout bug (Issue #42)

## Recent Changes
- April 6, 2025 - Identified root cause in JWT expiration handling
- April 6, 2025 - Implemented fix for token refresh mechanism

## Next Steps
1. Add regression tests for token expiration scenarios
2. Update documentation regarding token lifecycle
3. Monitor error rates after deployment

## Current Challenges
- Ensuring backward compatibility with older clients
- Minimizing performance impact of token validation

Refactoring Process

This pattern shows how to use the framework for code refactoring:

RESEARCH:
- Understand the current implementation
- Identify problems (technical debt, design issues)
- Analyze dependencies and usage patterns
INNOVATE:
- Explore refactoring approaches
- Consider design patterns to apply
- Evaluate impact on performance and maintainability
PLAN:
- Create detailed refactoring plan
- Define measurable success criteria
- Plan for backward compatibility
EXECUTE:
- Implement refactoring in small, testable increments
- Update tests for new structure
- Maintain comprehensive test coverage
REVIEW:
- Verify all functionality is preserved
- Measure improvements (e.g., performance, readability)
- Document architectural changes

Example PLAN mode output:

IMPLEMENTATION CHECKLIST:
1. Create new directory structure for modular components
2. Extract common functionality into utilities/helpers.js
3. Refactor UserService class to use dependency injection:
   a. Create UserRepository interface
   b. Implement MongoUserRepository class
   c. Modify UserService to accept repository in constructor
4. Update existing tests to work with new structure
5. Add new tests for extracted utilities
6. Update import statements across codebase
7. Verify all existing functionality works
8. Document new architecture in systemPatterns.md

Advanced Use Cases

Large-Scale Projects

For large projects with multiple components, consider these patterns:

Component-Based Workflow

Organize work around discrete components, each with its own mini-RIPER cycle:

Create a dedicated memory bank subfolder for each component:

memory-bank/
├── core/
├── auth-module/
├── payment-module/
└── reporting-module/

Use a hierarchical planning approach:
- Master plan in the core memory bank
- Component-specific plans in component folders
- Cross-reference between plans

Track dependencies between components:

## Component Dependencies
- Auth Module → Core: Requires user model
- Payment Module → Auth Module: Requires user authentication
- Reporting Module → Payment Module: Requires transaction history

Team Coordination Pattern

For teams working on the same codebase:

Assign RIPER modes to team roles:
- Architecture team: RESEARCH and INNOVATE
- Planning team: PLAN
- Development team: EXECUTE
- QA team: REVIEW

Create a mode transition workflow:

1. Architecture team explores options (RESEARCH, INNOVATE)
2. Architecture team hands off to planning team
3. Planning team creates detailed specifications (PLAN)
4. Planning team hands off to development team
5. Development team implements plans (EXECUTE)
6. Development team hands off to QA team
7. QA team verifies implementation (REVIEW)
8. If issues found, return to appropriate team

Maintain shared memory bank in version control

Legacy Code Integration

When working with legacy codebases:

Documentation Recovery Pattern

Use the framework to gradually rebuild missing documentation:

RESEARCH:

/research
Help me understand what this legacy payment processing module does.

Document findings in systemPatterns.md:

## Legacy Payment Module Analysis

The payment module uses a custom state machine to process transactions:
1. Transaction initiated (PENDING state)
2. Payment gateway contacted (PROCESSING state)
3. Response received (SUCCESS or FAILED state)
4. Receipt generated (COMPLETED state)

Key functions:
- initiatePayment() - Creates new transaction record
- processPayment() - Contacts gateway and updates state
- finalizePayment() - Generates receipt and archives transaction

Use PLAN mode to create a refactoring roadmap

Incremental Modernization Pattern

Modernize legacy code piece by piece:

Create a prioritized component list in activeContext.md:

## Modernization Priority
1. ✓ Authentication System (Completed)
2. → Payment Processing (In Progress)
3. ⊖ Reporting Module (Planned)
4. ⊖ User Management (Planned)
5. ⊖ Admin Console (Planned)

For each component: a. RESEARCH its functionality b. INNOVATE on modernization approaches c. PLAN the modernization d. EXECUTE in small, testable increments e. REVIEW against original functionality
Track technical debt reduction in progress.md

Rapid Prototyping

For rapid prototype development:

MVP Development Pattern

Create minimal viable products quickly:

Use the START phase with simplified requirements:

## MVP Scope
### In Scope
- Basic user authentication (email only)
- Core task management (create, view, complete)
- Simple list-based UI

### Out of Scope
- Advanced filtering
- Categories and tags
- Reminders and notifications
- User profiles

Create a streamlined RIPER cycle:
- Brief RESEARCH
- Quick INNOVATE (choose simplest viable approach)
- Simplified PLAN (focus on core functionality)
- Rapid EXECUTE (prioritize working code over perfect code)
- Essential REVIEW (focus on functionality verification)

Track progress with a simplified progress.md:

## MVP Status Board
- [x] User can sign up
- [x] User can log in
- [x] User can create task
- [x] User can view tasks
- [ ] User can mark task complete
- [ ] User can delete task

Prototype-to-Production Pattern

Convert successful prototypes to production code:

RESEARCH the prototype's strengths and weaknesses
INNOVATE on production-quality approaches
PLAN the transformation with focus on:
- Code quality
- Test coverage
- Security
- Performance
- Scalability
EXECUTE the transformation
REVIEW against both prototype functionality and production standards

Example transition checklist:

PROTOTYPE-TO-PRODUCTION CHECKLIST:
1. Add proper input validation to all forms
2. Implement comprehensive error handling
3. Optimize database queries with proper indexing
4. Add authentication security (rate limiting, token refresh)
5. Create comprehensive test suite
6. Set up CI/CD pipeline
7. Add performance monitoring
8. Implement proper logging
9. Create user documentation
10. Perform security audit

Example Files and Templates

Example Implementation Plan

# User Authentication Implementation Plan
*Created: April 6, 2025*

## Overview
This plan details the implementation of user authentication for our task management application.

## Prerequisites
- MongoDB connection configured
- Express server set up
- React frontend project initialized

## Implementation Steps

IMPLEMENTATION CHECKLIST:
1. Backend Setup
   a. Create User model (src/models/User.js)
   b. Implement authentication controllers:
      - registerUser (src/controllers/auth/register.js)
      - loginUser (src/controllers/auth/login.js)
      - resetPassword (src/controllers/auth/reset.js)
      - verifyEmail (src/controllers/auth/verify.js)
   c. Create authentication middleware (src/middleware/auth.js)
   d. Set up authentication routes (src/routes/auth.js)
   e. Configure JWT generation and validation (src/utils/jwt.js)

2. Email Service
   a. Implement email service wrapper (src/services/email.js)
   b. Create email templates:
      - Welcome email (src/templates/welcome.html)
      - Verification email (src/templates/verify.html)
      - Password reset email (src/templates/reset.html)

3. Frontend Authentication
   a. Create authentication context (src/contexts/AuthContext.js)
   b. Implement authentication API service (src/services/authService.js)
   c. Create authentication forms:
      - Registration form (src/components/auth/RegisterForm.js)
      - Login form (src/components/auth/LoginForm.js)
      - Reset password form (src/components/auth/ResetForm.js)
   d. Implement protected route component (src/components/common/ProtectedRoute.js)

4. Testing
   a. Write backend tests:
      - User model tests (tests/models/User.test.js)
      - Authentication controller tests (tests/controllers/auth/*.test.js)
      - JWT utility tests (tests/utils/jwt.test.js)
   b. Write frontend tests:
      - Authentication context tests (tests/contexts/AuthContext.test.js)
      - Form component tests (tests/components/auth/*.test.js)

5. Documentation
   a. Update API documentation
   b. Add authentication flow to systemPatterns.md
   c. Update user guide with authentication instructions

Example Progress Report

# Progress Tracker: Task Manager
*Version: 1.2*
*Created: April 5, 2025*
*Last Updated: April 10, 2025*

## Project Status
Overall Completion: 45%

## What Works
- User Registration: COMPLETE - Users can register with email and password
- User Login: COMPLETE - Users can log in and receive JWT
- Task Creation: COMPLETE - Users can create new tasks with title and description
- Task Listing: COMPLETE - Users can view their tasks in a list

## What's In Progress
- Task Editing: 75% - Basic editing works, date picker in progress
- Task Categories: 40% - Backend implementation complete, frontend in progress
- Task Filtering: 30% - Backend API endpoints created, frontend implementation starting

## What's Left To Build
- Task Reminders: HIGH - Critical feature for MVP
- User Profiles: MEDIUM - Needed for user settings
- Task Sharing: LOW - Nice-to-have feature for future version

## Known Issues
- Issue #8: MEDIUM - Task creation fails occasionally on slow connections
- Issue #12: LOW - Login page has styling issues on mobile devices
- Issue #15: HIGH - JWT token refresh not working correctly

## Milestones
- Basic Authentication: April 10, 2025 - COMPLETED
- Core Task Management: April 20, 2025 - IN PROGRESS (60%)
- MVP Release: May 1, 2025 - ON TRACK

CursorRIPER: Adaptive development, persistent intelligence.