New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Walkthrough

by alexanderop in alexanderop/walkthrough

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.

No licenceAuto-check: notesDevelopment

Install Walkthrough

skills CLI
$ npx skills add alexanderop/walkthrough --skill walkthrough -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install alexanderop/walkthrough walkthrough --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/alexanderop/walkthrough.git skills-src && mkdir -p .claude/skills && cp -r skills-src/skills/walkthrough .claude/skills/walkthrough && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
walkthrough
GitHub stars
141
Token cost
~3.4k tokens
SKILL.md length
1,390 words
Files
2 (incl. references)
Skills in repo
2
Repo updated
First seen
Licence
None found

At a glance

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.

  • Works in 4 steps: Understand the scope → Explore the codebase with parallel… → Choose the diagram type → …
  • This skill when ANY of these match: - The prompt starts with
  • SKILL.md covers Workflow, Mermaid Conventions, Quality Checklist and References
  • Instructions only: no scripts, shell commands, URLs or credentials in SKILL.md

What it does

Walkthrough is an agent skill from alexanderop/walkthrough. 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…

Its SKILL.md is about 3.4k tokens, which your agent loads only when the skill is triggered. The skill folder holds 2 other files, including reference files (for example `references/html-patterns.md`). Compatibility notes: Designed for Claude Code (or similar products). Requires a browser to open generated HTML files.

It sits in Development, covering Diagrams, Database schema design and Subagents. It works with Mermaid. The repository describes itself as: A Claude Code skill that generates interactive HTML walkthroughs with clickable Mermaid diagrams to explain codebase features, flows, and architecture.

When your agent uses it

  • This skill when ANY of these match: - The prompt starts with
  • Contains $walkthrough (explicit trigger — always activate
  • Even if no topic follows) - The user asks to walk me through
  • Trace the code path

Example prompts

  • “$walkthrough”
  • “walk me through”
  • “walkthrough”
  • “/walkthrough”

Requirements

  • Compatibility (from SKILL.md): Designed for Claude Code (or similar products). Requires a browser to open generated HTML files.
  • Pre-approved tools (allowed-tools): Bash, Read, Write, Glob, Grep, Task

Workflow steps

4 steps, taken from the step headings in SKILL.md.

  1. Understand the scope
  2. Explore the codebase with parallel subagents
  3. Choose the diagram type
  4. Generate the HTML file

What it can do on your machine

Read from SKILL.md and the folder at commit 5e70c06. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves these tools, so the agent can use them without asking each time:

    • Bash
    • Read
    • Write
    • Glob
    • Grep
    • Task

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    No scripts in the folder and no shell commands in SKILL.md (its code samples are javascript and bash).

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

  • Compatibility

    Designed for Claude Code (or similar products). Requires a browser to open generated HTML files.

    From compatibility in the SKILL.md frontmatter.

Context cost

Walkthrough loads about 3.4k tokens when it runs, and up to ~8.4k if it reads all its reference files. Until then it costs about 250 tokens; SKILL.md has 1,390 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~250
When it runs · the whole SKILL.md, loaded when a task matches
~3.4k
With references · SKILL.md plus every file in references/, read only if the agent opens them
~8.4k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check: notes

The automated check noted patterns worth knowing about, such as sudo or a known installer.

  • NotePre-approves every shell command (allowed-tools: Bash)SKILL.md
    allowed-tools: Bash, Read, Write, Glob, Grep, Task

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 1,390 words (~3,355 tokens).

“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…”

— opening of SKILL.md by alexanderop
name
walkthrough
allowed-tools
Bash, Read, Write, Glob, Grep, Task
compatibility
Designed for Claude Code (or similar products). Requires a browser to open generated HTML files.
metadata.author
Alexander Opalic
metadata.version
1.1

Read the full SKILL.md on GitHub

Files

SKILL.md and 1 other file (references) in skills/walkthrough of alexanderop/walkthrough.

  • SKILL.md
  • references/html-patterns.md

Open the folder on GitHubat commit 5e70c06

Compare with similar skills

Walkthrough next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Walkthrough compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Walkthrough this skillalexanderop/walkthrough141—~3.4kAutomated safety check: NotesNone
Managedcode Orleans Graphmanagedcode/dotnet-skills486—~1.6kAutomated safety check: PassMIT
Drizzle Erdhiroppy/mf-dashboard418—~627Automated safety check: PassMIT
Entity ModelAI-Unified-Process/marketplace141—~1.9kAutomated safety check: PassApache-2.0
Data Model CreationTencentCloudBase/CloudBase-AI-Toolkit1.1k1 repos~1.8kAutomated safety check: PassMIT
Data Model ExtractorEmeaAppGbb/spec2cloud100—~2.5kAutomated safety check: PassMIT

