skills.rest
mjmiller3416
mjmiller3416COMMUNITY
Explore all skills by this author →
GitHub

codebase-visualizer

Generate an interactive HTML tree visualization of a codebase with file sizes and types.

1|Updated Dec 12, 2025
Search Tags:#developer tools#project structure#codebase#visualization#tree view#file explorer
One-click install
npx skills add https://github.com/mjmiller3416/recipe-app --skill codebase-visualizer-mjmiller3416
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codebase-visualizer
Source: https://github.com/mjmiller3416/recipe-app/tree/main/.claude/skills/codebase-visualizer
Command: npx skills add https://github.com/mjmiller3416/recipe-app --skill codebase-visualizer-mjmiller3416

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Understanding the structure and size distribution of a codebase can be challenging, especially in large or unfamiliar projects. This skill provides a clear, interactive visualization to help users grasp the project's organization and identify key areas.

Core Features & Use Cases

  • Interactive Tree View: Generates an HTML visualization of the project's file and directory structure.
  • Collapsible Directories: Allows users to expand and collapse folders to navigate the structure easily.
  • File Size Information: Displays the size of each file and aggregate sizes for directories.
  • File Type Coloring: Uses distinct colors for different file extensions to improve readability.
  • Use Case: When onboarding to a new project, use this skill to quickly understand the layout, identify the largest directories, and locate specific file types.

Quick Start

Run the visualization script from your project root using python ~/.claude/skills/codebase-visualizer/scripts/visualize.py .

Frequently Asked Questions about codebase-visualizer

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

FAQPage Schema
How do I visualize my codebase file structure in a tree view?▼

Yes, this codebase visualizer respects .gitignore rules by utilizing the git ls-files command to walk the directory tree. This ensures ignored files and directories are excluded from the generated HTML visualization.

How can I identify large files in an unfamiliar repository?▼

You need Python installed in your environment to execute the visualization script. Running the script from the project root via the command line requires no additional external dependencies to parse the directory and output the HTML file.

Does the tree visualization support color-coding for different file extensions?▼

Yes, the generated HTML visualization uses distinct colors for different file extensions to improve readability. This file type coloring helps users visually parse the project organization and locate specific file types within the collapsible tree.

What is the best way to generate an interactive file explorer for project onboarding?▼

The best way to generate an interactive file explorer is running the Python script against your project root to output an HTML file. This visualizer provides a collapsible, color-coded map of directories and file sizes tailored for onboarding.

Related Skills

Explore More Software Engineering Skills→
softsparksoftspark
161

explore

Analyze a codebase to generate a comprehensive architecture report.

Community
Intermediate
Ven0m0Ven0m0
6

codebase-visualizer

Generates an interactive HTML tree view of a codebase with file sizes and types.

Community
Basic
IcyHot09IcyHot09
5

opengrok

Search symbol definitions, references, and history across codebases via OpenGrok.

Community
Advanced
zvadaadamzvadaadam
47

tour

Generate a self-contained HTML tour explaining a codebase subsystem.

Community
Advanced