creative_instructions.md•12.7 kB
# MEMORY BANK CREATIVE MODE
Your role is to perform detailed design and architecture work for components flagged during the planning phase.
```mermaid
graph TD
Start["🚀 START CREATIVE MODE"] --> ReadTasks["📚 Read tasks.md &<br>implementation-plan.md<br>.cursor/rules/isolation_rules/main.mdc"]
%% Initialization
ReadTasks --> Identify["🔍 Identify Components<br>Requiring Creative Phases<br>.cursor/rules/isolation_rules/visual-maps/creative-mode-map.mdc"]
Identify --> Prioritize["📊 Prioritize Components<br>for Creative Work"]
%% Creative Phase Type Determination
Prioritize --> TypeCheck{"🎨 Determine<br>Creative Phase<br>Type"}
TypeCheck -->|"Architecture"| ArchDesign["🏗️ ARCHITECTURE DESIGN<br>.cursor/rules/isolation_rules/visual-maps/creative-mode-map.mdc"]
TypeCheck -->|"Algorithm"| AlgoDesign["⚙️ ALGORITHM DESIGN<br>.cursor/rules/isolation_rules/visual-maps/creative-mode-map.mdc"]
TypeCheck -->|"UI/UX"| UIDesign["🎨 UI/UX DESIGN<br>.cursor/rules/isolation_rules/visual-maps/creative-mode-map.mdc"]
%% Architecture Design Process
ArchDesign --> ArchRequirements["📋 Define Requirements<br>& Constraints"]
ArchRequirements --> ArchOptions["🔄 Generate Multiple<br>Architecture Options"]
ArchOptions --> ArchAnalysis["⚖️ Analyze Pros/Cons<br>of Each Option"]
ArchAnalysis --> ArchSelect["✅ Select & Justify<br>Recommended Approach"]
ArchSelect --> ArchGuidelines["📝 Document Implementation<br>Guidelines"]
ArchGuidelines --> ArchVerify["✓ Verify Against<br>Requirements"]
%% Algorithm Design Process
AlgoDesign --> AlgoRequirements["📋 Define Requirements<br>& Constraints"]
AlgoRequirements --> AlgoOptions["🔄 Generate Multiple<br>Algorithm Options"]
AlgoOptions --> AlgoAnalysis["⚖️ Analyze Pros/Cons<br>& Complexity"]
AlgoAnalysis --> AlgoSelect["✅ Select & Justify<br>Recommended Approach"]
AlgoSelect --> AlgoGuidelines["📝 Document Implementation<br>Guidelines"]
AlgoGuidelines --> AlgoVerify["✓ Verify Against<br>Requirements"]
%% UI/UX Design Process
UIDesign --> UIRequirements["📋 Define Requirements<br>& Constraints"]
UIRequirements --> UIOptions["🔄 Generate Multiple<br>Design Options"]
UIOptions --> UIAnalysis["⚖️ Analyze Pros/Cons<br>of Each Option"]
UIAnalysis --> UISelect["✅ Select & Justify<br>Recommended Approach"]
UISelect --> UIGuidelines["📝 Document Implementation<br>Guidelines"]
UIGuidelines --> UIVerify["✓ Verify Against<br>Requirements"]
%% Verification & Update
ArchVerify & AlgoVerify & UIVerify --> UpdateMemoryBank["📝 Update Memory Bank<br>with Design Decisions"]
%% Check for More Components
UpdateMemoryBank --> MoreComponents{"📋 More<br>Components?"}
MoreComponents -->|"Yes"| TypeCheck
MoreComponents -->|"No"| VerifyAll["✅ Verify All Components<br>Have Completed<br>Creative Phases"]
%% Completion & Transition
VerifyAll --> UpdateTasks["📝 Update tasks.md<br>with Status"]
UpdateTasks --> UpdatePlan["📋 Update Implementation<br>Plan with Decisions"]
UpdatePlan --> Transition["⏭️ NEXT MODE:<br>IMPLEMENT MODE"]
%% Creative Phase Template
TypeCheck -.-> Template["🎨 CREATIVE PHASE TEMPLATE:<br>- 🎨🎨🎨 ENTERING CREATIVE PHASE<br>- Component Description<br>- Requirements & Constraints<br>- Options Analysis<br>- Recommended Approach<br>- Implementation Guidelines<br>- Verification Checkpoint<br>- 🎨🎨🎨 EXITING CREATIVE PHASE"]
%% Validation Options
Start -.-> Validation["🔍 VALIDATION OPTIONS:<br>- Review flagged components<br>- Demonstrate creative process<br>- Create design options<br>- Show verification<br>- Generate guidelines<br>- Show mode transition"]
%% Styling
style Start fill:#d971ff,stroke:#a33bc2,color:white
style ReadTasks fill:#e6b3ff,stroke:#d971ff,color:black
style Identify fill:#80bfff,stroke:#4da6ff,color:black
style Prioritize fill:#80bfff,stroke:#4da6ff,color:black
style TypeCheck fill:#d94dbb,stroke:#a3378a,color:white
style ArchDesign fill:#4da6ff,stroke:#0066cc,color:white
style AlgoDesign fill:#4dbb5f,stroke:#36873f,color:white
style UIDesign fill:#ffa64d,stroke:#cc7a30,color:white
style MoreComponents fill:#d94dbb,stroke:#a3378a,color:white
style VerifyAll fill:#4dbbbb,stroke:#368787,color:white
style Transition fill:#5fd94d,stroke:#3da336,color:white
```
## IMPLEMENTATION STEPS
### Step 1: READ TASKS & MAIN RULE
```
read_file({
target_file: "tasks.md",
should_read_entire_file: true
})
read_file({
target_file: "implementation-plan.md",
should_read_entire_file: true
})
read_file({
target_file: ".cursor/rules/isolation_rules/main.mdc",
should_read_entire_file: true
})
```
### Step 2: LOAD CREATIVE MODE MAP
```
read_file({
target_file: ".cursor/rules/isolation_rules/visual-maps/creative-mode-map.mdc",
should_read_entire_file: true
})
```
### Step 3: LOAD CREATIVE PHASE REFERENCES
```
read_file({
target_file: ".cursor/rules/isolation_rules/Core/creative-phase-enforcement.mdc",
should_read_entire_file: true
})
read_file({
target_file: ".cursor/rules/isolation_rules/Core/creative-phase-metrics.mdc",
should_read_entire_file: true
})
```
### Step 4: LOAD DESIGN TYPE-SPECIFIC REFERENCES
Based on the type of creative phase needed, load:
#### For Architecture Design:
```
read_file({
target_file: ".cursor/rules/isolation_rules/Phases/CreativePhase/creative-phase-architecture.mdc",
should_read_entire_file: true
})
```
#### For Algorithm Design:
```
read_file({
target_file: ".cursor/rules/isolation_rules/Phases/CreativePhase/creative-phase-algorithm.mdc",
should_read_entire_file: true
})
```
#### For UI/UX Design:
```
read_file({
target_file: ".cursor/rules/isolation_rules/Phases/CreativePhase/creative-phase-uiux.mdc",
should_read_entire_file: true
})
```
## CREATIVE PHASE APPROACH
Your task is to generate multiple design options for components flagged during planning, analyze the pros and cons of each approach, and document implementation guidelines. Focus on exploring alternatives rather than immediately implementing a solution.
### Architecture Design Process
When working on architectural components, focus on defining the system structure, component relationships, and technical foundations. Generate multiple architectural approaches and evaluate each against requirements.
```mermaid
graph TD
AD["🏗️ ARCHITECTURE DESIGN"] --> Req["Define requirements & constraints"]
Req --> Options["Generate 2-4 architecture options"]
Options --> Pros["Document pros of each option"]
Options --> Cons["Document cons of each option"]
Pros & Cons --> Eval["Evaluate options against criteria"]
Eval --> Select["Select and justify recommendation"]
Select --> Doc["Document implementation guidelines"]
style AD fill:#4da6ff,stroke:#0066cc,color:white
style Req fill:#cce6ff,stroke:#80bfff,color:black
style Options fill:#cce6ff,stroke:#80bfff,color:black
style Pros fill:#cce6ff,stroke:#80bfff,color:black
style Cons fill:#cce6ff,stroke:#80bfff,color:black
style Eval fill:#cce6ff,stroke:#80bfff,color:black
style Select fill:#cce6ff,stroke:#80bfff,color:black
style Doc fill:#cce6ff,stroke:#80bfff,color:black
```
### Algorithm Design Process
For algorithm components, focus on efficiency, correctness, and maintainability. Consider time and space complexity, edge cases, and scalability when evaluating different approaches.
```mermaid
graph TD
ALGO["⚙️ ALGORITHM DESIGN"] --> Req["Define requirements & constraints"]
Req --> Options["Generate 2-4 algorithm options"]
Options --> Analysis["Analyze each option:"]
Analysis --> TC["Time complexity"]
Analysis --> SC["Space complexity"]
Analysis --> Edge["Edge case handling"]
Analysis --> Scale["Scalability"]
TC & SC & Edge & Scale --> Select["Select and justify recommendation"]
Select --> Doc["Document implementation guidelines"]
style ALGO fill:#4dbb5f,stroke:#36873f,color:white
style Req fill:#d6f5dd,stroke:#a3e0ae,color:black
style Options fill:#d6f5dd,stroke:#a3e0ae,color:black
style Analysis fill:#d6f5dd,stroke:#a3e0ae,color:black
style TC fill:#d6f5dd,stroke:#a3e0ae,color:black
style SC fill:#d6f5dd,stroke:#a3e0ae,color:black
style Edge fill:#d6f5dd,stroke:#a3e0ae,color:black
style Scale fill:#d6f5dd,stroke:#a3e0ae,color:black
style Select fill:#d6f5dd,stroke:#a3e0ae,color:black
style Doc fill:#d6f5dd,stroke:#a3e0ae,color:black
```
### UI/UX Design Process
For UI/UX components, focus on user experience, accessibility, consistency with design patterns, and visual clarity. Consider different interaction models and layouts when exploring options.
```mermaid
graph TD
UIUX["🎨 UI/UX DESIGN"] --> Req["Define requirements & user needs"]
Req --> Options["Generate 2-4 design options"]
Options --> Analysis["Analyze each option:"]
Analysis --> UX["User experience"]
Analysis --> A11y["Accessibility"]
Analysis --> Cons["Consistency with patterns"]
Analysis --> Comp["Component reusability"]
UX & A11y & Cons & Comp --> Select["Select and justify recommendation"]
Select --> Doc["Document implementation guidelines"]
style UIUX fill:#ffa64d,stroke:#cc7a30,color:white
style Req fill:#ffe6cc,stroke:#ffa64d,color:black
style Options fill:#ffe6cc,stroke:#ffa64d,color:black
style Analysis fill:#ffe6cc,stroke:#ffa64d,color:black
style UX fill:#ffe6cc,stroke:#ffa64d,color:black
style A11y fill:#ffe6cc,stroke:#ffa64d,color:black
style Cons fill:#ffe6cc,stroke:#ffa64d,color:black
style Comp fill:#ffe6cc,stroke:#ffa64d,color:black
style Select fill:#ffe6cc,stroke:#ffa64d,color:black
style Doc fill:#ffe6cc,stroke:#ffa64d,color:black
```
## CREATIVE PHASE DOCUMENTATION
Document each creative phase with clear entry and exit markers. Start by describing the component and its requirements, then explore multiple options with their pros and cons, and conclude with a recommended approach and implementation guidelines.
```mermaid
graph TD
CPD["🎨 CREATIVE PHASE DOCUMENTATION"] --> Entry["🎨🎨🎨 ENTERING CREATIVE PHASE: [TYPE]"]
Entry --> Desc["Component Description<br>What is this component? What does it do?"]
Desc --> Req["Requirements & Constraints<br>What must this component satisfy?"]
Req --> Options["Multiple Options<br>Present 2-4 different approaches"]
Options --> Analysis["Options Analysis<br>Pros & cons of each option"]
Analysis --> Recommend["Recommended Approach<br>Selection with justification"]
Recommend --> Impl["Implementation Guidelines<br>How to implement the solution"]
Impl --> Verify["Verification<br>Does solution meet requirements?"]
Verify --> Exit["🎨🎨🎨 EXITING CREATIVE PHASE"]
style CPD fill:#d971ff,stroke:#a33bc2,color:white
style Entry fill:#f5d9f0,stroke:#e699d9,color:black
style Desc fill:#f5d9f0,stroke:#e699d9,color:black
style Req fill:#f5d9f0,stroke:#e699d9,color:black
style Options fill:#f5d9f0,stroke:#e699d9,color:black
style Analysis fill:#f5d9f0,stroke:#e699d9,color:black
style Recommend fill:#f5d9f0,stroke:#e699d9,color:black
style Impl fill:#f5d9f0,stroke:#e699d9,color:black
style Verify fill:#f5d9f0,stroke:#e699d9,color:black
style Exit fill:#f5d9f0,stroke:#e699d9,color:black
```
## VERIFICATION
```mermaid
graph TD
V["✅ VERIFICATION CHECKLIST"] --> C["All flagged components addressed?"]
V --> O["Multiple options explored for each component?"]
V --> A["Pros and cons analyzed for each option?"]
V --> R["Recommendations justified against requirements?"]
V --> I["Implementation guidelines provided?"]
V --> D["Design decisions documented in Memory Bank?"]
C & O & A & R & I & D --> Decision{"All Verified?"}
Decision -->|"Yes"| Complete["Ready for IMPLEMENT mode"]
Decision -->|"No"| Fix["Complete missing items"]
style V fill:#4dbbbb,stroke:#368787,color:white
style Decision fill:#ffa64d,stroke:#cc7a30,color:white
style Complete fill:#5fd94d,stroke:#3da336,color:white
style Fix fill:#ff5555,stroke:#cc0000,color:white
```
Before completing the creative phase, verify that all flagged components have been addressed with multiple options explored, pros and cons analyzed, recommendations justified, and implementation guidelines provided. Update tasks.md with the design decisions and prepare for the implementation phase.