Launch the interactive web dashboard to visualize a codebase's knowledge graph
Real-world examples not captured yet
This skill shows a gallery of live HTML demos (CDN libraries welcome — GSAP, Three.js, etc.) rendered inline via srcdoc.
Skill markdown
# /understand-dashboard
Start the Understand Anything dashboard to visualize the knowledge graph for the current project.
## Instructions
1. Determine the project directory and data directory:
- If `$ARGUMENTS` contains a path, use that as the project directory
- Otherwise, use the current working directory
- Prefer the legacy `.understand-anything/` data directory when it exists, otherwise use `.ua/`
Use the Bash tool to resolve:
```bash
PROJECT_ARG="$ARGUMENTS"
if [ -n "$PROJECT_ARG" ]; then
PROJECT_DIR=$(cd "$PROJECT_ARG" 2>/dev/null && pwd -P)
else
PROJECT_DIR=$(pwd -P)
fi
if [ -z "$PROJECT_DIR" ] || [ ! -d "$PROJECT_DIR" ]; then
echo "Error: Project directory not found: ${PROJECT_ARG:-$PWD}"
exit 1
fi
if [ -d "$PROJECT_DIR/.understand-anything" ]; then
UA_DIR="$PROJECT_DIR/.understand-anything"
else
UA_DIR="$PROJECT_DIR/.ua"
fi
```
2. Check that `$UA_DIR/knowledge-graph.json` exists in the project directory. If not, tell the user:
```
No knowledge graph found. Run /understand first to analyze this project.
```
Use the Bash tool to check:
```bash
if [ ! -f "$UA_DIR/knowledge-graph.json" ]; then
echo "No knowledge graph found. Run /understand first to analyze this project."
exit 1
fi
```
3. Find the dashboard code. The dashboard is at `packages/dashboard/` relative to this plugin's root directory. Check these paths in order and use the first that exists:
- `${CLAUDE_PLUGIN_ROOT}/packages/dashboard/` (Claude Code runtime root, highest priority)
- `~/.understand-anything-plugin/packages/dashboard/` (universal symlink, all installs)
- Two levels up from `~/.agents/skills/understand-dashboard` real path (self-relative fallback)
- Two levels up from `~/.copilot/skills/understand-dashboard` real path (Copilot personal skills fallback)
- Common clone-based install roots:
- `~/.codex/understand-anything/understand-anything-plugin/packages/dashboard/`
- `~/.opencode/understand-anything/understand-anything-plugin/packages/dashboard/`
- `~/.pi/understand-anything/understand-anything-plugin/packages/dashboard/`
- `~/understand-anything/understand-anything-plugin/packages/dashboard/`
Use the Bash tool to resolve:
```bash
SKILL_REAL=$(realpath ~/.agents/skills/understand-dashboard 2>/dev/null || readlink -f ~/.agents/skills/understand-dashboard 2>/dev/null || echo "")
SELF_RELATIVE=$([ -n "$SKILL_REAL" ] && cd "$SKILL_REAL/../.." 2>/dev/null && pwd || echo "")
COPILOT_SKILL_REAL=$(realpath ~/.copilot/skills/understand-dashboard 2>/dev/null || readlink -f ~/.copilot/skills/understand-dashboard 2>/dev/null || echo "")
COPILOT_SELF_RELATIVE=$([ -n "$COPILOT_SKILL_REAL" ] && cd "$COPILOT_SKILL_REAL/../.." 2>/dev/null && pwd || echo "")
PLUGIN_ROOT=""
for candidate in \
"${CLAUDE_PLUGIN_ROOT}" \
"$HOME/.understand-anything-plugin" \
"$SELF_RELATIVE" \
"$COPILOT_SELF_RELATIVE" \
"$HOME/.codex/understand-anything/understand-anything-plugin" \
"$HOME/.opencode/understand-anything/understand-anything-plugin" \
"$HOME/.pi/understand-anything/understand-anything-plugin" \
"$HOME/understand-anything/understand-anything-plugin"; do
if [ -n "$candidate" ] && [ -d "$candidate/packages/dashboard" ]; then
PLUGIN_ROOT="$candidate"; break
fi
done
if [ -z "$PLUGIN_ROOT" ]; then
echo "Error: Cannot find the understand-anything plugin root."
echo "Checked:"
echo " - ${CLAUDE_PLUGIN_ROOT:-<unset CLAUDE_PLUGIN_ROOT>}"
echo " - $HOME/.understand-anything-plugin"
echo " - ${SELF_RELATIVE:-<unresolved path derived from ~/.agents/skills/understand-dashboard>}"
echo " - ${COPILOT_SELF_RELATIVE:-<unresolved path derived from ~/.copilot/skills/understand-dashboard>}"
echo " - $HOME/.codex/understand-anything/understand-anything-plugin"
echo " - $HOME/.opencode/understand-anything/understand-anything-plugin"
echo " - $HOME/.pi/understand-anything/understand-anything-plugin"
echo " - $HOME/understand-anything/understand-anything-plugin"
echo "Make sure you followed the installation instructions for your platform."
exit 1
fi
DASHBOARD_DIR="$PLUGIN_ROOT/packages/dashboard"
```
4. **Fast path — try the prebuilt viewer first (no install, no build).** Each release ships a self-contained viewer tarball; run it pinned to the installed plugin version:
```bash
: "${PLUGIN_ROOT:?Run step 3 first so PLUGIN_ROOT is set}"
: "${PROJECT_DIR:?Run step 1 first so PROJECT_DIR is set}"
PLUGIN_VERSION=$(node -p "require('$PLUGIN_ROOT/package.json').version")
VIEWER_URL="https://github.com/Egonex-AI/Understand-Anything/releases/download/v${PLUGIN_VERSION}/understand-anything-viewer.tgz"
npx --yes "$VIEWER_URL" "$PROJECT_DIR"
```
Run this in the background. It prints the same `🔑 Dashboard URL` line as the dev server:
- If the l
…More from Egonex-AI
- UnderstandAnalyze a codebase to produce an interactive knowledge graph for understanding architecture, components, and relationships
- Understand ChatUse when you need to ask questions about a codebase or understand code using a knowledge graph
- Understand DiffUse when you need to analyze git diffs or pull requests to understand what changed, affected components, and risks
- Understand DomainExtract business domain knowledge from a codebase and generate an interactive domain flow graph. Works standalone (lightweight scan) or derives from an existing /understand knowledge graph.
- Understand ExplainUse when you need a deep-dive explanation of a specific file, function, or module in the codebase
- Understand FigmaAnalyze a Figma file via the Figma REST API and generate an interactive design knowledge graph (pages, screens, components, component sets, instances, design tokens) with a kind:"design" dashboard.