103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# 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
|