understand-dashboard
Launch an interactive web dashboard to visualize a codebase as a knowledge graph. Use when: exploring project architecture visually, seeing file/function dependencies, understanding code structure at a glance.
Best use case
understand-dashboard is best used when you need a repeatable AI agent workflow instead of a one-off prompt.
Launch an interactive web dashboard to visualize a codebase as a knowledge graph. Use when: exploring project architecture visually, seeing file/function dependencies, understanding code structure at a glance.
Teams using understand-dashboard should expect a more consistent output, faster repeated execution, less prompt rewriting.
When to use this skill
- You want a reusable workflow that can be run more than once with consistent structure.
When not to use this skill
- You only need a quick one-off answer and do not need a reusable workflow.
- You cannot install or maintain the underlying files, dependencies, or repository context.
Installation
Claude Code / Cursor / Codex
Manual Installation
- Download SKILL.md from GitHub
- Place it in
.claude/skills/understand-dashboard/SKILL.mdinside your project - Restart your AI agent — it will auto-discover the skill
How understand-dashboard Compares
| Feature / Agent | understand-dashboard | Standard Approach |
|---|---|---|
| Platform Support | Not specified | Limited / Varies |
| Context Awareness | High | Baseline |
| Installation Complexity | Unknown | N/A |
Frequently Asked Questions
What does this skill do?
Launch an interactive web dashboard to visualize a codebase as a knowledge graph. Use when: exploring project architecture visually, seeing file/function dependencies, understanding code structure at a glance.
Where can I find the source code?
You can find the source code on GitHub using the link provided at the top of the page.
SKILL.md Source
# /understand-dashboard
## Overview
Launch an interactive web dashboard that visualizes a codebase's knowledge graph as a force-directed node graph. The dashboard provides layer views, dependency exploration, complexity heatmaps, and search filtering, all served locally via Vite.
## Instructions
1. Determine the project directory:
- If `$ARGUMENTS` contains a path, use that as the project directory
- Otherwise, use the current working directory
2. Check that `.understand-anything/knowledge-graph.json` exists in the project directory. If not, tell the user:
```
No knowledge graph found. Run /understand first to analyze this project.
```
3. Find the dashboard code. The dashboard is at `packages/dashboard/` relative to this plugin's root directory. Use the Bash tool to resolve the path:
```bash
PLUGIN_ROOT="$(cd "$(dirname "$0")/../.." && pwd)"
```
Or locate it by checking these paths in order:
- `${CLAUDE_PLUGIN_ROOT}/packages/dashboard/`
- The parent directory of this skill file, then `../../packages/dashboard/`
4. Install dependencies and build if needed:
```bash
cd <dashboard-dir> && pnpm install --frozen-lockfile 2>/dev/null || pnpm install
```
Then ensure the core package is built (the dashboard depends on it):
```bash
cd <plugin-root> && pnpm --filter @understand-anything/core build
```
5. Start the Vite dev server pointing at the project's knowledge graph:
```bash
cd <dashboard-dir> && GRAPH_DIR=<project-dir> npx vite --open
```
Run this in the background so the user can continue working.
6. Report to the user:
```
Dashboard started at http://localhost:5173
Viewing: <project-dir>/.understand-anything/knowledge-graph.json
The dashboard is running in the background. Press Ctrl+C in the terminal to stop it.
```
## Examples
**Example 1: Launching the dashboard for the current project**
User: `/understand-dashboard`
The agent verifies `.understand-anything/knowledge-graph.json` exists in the current directory, resolves the dashboard package path at `packages/dashboard/`, installs dependencies with `pnpm install`, builds the core package, and starts the Vite dev server with `GRAPH_DIR=$(pwd) npx vite --open`. The browser opens to `http://localhost:5173` showing the interactive graph with 47 nodes across 5 architectural layers.
**Example 2: Launching the dashboard for a specific project path**
User: `/understand-dashboard ~/projects/my-api`
The agent checks that `~/projects/my-api/.understand-anything/knowledge-graph.json` exists, then starts the dashboard with `GRAPH_DIR=~/projects/my-api`. The user sees the knowledge graph for their API project rendered in the browser, with nodes color-coded by layer and sized by complexity score.
## Guidelines
- Always verify the knowledge graph file exists before attempting to start the dashboard
- Run the Vite server in the background so the user can continue working in the terminal
- If port 5173 is occupied, Vite automatically picks the next available port; report the actual URL
- Ensure the core package is built before starting the dashboard since it depends on `@understand-anything/core`
- The `GRAPH_DIR` environment variable tells the dashboard where to find the knowledge graph fileRelated Skills
understand-onboard
Generate a comprehensive onboarding guide for new developers joining a project, based on the codebase knowledge graph. Use when: onboarding new team members, creating developer documentation, ramping up on a new project.
understand-explain
Get a deep-dive explanation of any file, function, or module using the codebase knowledge graph. Use when: understanding unfamiliar code, explaining how a feature is implemented, learning a legacy codebase.
understand-diff
Analyze git diffs and PRs using the codebase knowledge graph to understand impact and risk. Use when: reviewing pull requests, understanding what a diff actually changes, assessing risk of a code change.
understand-chat
Answer questions about any codebase using an AI-generated knowledge graph. Use when: asking architecture questions about a project, understanding how specific features work, exploring codebase relationships interactively.
zustand
You are an expert in Zustand, the small, fast, and scalable state management library for React. You help developers manage global state without boilerplate using Zustand's hook-based stores, selectors for performance, middleware (persist, devtools, immer), computed values, and async actions — replacing Redux complexity with a simple, un-opinionated API in under 1KB.
zoho
Integrate and automate Zoho products. Use when a user asks to work with Zoho CRM, Zoho Books, Zoho Desk, Zoho Projects, Zoho Mail, or Zoho Creator, build custom integrations via Zoho APIs, automate workflows with Deluge scripting, sync data between Zoho apps and external systems, manage leads and deals, automate invoicing, build custom Zoho Creator apps, set up webhooks, or manage Zoho organization settings. Covers Zoho CRM, Books, Desk, Projects, Creator, and cross-product integrations.
zod
You are an expert in Zod, the TypeScript-first schema declaration and validation library. You help developers define schemas that validate data at runtime AND infer TypeScript types at compile time — eliminating the need to write types and validators separately. Used for API input validation, form validation, environment variables, config files, and any data boundary.
zipkin
Deploy and configure Zipkin for distributed tracing and request flow visualization. Use when a user needs to set up trace collection, instrument Java/Spring or other services with Zipkin, analyze service dependencies, or configure storage backends for trace data.
zig
Expert guidance for Zig, the systems programming language focused on performance, safety, and readability. Helps developers write high-performance code with compile-time evaluation, seamless C interop, no hidden control flow, and no garbage collector. Zig is used for game engines, operating systems, networking, and as a C/C++ replacement.
zed
Expert guidance for Zed, the high-performance code editor built in Rust with native collaboration, AI integration, and GPU-accelerated rendering. Helps developers configure Zed, create custom extensions, set up collaborative editing sessions, and integrate AI assistants for productive coding.
zeabur
Expert guidance for Zeabur, the cloud deployment platform that auto-detects frameworks, builds and deploys applications with zero configuration, and provides managed services like databases and message queues. Helps developers deploy full-stack applications with automatic scaling and one-click marketplace services.
zapier
Automate workflows between apps with Zapier. Use when a user asks to connect apps without code, automate repetitive tasks, sync data between services, or build no-code integrations between SaaS tools.