# Component Visualizer

> Generate interactive HTML dependency graphs for React components. Use when asked to "visualize components", "show component dependencies", "dependency graph", "component map", or "what depends on what".

- Skill: `michelve/component-visualizer` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add michelve/component-visualizer`
- Raw SKILL.md: https://api.skillmd.com/api/skills/michelve/component-visualizer/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: michelve (https://skillmd.com/u/michelve)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/michelve/component-visualizer

---


# Component Visualizer

Generate an interactive force-directed dependency graph of React components
as a standalone HTML file. Scans `src/client/components/` and `src/client/routes/`
for import relationships and produces a browser-ready visualization.

## When to Use

- Understanding component relationships before refactoring
- Identifying tightly coupled or orphaned components
- Onboarding to understand component architecture
- Reviewing impact of changes across the component tree

## Quick Start

Run the visualization script from the project root:

```bash
python3 "${CLAUDE_SKILL_DIR}/scripts/visualize-components.py"
```

This outputs `component-graph.html` in the project root. Open it in a browser.

To specify a custom output path:

```bash
python3 "${CLAUDE_SKILL_DIR}/scripts/visualize-components.py" /tmp/graph.html
```

## Graph Features

- **Force-directed layout** — nodes self-organize by dependency proximity
- **Color-coded categories**:
    - Blue: Route files (`src/client/routes/`)
    - Green: Feature components (`src/client/components/`)
    - Purple: UI components (`src/client/components/ui/` — DSAI)
    - Gray: Other files
- **Interactive** — drag nodes, scroll to zoom, click for file details
- **Filterable** — toggle category visibility with checkboxes
- **Hover highlighting** — shows direct dependency edges for any node
- **Zero dependencies** — standalone HTML with embedded CSS/JS, no CDN

## What It Scans

| Directory                   | Category  | Purpose                              |
| --------------------------- | --------- | ------------------------------------ |
| `src/client/components/ui/` | UI (DSAI) | DSAI components (installed via `dsai add`) |
| `src/client/components/`    | Component | Project feature components            |
| `src/client/routes/`        | Route     | TanStack Router page files            |

## Import Resolution

The script resolves these import patterns:

- `@/components/ui/button` → `src/client/components/ui/button.tsx`
- `@/components/app-sidebar` → `src/client/components/app-sidebar.tsx`
- `../components/header` → relative path resolution
- `./sub-component` → same-directory resolution

Node module imports (e.g., `react`, `@tanstack/router`) are excluded.

## Interpreting the Graph

**Healthy patterns:**

- Routes (blue) connect to components (green), which compose DSAI UI (purple)
- Clusters indicate feature groupings
- DSAI UI nodes have many incoming edges (high reuse)

**Warning signs:**

- Components with no incoming edges may be dead code
- Circular dependency clusters (tight bidirectional edges)
- Routes importing directly from `ui/` (skipping feature abstraction layer)
- Single components with excessive outgoing edges (doing too much)

## Limitations

- Static analysis only — does not resolve dynamic imports or `React.lazy()` paths
- Does not parse re-exports from barrel files (`index.ts`)
- TypeScript path aliases other than `@/` are not resolved
- File must exist on disk (does not resolve virtual modules)