Similar skills

  • Managedcode Orleans Graph

    managedcode/dotnet-skills

    Integrate ManagedCode.Orleans.Graph into an Orleans-based .NET application for grain-call policy enforcement, deadlock detection, live-call telemetry, and Mermaid graph diagnostics.

    486 GitHub stars~1.6k tokensUpdated yesterday
    DatabasesAuto-check passed

  • Drizzle Erd

    hiroppy/mf-dashboard

    A skill your agent uses when needing to visualize database schema, generate ERD diagrams from Drizzle ORM schemas, or understand table relationships

    418 GitHub stars~627 tokensUpdated today
    DatabasesAuto-check passed

  • Entity Model

    AI-Unified-Process/marketplace

    Creates entity model documents with Mermaid.js ER diagrams and attribute tables defining entities, relationships, data types, and validation rules.

    141 GitHub stars~1.9k tokensUpdated 3 days ago
    DatabasesAuto-check passed

  • Data Model Creation

    TencentCloudBase/CloudBase-AI-Toolkit

    [Deprecated] Optional advanced tool for complex data modeling.

    1.1k GitHub starsUsed in 1 repo~1.8k tokens
    DatabasesAuto-check passed

  • Data Model Extractor

    EmeaAppGbb/spec2cloud

    Extract database schemas, data models, and entity relationships from code.

    100 GitHub stars~2.5k tokensUpdated 5 mo ago
    DatabasesAuto-check passed

  • Friction Review

    ThibautBaissac/rails_ai_agents

    Multi-axis adversarial review using friction engineering. An agent skill from ThibautBaissac/rails_ai_agents.

    665 GitHub stars~1.7k tokensUpdated 4 mo ago
    DevelopmentAuto-check: notes

More from alexanderop/walkthrough

  • Publish Skill

    alexanderop/walkthrough

    Creates a new GitHub repository for a Claude Code skill with proper README and directory structure.

    141 GitHub stars~1.2k tokensUpdated 6 mo ago
    Auto-check: notes

Works with

Categories

Questions about Walkthrough

What does Walkthrough do?

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. Walkthrough is an agent skill from alexanderop/walkthrough. 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.

When should I use Walkthrough?

Walkthrough fits situations like: this skill when ANY of these match: - The prompt starts with; contains $walkthrough (explicit trigger — always activate; even if no topic follows) - The user asks to walk me through; trace the code path.

How do I install Walkthrough in Claude Code?

Run `npx skills add alexanderop/walkthrough --skill walkthrough -a claude-code`. Or copy the skill folder (skills/walkthrough in alexanderop/walkthrough) into .claude/skills/walkthrough in your project. Claude Code loads it when a task matches its description.

How do I install Walkthrough in Codex?

Run `npx skills add alexanderop/walkthrough --skill walkthrough -a codex`. Or copy the skill folder (skills/walkthrough in alexanderop/walkthrough) into .agents/skills/walkthrough in your project. Codex loads it when a task matches its description.

Can I use Walkthrough in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add alexanderop/walkthrough --skill walkthrough -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/walkthrough, .gemini/skills/walkthrough, .github/skills/walkthrough and .opencode/skills/walkthrough in your project.

What does Walkthrough need to run?

SKILL.md names no scripts, command-line tools or credentials: Walkthrough is instructions for the agent only. Its frontmatter pre-approves these tools: Bash, Read, Write, Glob, Grep, Task. Compatibility (from SKILL.md): Designed for Claude Code (or similar products). Requires a browser to open generated HTML files..

Does Walkthrough access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Walkthrough safe to install?

Our automated static check of SKILL.md found notes only (pre-approves every shell command (allowed-tools: bash)), nothing it rates as a warning. It is not a guarantee. Review the folder before installing.

What licence does Walkthrough use?

No licence was found for Walkthrough or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does Walkthrough use?

About 3.4k tokens (SKILL.md is roughly 13k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 5.1k tokens, read only when the agent opens those files.

What are the alternatives to Walkthrough?

Skills that share tags, products or a category with Walkthrough: Managedcode Orleans Graph (managedcode/dotnet-skills, 486 stars), Drizzle Erd (hiroppy/mf-dashboard, 418 stars), Entity Model (AI-Unified-Process/marketplace, 141 stars) and Data Model Creation (TencentCloudBase/CloudBase-AI-Toolkit, 1.1k stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Walkthrough?

alexanderop (a GitHub user) maintains it in alexanderop/walkthrough, which has 141 GitHub stars. The repository holds 2 skills in this directory. The repository was last updated on March 23, 2026.

Source: alexanderop/walkthrough on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.