Skip to the rows

agentsclimarketplace

Component visualizer

Skill michelve/hugin-v0/skills/component-visualizer

A Claude Code plugin packaging 23 skills, 8 agents, 5 event hooks, and 7 MCP servers for full-stack development with React 19, TypeScript, Express, Prisma, Tailwind CSS v4, and shadcn/ui.

Install

npx -y skills add michelve/hugin-v0 --skill component-visualizer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

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.md

3.3 KB, as published. Nobody here has run it

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:

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:

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)

Keep looking

Skills are one crate of 328,083. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.