Walkthrough Skill

---
name: walkthrough
description: >
  Generates a self-contained HTML file with an interactive, clickable Mermaid diagram
  (flowchart or ER diagram) that explains how a codebase feature, flow, architecture,
  or database schema works. Designed for fast onboarding — each walkthrough is a visual
  mental model readable in under 2 minutes.

  TRIGGER this skill when ANY of these match:
  - The prompt starts with or contains "$walkthrough" (explicit trigger — always activate, even if no topic follows)
  - The user asks to "walk me through", "walkthrough", "trace the code path", "explain this flow",
    "show how X works", "how does X work step by step", "explain the architecture",
    "visualize the data model", "show the data structures", "show the relationships"
  - The user wants a visual/interactive explanation of code, flows, pipelines, or schemas

  When triggered, ALWAYS generate a walkthrough HTML file — never respond with just text.
  If "$walkthrough" is used with no topic, generate an overview walkthrough of the entire project.
compatibility: Designed for Claude Code (or similar products). Requires a browser to open generated HTML files.
allowed-tools: Bash Read Write Glob Grep Task
metadata:
  author: Alexander Opalic
  version: "1.1"
---

# Codebase Walkthrough Generator

Generate interactive HTML files with clickable Mermaid diagrams that give new developers a **quick mental model** of how a feature or system works. The goal is fast onboarding — a rough map of concepts and connections, not a code reference. Each walkthrough should be readable in under 2 minutes.

**CRITICAL**: When this skill is triggered, you MUST generate a `walkthrough-*.html` file. Never respond with just text — always produce the interactive HTML output.

**Always dark mode.** Every walkthrough uses a pure black background (`#000000`), white text, and purple accents. Never generate light-mode walkthroughs. The `<html>` tag MUST include `style="color-scheme: dark"`.

## Workflow

### Step 1: Understand the scope

Clarify what the user wants explained:
- A specific feature flow (e.g., "how does canvas drawing work")
- A data flow (e.g., "how does state flow from composable to component")
- An architectural overview (e.g., "how are features organized")
- A request lifecycle (e.g., "what happens when a user clicks draw")
- A database schema (e.g., "explain the tables and relationships")
- A data model (e.g., "how is user data structured")

If the prompt is `$walkthrough` with no topic, generate an **overview walkthrough of the entire project** — show the main modules, how they connect, and the overall architecture.