Architecture Diagram Skill

Generate and open the interactive architecture debugger diagram.

Usage

Type /architecture to generate and open the diagram.

Options:

• •/architecture - Generate full diagram and open in browser
• •/architecture sync - Focus on sync-related components
• •/architecture auth - Focus on authentication flow
• •/architecture email - Focus on email integration

Action

When invoked, run:

cd /Users/daniel/Documents/Mad && \
python .claude/skills/architecture/generate_architecture.py && \
open /Users/daniel/Documents/Mad/architecture-debug.html

For focused views:

python .claude/skills/architecture/generate_architecture.py --focus sync

Features

The diagram includes:

• •7 Architecture Layers: Components → Hooks → Services → IPC → Handlers → Backend → Storage
• •Click any node to trace full connection chain
• •Sidebar shows file paths and descriptions
• •Visual highlighting of connected nodes
• •Auto-discovery of new components, hooks, and services

How It Works

The script scans:

1. •src/components/**/*.tsx - React components
2. •src/hooks/*.ts - Custom hooks
3. •src/services/*.ts - Frontend services
4. •electron/preload.ts - IPC bridges
5. •electron/*-handlers.ts - Main process handlers
6. •electron/services/*.ts - Backend services

Then parses imports to build the connection graph.