{ "markdown": "# Codebase Visualizer\n\nA Claude Code skill that transforms any codebase into an interactive, single-file HTML guide with a starry night theme.\n\n## What it does\n\nGive Claude Code any codebase, and it generates a **self-contained HTML file** (zero dependencies) with up to 7 interactive tabs:\n\n| Tab | Description |\n|---|---|\n| **Story Mode** | 7-act narrative with verb-labeled user journey steps |\n| **Architecture** | Interactive SVG diagram — click any component to see inline details |\n| **How to Use** | Step-by-step developer guide with code snippets |\n| **Data Flow** | Animated SVG showing how data moves through the system |\n| **Quality & Security** | Test metrics, security features, code quality badges |\n| **Key Features** | Project-specific feature showcase (grids, matrices, flows) |\n| **Database** | Schema explorer with interactive INSERT/APPROVE demo (optional) |\n\n### Features\n\n- **Bilingual** — Toggle between English and Chinese (EN / 中文)\n- **Dark / Light theme** — Default: slate-to-indigo starry night with gold accents\n- **Fully self-contained** — Single HTML file, no build step, no dependencies\n- **Interactive** — Click nodes, search components, hover for tooltips\n- **Inline detail panel** — Slides down below architecture diagram (not a side panel)\n- **Optional tabs** — Database tab hidden when project has no DB\n- **Footer with CTA** — Auto-detects locale for project link\n- **3 responsive breakpoints** — Works on desktop, tablet, and mobile\n\n## Screenshot\n\n![Excalidraw Example](examples/excalidraw-guide.html)\n\n## Installation\n\n### Option 1: Clone to skills directory\n\n```bash\ngit clone ~/.claude/skills/codebase-visualizer\n```\n\n### Option 2: Symlink (for development)\n\n```bash\ngit clone ~/my-skills/codebase-visualizer\nln -s ~/my-skills/codebase-visualizer ~/.claude/skills/codebase-visualizer\n```\n\nAfter installation, restart Claude Code. The skill will be available in all your projects.\n\n## Usage\n\nJust ask Claude Code:\n\n```\nHelp me visualize the codebase at ./my-project\n```\n\nor\n\n```\nGenerate an interactive guide for this repository\n```\n\nClaude will analyze the codebase and produce a single HTML file you can open in any browser.\n\n## File Structure\n\n```\ncodebase-visualizer/\n├── SKILL.md # Skill instructions (Claude reads this)\n├── assets/\n│ └── template.html # HTML template with placeholders\n├── references/\n│ ├── analysis-guide.md # How to analyze a codebase\n│ └── storytelling-guide.md # How to write engaging stories\n├── examples/\n│ └── excalidraw-guide.html # Example output for Excalidraw\n├── README.md\n└── .gitignore\n```\n\n## How it works\n\n1. **SKILL.md** tells Claude how to analyze a codebase and what to generate\n2. **template.html** provides the HTML/CSS/JS skeleton with `{{PLACEHOLDER}}` tokens\n3. **references/** provide guidance on analysis methodology and storytelling\n4. Claude fills in the placeholders with codebase-specific content and writes the final HTML file\n\n## Customization\n\nThe template uses CSS custom properties, so you can easily adjust:\n\n- `--bg`, `--card`, `--accent` etc. in the `:root` block\n- Star count and nebula colors in the `createStars()` function\n- Default theme via `data-theme=\"dark\"` on the `` tag\n\n## License\n\nMIT\n", "bytes": 3268, "sha": "0f20e93a52f058f83ee9d9a8bc61d2dc17293b0415be419e09c2ebf513d7c15e", "repo_slug": "belugatempo-dot/codebase-visualizer", "fonte": "repo", "truncated": false, "api": "https://agentalog.com/api/listings/plg_belugatempo_dot_codebase_visualizer_code_6795d3fb/readme" }