SkillsAdd

terminalskills/skills

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.

First seen Jun 5, 2026

Installation

$ npx skills add terminalskills/skills --skill understand-dashboard
View on skills.sh ↗ GitHub repository ↗

Similar popular skills

Related neighbors and high-traction skills in the same topics — useful to compare before installing.

understand Similar name
egonex-ai/understand-anything

Analyze a codebase to produce an interactive knowledge graph for understanding architecture, co…

3.8K installs
understand-dashboard Similar name
egonex-ai/understand-anything

Launch the interactive web dashboard to visualize a codebase's knowledge graph

2.8K installs
understand-explain Similar name
egonex-ai/understand-anything

Use when you need a deep-dive explanation of a specific file, function, or module in the codeba…

2.8K installs
understand-chat Similar name
egonex-ai/understand-anything

Use when you need to ask questions about a codebase or understand code using a knowledge graph

2.7K installs
understand-onboard Similar name
egonex-ai/understand-anything

Use when you need to generate an onboarding guide for new team members joining a project

2.7K installs
understand-diff Similar name
egonex-ai/understand-anything

Use when you need to analyze git diffs or pull requests to understand what changed, affected co…

2.6K installs

Also in this package

Other skills from terminalskills/skills · top by installs.

npx skills add terminalskills/skills
instagram-marketing 350 api-tester 139 claude-hud 112 coolify 82 directus 50 davinci-resolve 42 agent-memory 29 playwright-testing 25 claude-mem 23 blender-scripting 20

Browse all from terminalskills/skills

More details

Agent compatibility

Declared targets from SKILL.md / docs. Unmarked agents are not listed — the skill may still install via the CLI.

Claude Code Declared
Cursor Declared
Codex Not declared
GitHub Copilot Not declared
Windsurf Not declared
Gemini CLI Not declared
Cline Not declared
OpenCode Not declared

Also listed on

Alternate registries and mirrors of this skill.

Repository health

Stars 146
License LICENSE
Default branch main
Open issues 1
Status Active

Skill metadata

Parsed from SKILL.md frontmatter.

Version1.0.0
LicenseMIT
CompatibilityClaude Code, Cursor, any AI coding agent
Declared agents claude-code cursor
More metadata
author
terminal-skills
version
1.0.0
category
development
tags
["codebase","knowledge-graph","visualization","dashboard","architecture"]

Package contents

Files included with this skill beyond the listing page.

  • skill md SKILL.md 3,776 B
  • docs SUMMARY.md 237 B

History

  1. First seen on skills.sh
  2. First recorded snapshot · 4 installs

SKILL.md

/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

  1. 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. ``

  1. 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 PLUGINROOT="$(cd "$(dirname "$0")/../.." && pwd)" ` Or locate it by checking these paths in order: - ${CLAUDEPLUGIN_ROOT}/packages/dashboard/ - The parent directory of this skill file, then ../../packages/dashboard/`

  1. 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 ``

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

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