visuals plugin · skill docs

visuals skills

가진 내용을 보여 줄 수 있는 파일 하나로 바꾸는 스킬 3개 — 자체 완결형 HTML, 세로 스크롤 덱, 그리고 .excalidraw 다이어그램. 스킬마다 설명서 1건과 사용 예시 1건이 있고, 실제로 만들어진 산출물이 이 저장소에 그대로 들어 있습니다.

내용 · 문서 · 주제─▶ 스킬 1개─▶ 파일 1개
세 스킬은 서로를 명시적으로 배제합니다 — 겹치는 영역을 협상하지 않고 산출물 종류로 잘라 놓았습니다. 고를 때 보는 것은 주제가 아니라 손에 남는 파일이 무엇인가입니다. 아래 2번이 그 분기입니다.

1스킬 3개

visualize

/visuals:visualize [<파일-또는-내용>]

자체 완결형 HTML 파일 1개를 쓴다 — 덱, 대시보드, 인포그래픽, 포스터, 플로차트, 타임라인, 캐러셀. 빈 화면이 아니라 고정된 스켈레톤과 디자인 시스템에서 출발하고, 형식이 정해지지 않았으면 1~2개를 제안한 뒤 확인을 기다린다.

설명서 사용 예시

md-to-scrolldeck

/visuals:md-to-scrolldeck <input.md> [--slides n]

Markdown 문서 1개를 리더 보고용 세로 스크롤스냅 덱으로 압축한다. 제목을 슬라이드에 1:1로 옮기지 않고 무엇을 자를지 정하며, HTML 을 쓰기 전에 슬라이드 아웃라인을 먼저 출력한다. 비트가 5개 미만이면 visualize 쪽이 맞다고 경고한다.

설명서 사용 예시 실제 덱

excalidraw-diagram

/visuals:excalidraw-diagram <주제-또는-스펙>

정보를 나열하는 대신 시각적으로 논증하는 .excalidraw JSON 을 만들고, PNG 로 렌더한 뒤 그 그림을 직접 보고 고친다. 27개 품질 항목을 다 통과할 때까지 렌더-확인-수정을 2~4회 돌린 다음에야 결과를 내놓는다.

설명서 사용 예시 렌더 결과

2산출물이 라우팅을 결정한다

세 스킬은 각자의 SKILL.md 에서 나머지 둘을 이름으로 지목해 배제합니다. 그래서 고르는 기준은 무엇을 다루느냐가 아니라 끝나고 남는 파일의 종류 하나뿐입니다.

.excalidraw 파일이 필요하다 → excalidraw-diagram

Excalidraw 로 열어 손으로 계속 고칠 수 있는 다이어그램이 목적일 때. 결과물은 JSON 과 그 렌더 PNG 이며, HTML 은 만들지 않는다.

Markdown 이 들어가고 세로 스크롤 덱이 나온다 → md-to-scrolldeck

입력이 .md 문서 하나이고 출력이 위에서 아래로 스냅되는 보고용 덱일 때만 여기다. 대시보드도 인포그래픽도 가로 덱도 이 스킬의 범위가 아니다.

그 밖의 모든 시각화 → visualize

범용 기본값. 대시보드, 인포그래픽, 포스터, 가로 덱은 전부 이쪽이다. 다만 세로 스크롤 덱은 md-to-scrolldeck 에 넘기고, 다이어그램 파일은 excalidraw-diagram 에 넘긴다.

3실제 산출물

아래는 설명이 아니라 이 스킬들이 실제로 뱉은 파일 그대로입니다. 사용 예시 페이지가 이 파일들을 어떤 명령으로 만들었는지 기록합니다.

md-to-scrolldeck — 24슬라이드 덱

이 저장소의 README.md 를 세로 스크롤 덱으로 압축한 결과. 진행 바, 페이즈 헤더, 우측 도트 레일, 방향키 이동이 모두 그 한 파일 안에 들어 있다.

덱 열기 기록 원본 (md)

excalidraw-diagram — PMIC 시스템

Main PMIC 1개와 Sub PMIC 5개, SPMI 통신선과 ADC 채널을 그린 다이어그램. 입력 프롬프트 원문, 편집 가능한 JSON, 렌더 PNG, 렌더 스크립트가 모두 남아 있다.

PNG excalidraw JSON 입력 프롬프트
렌더 파이프라인