Visualizes software architecture coupling, hotspots, and dependency health in a browser-based UI.
Install
mkdir -p .claude/skills/web-nwiizo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/18553" && unzip -o skill.zip -d .claude/skills/web-nwiizo && rm skill.zipInstalls to .claude/skills/web-nwiizo
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Start interactive web UI for coupling analysis visualization. Graph exploration with filters, hotspots, and export.Key capabilities
- →Explore coupling relationships in 2D or 3D graphs
- →Inspect strength, distance, volatility, and balance scores
- →View coupling health across Git revisions with a timeline
- →Identify top refactoring targets (hotspots)
- →Filter graph elements by various dimensions
How it works
The skill starts a local web UI that visualizes code coupling relationships, allowing interactive exploration, filtering, and identification of architectural hotspots.
Inputs & outputs
When to use web
- →Visualizing dependency hotspots
- →Analyzing blast radius of changes
- →Checking coupling health across revisions
- →Identifying refactoring priorities
About this skill
Web - Visualization UI
Start
cargo build --release
cargo run --release -- coupling --web $ARGUMENTS # default: ./src
# Custom port
cargo run --release -- coupling --web --port 8080 ./src
# Don't auto-open browser
cargo run --release -- coupling --web --no-open ./src
# Web timeline uses the same history sampling model as --history
cargo run -- coupling --history=8 --git-months=12 ./src
Keyboard Shortcuts
| Key | Action |
|---|---|
/ | Focus search |
f | Fit to screen |
r | Reset layout |
e | Export PNG |
Esc | Clear selection |
? | Show help |
Graph Interaction
- Click node: Highlight neighbors, center view
- Click edge: Show dependency direction
- Click background: Clear selection
Panel Features
2D / 3D Graphs
Explore coupling relationships in 2D or 3D views.
Dimension-Space
Inspect strength, distance, volatility, and balance score as separate trust dimensions.
Timeline
Shows coupling health across git revisions with auto-play controls.
Trust
Shows analysis confidence, run notes, and declared blind spots.
Hotspots
Top refactoring targets ranked by severity. Click to jump.
Key Modules
- Connections: Sort by dependency count
- Issues: Sort by problem count
- Health: Sort by health score
Analysis
- Show Dependents: Modules depending on selected
- Show Dependencies: Modules selected depends on
- Full Impact: Complete blast radius
Filters
- Strength: Intrusive / Functional / Model / Contract
- Distance: SameFunction / SameModule / DifferentModule / DifferentCrate
- Volatility: High / Medium / Low
- Balance Score: Range filter
- Show Issues Only / Show Cycles Only
Export
- PNG Image: Save graph as image
- JSON Data: Save analysis data as JSON
Notes
- Ctrl+C to stop server
- Large projects may take longer on initial load
When not to use it
- →When the goal is to modify code directly
- →When the project is too large for initial load times
Limitations
- →Requires `cargo build --release` and `cargo run` to start the UI
- →Large projects may take longer on initial load
- →Does not auto-open the browser if `--no-open` flag is used
How it compares
This tool provides an interactive, visual exploration of code coupling and architectural health over time, offering a dynamic way to identify refactoring targets compared to static analysis reports.
Compared to similar skills
web side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| web (this skill) | 0 | 2mo | Review | Intermediate |
| map-domain | 0 | 2mo | Review | Intermediate |
| grafana-dashboards | 134 | 4mo | No flags | Intermediate |
| data-storytelling | 47 | 2mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by nwiizo
View all by nwiizo →You might also like
map-domain
tuanle96
Use this skill to render the harness's domain/layer config as a mermaid diagram + check for drift between .harness/config.json#domains and the actual filesystem. Surfaces "the config says layers A→B→C but the repo has folders A, B, X" — drift that silently invalidates the structural-test contract.
grafana-dashboards
wshobson
Create and manage production Grafana dashboards for real-time visualization of system and application metrics. Use when building monitoring dashboards, visualizing metrics, or creating operational observability interfaces.
data-storytelling
wshobson
Transform data into compelling narratives using visualization, context, and persuasive structure. Use when presenting analytics to stakeholders, creating data reports, or building executive presentations.
dashboard-creator
mhattingpete
Create HTML dashboards with KPI metric cards, bar/pie/line charts, progress indicators, and data visualizations. Use when users request dashboards, metrics displays, KPI visualizations, data charts, or monitoring interfaces.
plotly
davila7
Interactive scientific and statistical data visualization library for Python. Use when creating charts, plots, or visualizations including scatter plots, line charts, bar charts, heatmaps, 3D plots, geographic maps, statistical distributions, financial charts, and dashboards. Supports both quick visualizations (Plotly Express) and fine-grained customization (graph objects). Outputs interactive HTML or static images (PNG, PDF, SVG).
csv-data-summarizer
coffeefuelbump
Analyzes CSV files, generates summary stats, and plots quick visualizations using Python and pandas.