본문으로 건너뛰기
cccskills
무료GitHub에 공개한국어 소개

understand-dashboard

분석된 코드베이스의 구조와 관계를 그림으로 살펴보는 대화형 웹 대시보드를 실행합니다. 현재 작업 위치나 지정한 프로젝트의 데이터를 표시합니다.

원문원문 설명 보기

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

AI 평가90점/ 100설치 방법 보기

이럴 때 유용합니다

  • 분석된 코드베이스를 그림으로 확인
  • 현재 작업 중인 프로젝트의 관계도 열기
  • 다른 프로젝트의 분석 결과 확인

한국어 소개

할 수 있는 일

Understand Anything으로 분석한 코드베이스의 지식 그래프를 대화형 웹 대시보드에 표시합니다. 지식 그래프는 코드의 구조와 관계를 그림으로 나타내는 데이터입니다. 현재 작업 디렉터리나 지정한 프로젝트를 대상으로 실행하고, 접근 토큰이 포함된 URL과 표시 중인 데이터의 저장 위치를 안내합니다.

이럴 때 유용합니다

브라우저에서 분석 결과를 살펴보며 코드베이스를 파악할 때 적합합니다. 다른 위치에 있는 분석 완료 프로젝트도 열 수 있습니다. 대시보드가 백그라운드에서 실행되므로 시작한 뒤에도 작업을 계속할 수 있습니다.

사용 예시

  • “/understand-dashboard로 현재 프로젝트를 표시해 주세요.”
  • “/understand-dashboard /path/to/project로 지정한 프로젝트를 열어 주세요.”

주의 사항

먼저 /understand로 분석해 knowledge-graph.json을 준비해야 합니다. .understand-anything/이 있으면 우선 사용하고, 없으면 .ua/를 참조합니다. 실행에는 Node와 npx를 사용하며, 배포된 뷰어를 가져오지 못하면 pnpm으로 의존성을 설치하고 빌드합니다. 데이터에 접근하려면 URL의 ?token= 부분이 필요합니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가
A양호현재 또는 지정한 프로젝트의 지식 그래프를 대시보드에 표시하는 용도가 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가
A양호데이터 확인, 뷰어 조회, 대체 빌드, 토큰 포함 URL 보고까지 명령이 제시되어 있습니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가
B일부 부족npx로 외부 배포 파일을 내려받아 실행하지만 실행 전 확인 절차는 기재하지 않습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가
A양호사전 분석과 knowledge-graph.json 필요성을 명시하고 npx 실행 및 pnpm 대체 절차를 제공합니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 21일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

어느 항목이 왜 다르다고 생각하는지 적어 주세요. 로그인은 필요 없습니다. SKILL.md와 대조해 평가를 다시 만들고 이곳에 반영합니다.

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

포함된 파일(1)

  • SKILL.md7.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

/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:

    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:

    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:

    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:

    : "${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 line appears, skip steps 5-6 and continue at step 7.
    • If the process exits without printing it (no release asset for this version, or no network), fall back to steps 5-6.
  5. Fallback: install dependencies and build if needed:

    : "${PLUGIN_ROOT:?Run step 3 first so PLUGIN_ROOT is set}"
    DASHBOARD_DIR="${DASHBOARD_DIR:-$PLUGIN_ROOT/packages/dashboard}"
    cd "$DASHBOARD_DIR" && (pnpm install --frozen-lockfile 2>/dev/null || pnpm install)
    

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

    : "${PLUGIN_ROOT:?Run step 3 first so PLUGIN_ROOT is set}"
    cd "$PLUGIN_ROOT" && pnpm --filter @understand-anything/core build
    
  6. Fallback: start the Vite dev server pointing at the project's knowledge graph:

    : "${PROJECT_DIR:?Run step 1 first so PROJECT_DIR is set}"
    : "${DASHBOARD_DIR:?Run step 5 first so DASHBOARD_DIR is set}"
    cd "$DASHBOARD_DIR" && GRAPH_DIR="$PROJECT_DIR" npx vite --host 127.0.0.1
    

    Run this in the background so the user can continue working.

  7. Capture the access token URL from the server output. The server (viewer or Vite) prints a line like:

    🔑  Dashboard URL: http://127.0.0.1:<PORT>?token=<TOKEN>
    

    Extract the full URL including the ?token= parameter. The token is required to access the knowledge graph data — without it the dashboard will show an "Access Token Required" gate.

  8. Report to the user, including the full tokenized URL:

    Dashboard started at http://127.0.0.1:<PORT>?token=<TOKEN>
    Viewing: $UA_DIR/knowledge-graph.json
    
    The dashboard is running in the background. Press Ctrl+C in the terminal to stop it.
    

    Important: Always include the ?token= parameter in the URL you share. If you omit it, the user will be blocked by the token gate and have to manually find the token in the terminal output.

