ONEDEV

visual-explainer

AI Agent FrameworksskillHTML

★ 9,842주당 +146조회 4

무엇인가

visual-explainer는 에이전트가 구조 설명·diff 리뷰·계획 대조·데이터 표·프로젝트 회고를 산출할 때 터미널 텍스트 대신 자체 포함 HTML 페이지나 슬라이드 덱을 내놓도록 출력 형식과 렌더 절차를 규정하는 스킬이다. 규율 대상은 답변의 내용이 아니라 표현 계층이다. 다이어그램·비교 표·요약 페이지의 생성 경로, 저장 위치, 뷰어 호출 방식까지 규칙에 포함된다.

어떻게 동작하나

정본은 plugins/visual-explainer 아래의 SKILL.md이며, 같은 디렉터리에 명령 템플릿(diff-review, plan-review, fact-check, generate-slides, generate-visual-plan, generate-web-diagram, project-recap)과 MCP 서버, Pi 확장이 함께 배치된다. 발동 경로는 세 갈래다. 슬래시 명령 템플릿으로 호출하거나, Pi 확장이 등록하는 네이티브 visual_explainer 툴을 action: prepare / render / render_quick으로 호출하거나, MCP 호스트에서 visual_explainer_prepare·visual_explainer_render_html·visual_explainer_render_quick을 호출한다. 렌더 결과는 기본적으로 ~/.agent/diagrams/에 HTML로 기록되고 viewer: browser | glimpse | auto로 열린다.

무엇과 다른가

기본 동작과의 차이는 출력 매체다. 에이전트는 다이어그램 요청에 박스 문자와 모노스페이스 정렬로 답하는 것이 기본값인데, 이 스킬은 Mermaid 인터랙티브 다이어그램(줌·팬), 다크/라이트 테마, 실제 타이포그래피를 갖춘 HTML로 경로를 바꾼다. 프롬프트를 매번 직접 작성하는 방식과 달리 명령 템플릿과 렌더 스키마가 파일로 고정되어 있고, 일반 사용 경로에는 빌드 단계와 브라우저 외 의존성이 없다. MCP·PPTX 유틸리티를 쓸 때만 소규모 Node 의존성이 붙는다.

어떻게 쓰나

Claude Code에서는 마켓플레이스 명령 두 줄로 설치하며, 플러그인이 명령을 네임스페이스로 묶으므로 /visual-explainer:command-name 형태로 호출한다. Pi는 pi install git:github.com/nicobailon/visual-explainer 또는 로컬 체크아웃에 대한 pi install ./visual-explainer를 쓴다. MCP 호스트는 visual-explainer-mcp 실행 파일이나 체크아웃의 plugins/visual-explainer/mcp/server.mjs를 절대 경로로 지정한다. Antigravity CLI는 plugins/visual-explainer 디렉터리를 ~/.gemini/antigravity-cli/skills/visual-explainer로 복사한다.

전제와 한계

브라우저가 있어야 결과를 볼 수 있다. MCP 서버는 로컬 stdio 전용이며 LLM 호출, HTTP 리스너, 자격 증명 처리를 하지 않고 설정된 출력 디렉터리 밖에 쓰지 않는다. 출력 경로는 VISUAL_EXPLAINER_OUTPUT_DIR로 바꿀 수 있으나 심볼릭 링크 경로는 거부되고 기존 심볼릭 링크 대상에도 쓰지 않는다. Pi의 구형 curl 설치 스크립트는 스킬과 프롬프트 파일만 복사하고 네이티브 툴을 설치하지 않으며, 이전 수동 설치 파일이 남아 있으면 pi install이 스킬·프롬프트 충돌을 보고한다.

유사 도구