About

Imported from terminalskills/skills (skills/understand-dashboard/SKILL.md). Install upstream with npx skills add terminalskills/skills --skill understand-dashboard. Copyright stays with the author (MIT).

/understand-dashboard

Name: understand-dashboard
Author: terminalskills

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

Determine the project directory:
- If $ARGUMENTS contains a path, use that as the project directory
- Otherwise, use the current working directory
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.
```
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:
```
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/

Install dependencies and build if needed:

cd <dashboard-dir> && pnpm install --frozen-lockfile 2>/dev/null || pnpm install

Then ensure the core package is built (the dashboard depends on it):

cd <plugin-root> && pnpm --filter @understand-anything/core build

Start the Vite dev server pointing at the project's knowledge graph:
```
cd <dashboard-dir> && GRAPH_DIR=<project-dir> npx vite --open
```
Run this in the background so the user can continue working.

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 file

Use it

Copy one of these into your project. Installing also returns the manifest and these snippets.

yaml

targets:
  - https://api.opensmartroute.ai/api/v1/registry/terminalskills-skills-understand-dashboard/manifest   # or paste the manifest below

Manifest

An Open Capability Manifest: the router reads it to know what this does, what it costs and when to pick it.

terminalskills-skills-understand-dashboard.ocm.jsonjson

{
  "ocm": "1",
  "id": "terminalskills-skills-understand-dashboard",
  "kind": "skill",
  "name": "understand-dashboard",
  "description": "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.",
  "publisher": "terminalskills",
  "version": "1.0.0",
  "capabilities": {
    "domains": [
      "data_analysis",
      "coding"
    ],
    "tags": [
      "skill-md",
      "codebase",
      "knowledge-graph",
      "visualization",
      "dashboard",
      "architecture",
      "skills-sh"
    ],
    "languages": [
      "en"
    ]
  },
  "quality_prior": 0.6,
  "examples": [
    "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."
  ],
  "primary": false,
  "metadata": {
    "source": {
      "provider": "skills.sh",
      "repository": "https://github.com/terminalskills/skills",
      "path": "skills/understand-dashboard/SKILL.md",
      "ref": "HEAD",
      "url": "https://github.com/terminalskills/skills/blob/HEAD/skills/understand-dashboard/SKILL.md",
      "key": "terminalskills/skills/skills/understand-dashboard/SKILL.md"
    },
    "compatibility": "Claude Code, Cursor, any AI coding agent",
    "license": "MIT"
  },
  "instructions": "# /understand-dashboard\n\n## Overview\n\nLaunch 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.\n\n## Instructions\n\n1. Determine the project directory:\n   - If `$ARGUMENTS` contains a path, use that as the project directory\n   - Otherwise, use the current working directory\n\n2. Check that `.understand-anything/knowledge-graph.json` exists in the project directory. If not, tell the user:\n   ```\n   No knowledge gra",
  "cost": {
    "context_tokens": 820
  }
}

Fetch it by URL: GET /api/v1/registry/terminalskills-skills-understand-dashboard/manifest?version=1.0.0

Reviews

Star ratings from people who tried it. One review per account; edit yours any time.

No reviews yet. Install it, try it, and be the first to rate it.