Notes

  • The fast path (step 4) downloads a version-pinned, self-contained viewer from the GitHub release — nothing is installed into the plugin directory and no build runs
  • The dashboard auto-opens in the default browser (both the viewer and Vite's --open)
  • If port 5173 is already in use, the next available port is picked (both paths)
  • In the fallback, the GRAPH_DIR environment variable tells the dev server where to find the knowledge graph

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

understand

무료요약 있음AI 평가 80점

코드, 설정, 문서를 분석해 구성 요소와 의존 관계를 대화형으로 탐색하는 그래프를 만듭니다. 일본어 설명 생성과 변경 내용에 따른 갱신도 지원합니다.

  • 처음 접하는 프로젝트 구조 파악
  • 구성 요소 사이의 의존 관계 확인
  • 설계 설명을 일본어로 생성
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

understand-chat

무료요약 있음AI 평가 100점

코드 구성 요소와 관계를 기록한 지식 그래프로 질문에 답합니다. 관련 파일, 함수, 호출 및 의존 관계를 따라 프로젝트의 작동 방식과 설계 계층을 설명합니다.

  • 기능의 작동 방식 이해
  • 호출하는 곳과 의존 대상 확인
  • 개념과 관련된 코드 탐색
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

understand-diff

무료요약 있음AI 평가 90점

Git 변경이나 풀 리퀘스트를 지식 그래프와 대조합니다. 변경 지점과 주변 영향, 설계 계층 간 관계, 검토 시 주의할 위험을 정리하고 시각화 데이터를 저장합니다.

  • 풀 리퀘스트 검토 준비
  • 커밋하지 않은 변경의 영향 확인
  • 설계 계층을 넘는 변경 확인
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

understand-domain

무료요약 있음AI 평가 70점

코드에서 업무 영역과 흐름, 개별 단계를 추출해 조작 가능한 가로형 흐름도로 보여 줍니다. 기존 지식 그래프를 활용하거나 가볍게 코드를 스캔합니다.

  • 코드에 구현된 업무 흐름 파악
  • 업무 영역과 단계 사이의 연결 시각화
  • 기존 지식 그래프를 업무 관점으로 정리
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

understand-explain

무료요약 있음AI 평가 100점

기존 지식 그래프와 실제 코드를 대조해 특정 파일, 함수, 모듈의 설계상 역할과 호출 관계, 의존성, 입출력 흐름을 자세히 설명합니다.

  • 특정 파일의 역할 이해
  • 함수 호출 지점과 의존 대상 확인
  • 입력부터 출력까지의 흐름 추적
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

understand-figma

무료요약 있음AI 평가 80점

Figma 파일을 분석해 페이지, 화면, 컴포넌트와 공통 디자인 값의 관계를 그래프로 정리합니다. 대화형 대시보드에서 디자인 구조를 확인할 수 있습니다.

  • Figma 파일의 전체 구조 파악
  • 컴포넌트와 인스턴스 배치 관계 확인
  • 공통 디자인 값의 사용 현황 확인
Egonex-AI/Understand-Anything8.7만2026년 10월 12일 업데이트

Egonex-AI의 스킬 모두 보기

이 스킬의 문제 신고