복잡한 터미널 출력을 실제로 읽고 싶은 스타일이 있는 HTML 페이지로 변환하는 에이전트 스킬.

에이전트에게 시스템 아키텍처를 설명하거나, 차이점을 검토하거나, 요구사항을 계획과 비교해 달라고 요청하세요. ASCII 아트나 박스 드로잉 테이블 대신, 독립적인 HTML 페이지를 생성해 브라우저에서 엽니다.

https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec

왜

모든 코딩 에이전트는 다이어그램을 요청하면 기본적으로 ASCII 아트를 사용합니다. 박스 그리기 문자, 단공간 정렬 해킹, 텍스트 화살표 등. 사소한 경우에는 효과가 있지만, 3박스 플로우차트 이상은 읽을 수 없는 혼란이 됩니다.

테이블은 더 심각합니다. 상담원에게 15개의 요구사항을 계획과 비교해 보라고 하면, 터미널을 감싸고 부서지는 파이프와 대시 벽이 생깁니다. 데이터는 있지만 읽기 힘듭니다.

이 스킬은 이를 해결합니다. 실제 타이포그래피, 어둡고 밝은 테마, 독자에게 애니메이션을 하고 반응하는 손그림 다이어그램. 일반적인 스킬 사용에는 빌드 단계가 없고 브라우저 외에는 의존성이 없습니다; 선택적 MCP 및 PPTX 유틸리티는 작은 노드 의존성을 사용합니다.

visual-explainer

An agent skill that turns complex terminal output into styled HTML pages you actually want to read.

Ask your agent to explain a system architecture, review a diff, or compare requirements against a plan. Instead of ASCII art and box-drawing tables, it generates a self-contained HTML page and opens it in your browser.

> draw a diagram of our authentication flow
> /diff-review
> /plan-review ~/docs/refactor-plan.md

https://github.com/user-attachments/assets/55ebc81b-8732-40f6-a4b1-7c3781aa96ec

Why

Every coding agent defaults to ASCII art when you ask for a diagram. Box-drawing characters, monospace alignment hacks, text arrows. It works for trivial cases, but anything beyond a 3-box flowchart turns into an unreadable mess.

Tables are worse. Ask the agent to compare 15 requirements against a plan and you get a wall of pipes and dashes that wraps and breaks in the terminal. The data is there but it’s painful to read.

This skill fixes that. Real typography, dark/light themes, hand-drawn diagrams that animate and respond to the reader. Normal skill use has no build step and no dependency beyond a browser; optional MCP and PPTX utilities use small Node dependencies.

Step through a state machine one event at a time: the route each event took lights up, jobs pile into queues and drain, and each step says why it happened (example).

Install