SOP 008: Generate Visual Output

Fresh

Field	Value
SOP ID	008
Version	1.0
Status	Active
Last Updated	2026-02-14

Purpose

Bundle and run scripts within skills to generate interactive HTML files, visualizations, reports, and other visual output that opens in the browser.

Pattern Overview

Procedure

Step 1: Create the Skill Directory with Scripts

mkdir -p ~/.claude/skills/codebase-visualizer/scripts

Step 2: Write SKILL.md

The skill tells Claude to run the bundled script:

---
name: codebase-visualizer
description: Generate an interactive collapsible tree visualization of your codebase. Use when exploring a new repo, understanding project structure, or identifying large files.
allowed-tools: Bash(python *)
---

# Codebase Visualizer

Generate an interactive HTML tree view of your project structure.

## Usage

Run the visualization script from your project root:

```bash
python ~/.claude/skills/codebase-visualizer/scripts/visualize.py .
```

This creates `codebase-map.html` and opens it in your default browser.

## What the visualization shows

- **Collapsible directories**: Click folders to expand/collapse
- **File sizes**: Displayed next to each file
- **Colors**: Different colors for different file types
- **Directory totals**: Shows aggregate size of each folder

Step 3: Create the Script

Create scripts/visualize.py (or any language). The script should:

1. Accept command-line arguments for configuration
2. Generate a self-contained HTML file
3. Open it in the default browser

No External Dependencies

Use only built-in libraries when possible. The codebase-visualizer example uses only Python standard library (json, sys, webbrowser, pathlib, collections).

Step 4: Test

Open Claude Code in any project and ask:

Visualize this codebase

Claude runs the script, generates the HTML, and opens it in your browser.

Other Visual Output Ideas

Visualization	Script Language	Output
Dependency graph	Python/Node	Interactive network diagram
Test coverage report	Python	Color-coded coverage map
API documentation	Node	Swagger-like interactive docs
Database schema	Python	ER diagram with relationships
Git history	Python	Timeline visualization

Verification Checklist

• [ ] Script runs successfully from command line
• [ ] HTML output is self-contained (no external dependencies)
• [ ] allowed-tools grants execution permission for the script language
• [ ] Browser opens automatically with the output
• [ ] Visualization works in both light and dark mode

See Also

• SOP 003 - Supporting Files
• SOP 001 - Create First Skill