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.
From hugin-coworknpx claudepluginhub michelve/hugin-marketplace --plugin hugin-coworkThis skill uses the workspace's default tool permissions.
scripts/visualize-components.pySearches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Guides agent creation for Claude Code plugins with file templates, frontmatter specs (name, description, model), triggering examples, system prompts, and best practices.
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.
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
src/client/routes/)src/client/components/)src/client/components/ui/ — shadcn)| 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 |
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 resolutionNode module imports (e.g., react, @tanstack/router) are excluded.
Healthy patterns:
Warning signs:
ui/ (skipping abstraction layer)React.lazy() pathsindex.ts)@/ are not resolved