mirror-magi-meta-agent/scripts/legacy/CUSTOMIZATION_GUIDE.md

AI-powered development planning and execution system with Supabase integration

# 🎯 Mirror Magi Meta-Agent Customization Guide

*A quick conversation to perfectly configure your meta-agent*

This guide walks you through 10 essential questions to customize the Mirror Magi Meta-Agent for your specific project. Each question builds on the previous ones to create a comprehensive, project-specific configuration.

## 🚀 Before You Start

Make sure you've completed the basic setup:
```bash
cd meta-agent
npm run setup
```

Now let's customize it for YOUR project!

---

## 📋 The 10 Essential Questions

### Question 1: **What type of application are you building?**

**Choose your primary application type:**

- [ ] **Web Application** (Frontend-focused)
- [ ] **API/Backend Service** (Backend-focused) 
- [ ] **Full-Stack Web App** (Frontend + Backend)
- [ ] **Mobile App** (React Native, Flutter, etc.)
- [ ] **Desktop Application** (Electron, Tauri, etc.)
- [ ] **CLI Tool/Library** (Command-line or package)
- [ ] **Data/Analytics Platform** (Data processing, ML)
- [ ] **E-commerce Platform** (Online store)
- [ ] **Content Management System** (Blogs, CMS)
- [ ] **SaaS Platform** (Software as a Service)

**Configuration Impact:** This determines the primary domains and default task types.

**Example Answers:**
```json
// E-commerce Platform
"domains": ["product_catalog", "shopping_cart", "payments", "user_accounts", "inventory_management"]

// SaaS Platform  
"domains": ["user_management", "subscription_billing", "data_visualization", "api_integration", "reporting"]
```

---

### Question 2: **What's your primary tech stack?**

**Frontend (if applicable):**
- [ ] React + TypeScript
- [ ] React + JavaScript  
- [ ] Vue.js + TypeScript
- [ ] Vue.js + JavaScript
- [ ] Angular + TypeScript
- [ ] Next.js + TypeScript
- [ ] Svelte/SvelteKit
- [ ] Vanilla HTML/CSS/JS
- [ ] Other: ___________

**Backend (if applicable):**
- [ ] Node.js + Express
- [ ] Node.js + Fastify
- [ ] Node.js + NestJS
- [ ] Python + FastAPI
- [ ] Python + Django
- [ ] Python + Flask
- [ ] Go + Gin/Fiber
- [ ] Java + Spring Boot
- [ ] C# + .NET
- [ ] PHP + Laravel
- [ ] Ruby + Rails
- [ ] Other: ___________

**Configuration Example:**
```json
{
  "tech_stack": {
    "frontend": {
      "framework": "React 18.x",
      "language": "TypeScript 5.x",
      "build_tool": "Vite",
      "styling": "Tailwind CSS"
    },
    "backend": {
      "platform": "Node.js",
      "framework": "Express",
      "language": "TypeScript"
    }
  }
}
```

---

### Question 3: **What database and data storage do you use?**

**Primary Database:**
- [ ] PostgreSQL
- [ ] MySQL  
- [ ] MongoDB
- [ ] SQLite
- [ ] Redis
- [ ] Firebase Firestore
- [ ] Supabase
- [ ] PlanetScale
- [ ] No database (static/JAMstack)
- [ ] Other: ___________

**ORM/Database Tools:**
- [ ] Prisma
- [ ] TypeORM
- [ ] Mongoose
- [ ] Sequelize
- [ ] Drizzle
- [ ] Raw SQL
- [ ] Other: ___________

**File Storage:**
- [ ] Local filesystem
- [ ] AWS S3
- [ ] Cloudinary
- [ ] Supabase Storage
- [ ] Firebase Storage
- [ ] Other: ___________

**Configuration Example:**
```json
{
  "tech_stack": {
    "backend": {
      "database": "PostgreSQL",
      "orm": "Prisma",
      "storage": "AWS S3"
    }
  }
}
```

---

### Question 4: **How do you handle authentication and user management?**

**Authentication Strategy:**
- [ ] JWT tokens
- [ ] Session-based auth
- [ ] OAuth (Google, GitHub, etc.)
- [ ] Magic links/Email
- [ ] SMS verification
- [ ] No authentication needed
- [ ] Custom auth solution

**Authentication Provider:**
- [ ] Custom implementation
- [ ] Auth0
- [ ] Firebase Auth
- [ ] Supabase Auth  
- [ ] NextAuth.js
- [ ] Clerk
- [ ] Other: ___________

**User Roles/Permissions:**
- [ ] Simple user/admin
- [ ] Role-based permissions
- [ ] Complex permission system
- [ ] No user roles needed

**Configuration Example:**
```json
{
  "tech_stack": {
    "backend": {
      "auth": "JWT with refresh tokens",
      "auth_provider": "Custom implementation"
    }
  },
  "domains": ["authentication", "user_management", "authorization"]
}
```

