Component visualizer
A Cowork plugin that helps **product designers and engineers ship design-to-production React apps** — translating Figma mockups into accessible, production-ready components with best-practice enforcement for React 19, TypeScript, Tailwind CSS v4, and shadcn/ui.
npx -y skills add michelve/hugin-cowork --skill component-visualizerAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 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
This skill should be used when the user asks to visualize components, show component dependencies, dependency graph, component map, or what depends on what. It generates interactive HTML dependency graphs for React components.
SKILL.md
3.2 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/— shadcn) - Gray: Other files
- Blue: Route 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 (shadcn) | Installed shadcn primitives |
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 UI (purple)
- Clusters indicate feature groupings
- 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 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)