본문으로 건너뛰기
cccskills
무료GitHub에 공개

codebase-visualizer

Generate an interactive HTML tree visualization of the current project's file structure, with file sizes, color-coded file types, and a sidebar summary. Use when exploring a new repository, understanding project layout, identifying large files, or getting an overview of a codebase.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(2)

  • SKILL.md1.6 KB
  • scripts/visualize.py10.7 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Generate an interactive collapsible HTML tree of the project.

Usage

Run the visualizer script from the project root:

python3 ${CLAUDE_SKILL_DIR}/scripts/visualize.py .

This creates codebase-map.html in the current directory and opens it in the default browser.

What it shows

  • Collapsible directory tree — click any folder to expand or collapse it
  • File sizes displayed next to each file name
  • Color-coded dots for file types (.js, .ts, .py, .go, .rs, and more)
  • Directory size totals (sum of all files within)
  • Sidebar summary: total file count, directory count, total size, number of unique file types
  • Bar chart of the top 8 file types by total size

Ignored automatically: .git, node_modules, __pycache__, .venv, venv, dist, build, and any directory or file whose name starts with ..

Instructions

  1. Run the command above from the root of the project you want to visualize.
  2. Report the absolute path of the generated file.
  3. The script opens the file in the default browser automatically. If it does not open, tell the user to open the reported path manually.
  4. If Python 3 is not available, report the error from the command and stop.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

Write an Architecture Decision Record (ADR) document for a technical decision. Use when documenting a technical choice, architectural decision, or design decision.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

REST API design conventions for this codebase. Use when writing or reviewing API endpoints, route definitions, response formatting, or client code that calls the API.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

Automatically format code files after every edit using Prettier and ESLint. Active in the background whenever Claude edits a file. Formatting is silent — no prompts, no output unless a formatter fails. Use when you want consistent formatting enforced automatically during a coding session.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

Create a git branch named after a GitHub issue.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

Draft the changelog entry for all unreleased commits in Keep a Changelog format. Groups commits into Added, Changed, Fixed, Removed, and Security. Use before releasing a new version or when updating CHANGELOG.md.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

Draft a CHANGELOG.md entry for the current changes in Keep a Changelog format. Use when releasing, tagging a version, or updating CHANGELOG.md.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

davila7/claude-with-skills132026년 5월 15일 업데이트

davila7의 스킬 모두 보기

이 스킬의 문제 신고