---

### Question 5: **What testing strategy do you use?**

**Unit Testing:**
- [ ] Jest
- [ ] Vitest  
- [ ] Mocha + Chai
- [ ] pytest (Python)
- [ ] PHPUnit (PHP)
- [ ] No unit tests yet
- [ ] Other: ___________

**Integration/E2E Testing:**
- [ ] Playwright
- [ ] Cypress
- [ ] Puppeteer
- [ ] Selenium
- [ ] Testing Library
- [ ] No E2E tests yet
- [ ] Other: ___________

**Testing Goals:**
- [ ] High test coverage (80%+)
- [ ] Critical path testing only
- [ ] TDD/Test-first approach
- [ ] Testing after development
- [ ] Minimal testing for now

**Configuration Example:**
```json
{
  "tech_stack": {
    "testing": {
      "unit": "Jest",
      "e2e": "Playwright",
      "testing_library": "@testing-library/react"
    }
  },
  "code_standards": {
    "testing": {
      "unit_test_coverage": 85,
      "e2e_critical_paths": "required"
    }
  }
}
```

---

### Question 6: **What are your main business domains/features?**

**Think about the core functionality of your app. What are the main "areas" or "modules"?**

**Example Domains by Project Type:**

**E-commerce:**
- [ ] Product catalog
- [ ] Shopping cart
- [ ] Payment processing
- [ ] Order management
- [ ] Inventory tracking
- [ ] User reviews
- [ ] Shipping/logistics

**SaaS Platform:**
- [ ] User onboarding
- [ ] Subscription management  
- [ ] Billing/payments
- [ ] Data visualization
- [ ] Reporting/analytics
- [ ] API integrations
- [ ] Team collaboration

**Content Platform:**
- [ ] Content creation
- [ ] Media management
- [ ] Publishing workflow
- [ ] User comments
- [ ] SEO optimization
- [ ] Analytics tracking

**Social Platform:**
- [ ] User profiles
- [ ] Social interactions
- [ ] Content sharing
- [ ] Messaging/chat
- [ ] Notifications
- [ ] Moderation tools

**Your Custom Domains:**
1. ________________
2. ________________  
3. ________________
4. ________________
5. ________________

**Configuration Example:**
```json
{
  "project": {
    "domains": [
      "user_management",
      "content_creation", 
      "social_features",
      "notification_system",
      "analytics_tracking"
    ]
  }
}
```

---

### Question 7: **What external APIs and services do you integrate with?**

**Common Integrations:**
- [ ] Payment processing (Stripe, PayPal)
- [ ] Email services (SendGrid, Mailgun)
- [ ] SMS services (Twilio, Vonage)
- [ ] Cloud storage (AWS, Google Cloud)
- [ ] AI/ML services (OpenAI, Anthropic)
- [ ] Maps (Google Maps, Mapbox)
- [ ] Analytics (Google Analytics, Mixpanel)
- [ ] Social media APIs
- [ ] CRM systems (Salesforce, HubSpot)
- [ ] Other: ___________

**Your Specific Integrations:**
1. ________________
2. ________________
3. ________________

**Configuration Example:**
```json
{
  "tech_stack": {
    "external_apis": {
      "payments": "Stripe",
      "email": "SendGrid", 
      "ai": "OpenAI GPT-4",
      "maps": "Google Maps API"
    }
  },
  "domains": ["payment_processing", "email_automation", "ai_features", "geolocation"]
}
```

---

### Question 8: **What's your development workflow and standards?**

**Code Style/Linting:**
- [ ] ESLint + Prettier
- [ ] Biome
- [ ] Standard JS
- [ ] Custom linting rules
- [ ] Minimal/no linting

**Git Workflow:**
- [ ] Git Flow (feature/develop/main)
- [ ] GitHub Flow (feature/main)
- [ ] Simple main branch
- [ ] Custom workflow

**Commit Convention:**
- [ ] Conventional Commits
- [ ] Custom commit format
- [ ] No specific format

**Code Review Process:**
- [ ] Required PR reviews
- [ ] Optional reviews
- [ ] Solo development

**Deployment:**
- [ ] Vercel
- [ ] Netlify
- [ ] AWS
- [ ] Heroku
- [ ] Docker containers
- [ ] Manual deployment
- [ ] Other: ___________

**Configuration Example:**
```json
{
  "development": {
    "git_strategy": {
      "main_branch": "main",
      "feature_prefix": "feature/",
      "commit_convention": "conventional-commits"
    }
  },
  "code_standards": {
    "linting": "ESLint + Prettier",
    "code_review": "required"
  }
}
```

---

### Question 9: **What's your project's complexity and scale?**

