Initial commit

skills/planning/ascii-diagram-creator/workflow/phase-0-context-analysis.md

@@ -0,0 +1,102 @@
+# Phase 0: Context Analysis
+
+**Purpose**: Understand what the user wants to visualize and gather necessary information to create an effective diagram.
+
+**Execute immediately when skill activates.**
+
+## 1. Auto-Discovery Mode (NEW)
+
+**Run these discovery steps automatically** to reduce manual exploration:
+
+### Project Type Detection
+
+Execute in parallel to detect project architecture:
+
+```bash
+# React/Frontend detection
+glob: "src/features/**" OR "src/app/**" OR "pages/**"
+
+# Package detection
+read: package.json → extract dependencies, scripts
+
+# Config file detection
+glob: "{next,vite,webpack}.config.*" OR "tsconfig.json"
+```
+
+### Architecture Scanning
+
+```bash
+# Feature boundaries (Bulletproof React)
+glob: "src/features/*/index.{ts,tsx}"
+
+# Route structure
+glob: "src/app/**/page.{ts,tsx}" OR "pages/**/*.{ts,tsx}"
+
+# API layer
+grep: "export.*function.*fetch|api|query" --type ts
+
+# Cross-feature dependencies
+grep: "import.*from '@/features" OR "from '../features"
+```
+
+### Output Summary
+
+After auto-discovery, report:
+
+```
+Project Type: [bulletproof-react | next-app-router | express-api | monorepo | generic]
+Features Found: [list of feature directories]
+Routes Found: [list of route patterns]
+Key Dependencies: [from package.json]
+Architecture Pattern: [detected pattern]
+```
+
+This auto-discovery reduces 50% of manual codebase exploration.
+
+---
+
+## 2. Identify Visualization Target
+
+Determine what needs to be diagrammed:
+
+- **System architecture**: Components, modules, services
+- **File/directory structure**: Current or proposed organization
+- **Process flow**: Steps, phases, stages
+- **Data movement**: Input, processing, output
+
+## 3. Extract Key Information
+
+From the user's request or **auto-discovery results**:
+
+- Component names and relationships
+- Current vs desired state (for migrations)
+- Number of phases/steps (for phased diagrams)
+- Data sources and destinations (for flow diagrams)
+
+## 4. Assess Complexity
+
+Evaluate scope to determine diagram approach:
+
+| Complexity | Characteristics | Approach |
+|------------|-----------------|----------|
+| Simple | 2-4 components, linear flow | Single compact diagram |
+| Medium | 5-10 components, some branches | Standard diagram with sections |
+| Complex | 10+ components, multiple flows | Multiple diagrams or layered view |
+
+## Output
+
+Context summary ready for diagram type selection:
+- **What**: Clear description of visualization target
+- **Scope**: Number of components/phases
+- **Purpose**: How the diagram will be used (PR, docs, presentation)
+- **Constraints**: Any specific requirements (width, detail level)
+
+## Common Issues
+
+**Vague requests**: Ask for clarification
+- "What specifically would you like to see in the diagram?"
+- "Should this show the current state, proposed state, or both?"
+
+**Missing information**: Gather from codebase if possible
+- Run `ls` or `tree` for directory structures
+- Check existing docs for architecture info