architecture

Name: architecture
Availability: InStock
Author: Daniel

Generate interactive HTML architecture diagrams mapping UI, IPC, and backend connections.

Updated Oct 24, 2025

Search Tags:#architecture #debugging #frontend #backend #diagram #architecture-diagram

Ready to run

npx skills add https://github.com/5hdaniel/Mad --skill architecture-5hdaniel

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: architecture
Source: https://github.com/5hdaniel/Mad/tree/main/.claude/skills/architecture
Command: npx skills add https://github.com/5hdaniel/Mad --skill architecture-5hdaniel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Generate an interactive architecture diagram that maps component relationships across UI, IPC, and backend layers to help you understand system flow.

Core Features & Use Cases

Auto-discovers components, hooks, services, and bridges and renders a layered diagram.
Provides interactive node selection to trace downstream and upstream connections.
Supports focus modes (sync, auth, email) to narrow the diagram scope for focused debugging and onboarding.

Quick Start

Run the architecture tool to generate and open the diagram for the current project.

Frequently Asked Questions about architecture

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I generate an architecture diagram from source code?▼

You can generate an architecture diagram by running the tool to read your source code, scan multiple layers, and render an interactive HTML diagram. It auto-discovers components, hooks, and services to map connections across UI, IPC, and backend layers.

What is cross-layer tracing for frontend and backend architecture?▼

Cross-layer tracing maps component relationships from the UI through IPC to backend services. It allows interactive node selection to visually trace upstream and downstream connections across the entire system stack for debugging.

Can I narrow the scope of an architecture diagram for focused debugging?▼

Yes, you can narrow the architecture diagram scope using focus modes such as sync, auth, or email. These targeted views restrict the rendered components to help you focus on specific functional areas during debugging or onboarding.

Does the architecture diagram tool support node-level details for backend services?▼

Yes, the architecture diagram supports node-level details for backend services. The interactive HTML diagram renders individual nodes for services and bridges, allowing you to select specific components to view their exact connections.

What is the best way to visualize IPC bridges in a system architecture?▼

The best way to visualize IPC bridges is to auto-discover them alongside components and services, then render them in a layered HTML diagram. This provides interactive node selection to trace how data flows between the frontend and backend.

Do I need to manually define components to map system flow across layers?▼

No, you do not need to manually define components to map system flow. The tool auto-discovers components, hooks, services, and bridges by reading source code, then automatically renders the layered architecture diagram.