**Team Size:**
- [ ] Solo developer
- [ ] Small team (2-4 people)
- [ ] Medium team (5-10 people)
- [ ] Large team (10+ people)

**Project Stage:**
- [ ] Just starting/prototype
- [ ] Early development
- [ ] MVP/beta stage
- [ ] Production with users
- [ ] Mature/scaling product

**Code Complexity Preference:**
- [ ] Simple, straightforward code
- [ ] Moderate abstractions
- [ ] Advanced patterns/architectures
- [ ] Enterprise-level complexity

**Performance Requirements:**
- [ ] Basic performance is fine
- [ ] Good performance important
- [ ] High performance critical
- [ ] Extreme performance needed

**Configuration Impact:**
```json
{
  "code_standards": {
    "complexity_preference": "moderate_abstractions",
    "performance_priority": "good_performance",
    "team_collaboration": "small_team_patterns"
  }
}
```

---

### Question 10: **What specific coding patterns and preferences do you have?**

**Component/Module Patterns:**
- [ ] Functional components only
- [ ] Class-based components
- [ ] Custom hooks for logic
- [ ] Higher-order components
- [ ] Render props pattern

**State Management:**
- [ ] Built-in state (useState, etc.)
- [ ] Context API
- [ ] Redux/Redux Toolkit
- [ ] Zustand
- [ ] Jotai/Recoil
- [ ] MobX

**Error Handling:**
- [ ] Try-catch everywhere
- [ ] Error boundaries (React)
- [ ] Result/Either patterns
- [ ] Centralized error handling
- [ ] Minimal error handling

**Code Organization:**
- [ ] Feature-based folders
- [ ] Type-based folders (components/, utils/)
- [ ] Domain-driven design
- [ ] Monorepo structure
- [ ] Simple flat structure

**Configuration Example:**
```json
{
  "code_standards": {
    "frontend": {
      "component_type": "functional_only",
      "state_management": "zustand",
      "error_handling": "error_boundaries"
    },
    "architecture": {
      "file_structure": "feature_based",
      "pattern": "domain_driven"
    }
  }
}
```

---

## 🔧 Applying Your Answers

### Step 1: Update Project Configuration
Based on your answers, update `config/project-config.json`:

```bash
# Use your answers to fill in:
vim config/project-config.json
```

### Step 2: Customize Agent Persona  
Update `config/agent-persona.md` with your specific:
- Project description
- Tech stack details
- Domain knowledge
- Coding patterns
- Success criteria

### Step 3: Test Your Configuration
```bash
npm test
```

### Step 4: Validate Everything
```bash
npm run validate
```

### Step 5: Generate Your First Command
Try describing a real task for your project:
```
"Create a new React component for user profile editing with form validation"
"Add API endpoint for processing payments with Stripe integration"  
"Implement real-time notifications using WebSockets"
```

---

## 🎯 Quick Configuration Templates

### Template A: React + TypeScript SPA
```json
{
  "project": {
    "name": "My React App",
    "description": "A modern React application with TypeScript",
    "domains": ["user_interface", "api_integration", "state_management"]
  },
  "tech_stack": {
    "frontend": {
      "framework": "React 18.x",
      "language": "TypeScript 5.x", 
      "build_tool": "Vite",
      "styling": "Tailwind CSS",
      "state_management": "Zustand"
    }
  }
}
```

### Template B: Full-Stack Next.js
```json
{
  "project": {
    "name": "My Next.js App",
    "description": "Full-stack Next.js application",
    "domains": ["frontend", "backend", "database", "authentication"]
  },
  "tech_stack": {
    "frontend": {
      "framework": "Next.js 14.x",
      "language": "TypeScript"
    },
    "backend": {
      "database": "PostgreSQL",
      "orm": "Prisma",
      "auth": "NextAuth.js"
    }
  }
}
```

### Template C: Node.js API
```json
{
  "project": {
    "name": "My API Service", 
    "description": "RESTful API with Node.js and Express",
    "domains": ["api_design", "database", "authentication", "external_apis"]
  },
  "tech_stack": {
    "backend": {
      "platform": "Node.js",
      "framework": "Express",
      "database": "PostgreSQL",
      "orm": "Prisma"
    }
  }
}
```

---

## 🚀 Ready to Code!

Once you've answered these questions and updated your configuration:

1. **Your meta-agent knows your project** - tech stack, domains, patterns
2. **Commands will be project-specific** - following your standards
3. **Validation matches your setup** - using your testing tools
4. **Time estimates are calibrated** - based on your complexity

Start describing your development tasks and let the meta-agent generate perfectly customized Claude Code Max commands for your project!

---

## 🔄 Iteration and Updates

As your project evolves:
- **Add new domains** when you build new features
- **Update tech stack** when you adopt new tools  
- **Refine coding standards** as patterns emerge
- **Customize templates** in `config/command-templates.json`

The meta-agent grows with your project! 🌱