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:

# 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

# 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

2.9 KiB Raw Permalink Blame History