skills.rest
Chengxufeng1994
Chengxufeng1994COMMUNITY
Explore all skills by this author →
GitHub

codebase-visualizer

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

Updated Oct 21, 2022
Search Tags:#developer tools#project structure#codebase#visualization#tree view#file size
One-click install
npx skills add https://github.com/Chengxufeng1994/dotfiles --skill codebase-visualizer-chengxufeng1994
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: codebase-visualizer
Source: https://github.com/Chengxufeng1994/dotfiles/tree/main/claude/skills/codebase-visualizer
Command: npx skills add https://github.com/Chengxufeng1994/dotfiles --skill codebase-visualizer-chengxufeng1994

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill helps you understand the structure and size distribution of your codebase, making it easier to navigate and identify key areas.

Core Features & Use Cases

  • Interactive Tree View: Generates an HTML visualization of your project's file and directory structure.
  • File Size Information: Displays the size of individual files and aggregate sizes for directories.
  • File Type Breakdown: Shows a summary of different file extensions and their contribution to the total size.
  • Use Case: When starting on a new project, use this Skill to quickly grasp the overall organization and identify which directories or file types consume the most space.

Quick Start

Run the visualization script from your project root to generate an interactive HTML tree view of your codebase.

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 structure and file sizes?▼

To visualize your codebase structure, run the provided Python 3 script from your project root to generate an interactive, collapsible HTML tree view displaying file sizes and directory structures.

What is the best way to explore a new repository's file organization?▼

The best way to explore a new repository is to generate an interactive HTML tree visualization, which allows you to quickly grasp the overall project organization and identify large files or directories.

Do I need Python to generate an HTML tree view of my project?▼

Yes, you need Python 3 installed, as the Skill relies on standard Python libraries for file system traversal and HTML generation without requiring any external dependencies.

Can I see a breakdown of file types and their total size in my codebase?▼

Yes, the generated HTML tree view includes a file type breakdown that shows a summary of different file extensions and their contribution to the total codebase size.

How does the codebase visualization help identify large files?▼

The codebase visualization displays the size of individual files and aggregate sizes for directories, making it easier to identify which specific directories or file types consume the most space.

Related Skills

Explore More Software Engineering Skills→
alangebalangeb

file-ops

Read, write, edit, and batch-process files using glob patterns.

Community
Intermediate
rotnovrotnov

improve-codebase-architecture

Analyze repository code to generate HTML architectural improvement reports.

Community
Advanced
mgd34msumgd34msu
6

project-onboarding

Analyze project structure and dependencies to generate onboarding documentation.

Community
Advanced
Ven0m0Ven0m0
6

codebase-visualizer

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

Community
Basic