Stats
Actions
Tags
From html-visualize
현재 대화 맥락의 task 내용을 시각적으로 이해하기 쉬운 single-file HTML로 변환하여 임시 디렉토리에 저장 후 브라우저로 자동 오픈하는 스킬. Thariq Shihipar의 "HTML이 Markdown보다 효과적" 컨셉 기반. 콘텐츠 유형을 자동 판별해 Thariq 20개 카테고리 중 적절한 템플릿을 적용. 영구 저장 X, 일회성 시각화 용도. "/html-visualize:html-visualize", "html로 보여줘", "시각화해줘" 요청에 사용.
How this skill is triggered — by the user, by Claude, or both
Slash command
/html-visualize:html-visualizeThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
현재 대화 맥락의 작업 내용을 **single-file HTML**로 시각화하여 임시 디렉토리에 저장하고 브라우저로 즉시 열어 사용자가 직관적으로 이해할 수 있게 한다.
현재 대화 맥락의 작업 내용을 single-file HTML로 시각화하여 임시 디렉토리에 저장하고 브라우저로 즉시 열어 사용자가 직관적으로 이해할 수 있게 한다.
영구 저장이 아닌 일회성 이해 보조 도구다. macOS / Linux / Windows를 자동으로 감지해 OS별 임시 디렉토리에 저장하고 그 OS의 기본 브라우저 오픈 명령을 사용한다.
OS는 자동 감지 (macOS / Linux / Windows). 필요하면 아래 환경변수로 override 가능. 평소 셸 설정(~/.zshrc, ~/.bashrc 등)에 한 번만 export 해두면 된다.
| 환경변수 | 기본값 | 설명 |
|---|---|---|
HTML_VISUALIZE_DIR | OS별 temp dir (아래 표) | HTML 저장 디렉토리. 영구 보관하려면 ~/html-viz 같은 경로로 변경. |
HTML_VISUALIZE_AUTO_OPEN | 1 | 0이면 브라우저 자동 오픈 생략하고 경로만 출력. |
| OS | 기본 temp dir | 자동 오픈 명령 |
|---|---|---|
| macOS | /tmp | open "<file>" |
| Linux | /tmp | xdg-open "<file>" |
| Windows (Git Bash / MSYS) | ${TEMP:-${TMP:-/tmp}} | start "" "<file>" |
Windows는 Claude Code 기본 셸인 Git Bash / MSYS 가정. 순수 cmd/PowerShell 환경은 미검증.
스킬 인자 없음. 현재 대화 맥락을 Claude가 자동 판단하여 무엇을 시각화할지 결정한다.
판단 기준:
중요: 단계별로 TaskCreate로 등록하여 진행 추적할 것. 특히 콘텐츠 유형 판별과 템플릿 선택 단계는 빠뜨리지 말 것.
이후 모든 단계에서 사용할 PLATFORM, VIZ_DIR, AUTO_OPEN, OPEN_CMD 값을 결정한다.
# 1. OS 감지
if [ "$OS" = "Windows_NT" ] || uname -s 2>/dev/null | grep -qE '^(MINGW|MSYS|CYGWIN)'; then
PLATFORM=windows
DEFAULT_DIR="${TEMP:-${TMP:-/tmp}}"
OPEN_CMD='start ""'
elif [ "$(uname -s 2>/dev/null)" = "Darwin" ]; then
PLATFORM=macos
DEFAULT_DIR=/tmp
OPEN_CMD=open
else
PLATFORM=linux
DEFAULT_DIR=/tmp
OPEN_CMD=xdg-open
fi
# 2. 사용자 override 적용
VIZ_DIR="${HTML_VISUALIZE_DIR:-$DEFAULT_DIR}"
AUTO_OPEN="${HTML_VISUALIZE_AUTO_OPEN:-1}"
# 3. 디렉토리 보장
mkdir -p "$VIZ_DIR"
이 값들을 이후 단계에서 그대로 사용한다.
현재 대화 맥락에서 시각화할 핵심 콘텐츠를 결정한다. 콘텐츠가 길거나 여러 주제가 섞여 있으면 가장 시각화 효과가 큰 것 하나를 골라 집중한다. 다른 부분은 무리해서 포함하지 않는다.
콘텐츠 성격을 분석하여 아래 20 카테고리 중 가장 적합한 것 1개 또는 하이브리드(최대 2개)로 결정한다.
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| exploration-code-approaches | 코드 접근법 여러 안 비교 | side-by-side 레이아웃, 인라인 주석 |
| exploration-visual-designs | 디자인 시안 비교 | 실시간 렌더링, 스타일 변형 |
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| code-review-pr | PR diff/이슈 정리 | 마진 노트, severity 태그, 파일 경로 |
| code-understanding | 모듈/아키텍처 설명 | 박스+화살표, 하이라이팅 |
| pr-writeup | 코드 변경 내러티브 | 파일별 투어, before/after 코드 블록 |
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| design-system | 색상/토큰/스와치 정리 | 색상 렌더링, 복사 가능 토큰 |
| component-variants | 컴포넌트 상태 카탈로그 | 그리드, 변형(state) 표시 |
| prototype-animation | 애니메이션 튜닝 | CSS 트랜지션, 슬라이더 |
| prototype-interaction | 클릭 가능 프로토타입 | 멀티 스크린, JS 내비 |
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| slide-deck | 핵심 메시지 발표 | 섹션 분할, 키보드 내비 |
| svg-illustrations | 개념 일러스트 | 인라인 SVG |
| flowchart-diagram | 프로세스/파이프라인 | SVG 플로우차트, 클릭 가능 노드 |
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| status-report | 진행 상황/주간 업데이트 | 차트, 색상 강조, 표 |
| incident-report | 포스트모템/버그 분석 | 타임라인, 로그 발췌, 체크리스트 |
| research-feature-explainer | 기능/스킬 문서화 | 접기 섹션, 탭, 용어집 |
| research-concept-explainer | 개념 설명 | 호버 링크, 인터랙티브 예시 |
| implementation-plan | 프로젝트 계획 | 타임라인, 리스크 표, 마일스톤 |
| 카테고리 | 적용 시점 | 핵심 HTML 기능 |
|---|---|---|
| editor-triage-board | 티켓/태스크 정리 | 드래그앤드롭, export 버튼 |
| editor-feature-flags | 설정/플래그 검토 | 토글, 의존성 경고, diff |
| editor-prompt-tuner | 프롬프트 템플릿 편집 | 라이브 변수 렌더링 |
선택한 카테고리에 맞게 HTML을 작성한다. 다음 제약을 엄수한다.
<style> 블록과 <script> 블록을 <head> 또는 <body> 안에 직접 작성.prefers-color-scheme media query 추가 금지.font-family: -apple-system, BlinkMacSystemFont, sans-serif.플로우차트·아키텍처·관계도는 인라인 SVG로 그린다. ASCII 아트나 텍스트 박스로 대체하지 않는다.
$VIZ_DIR/{slug}-{YYYYMMDD-HHMMSS}.html (Step 0에서 결정된 디렉토리)/tmp/html-vs-markdown-summary-20260512-143052.html${TEMP}/html-vs-markdown-summary-20260512-143052.html (보통 C:/Users/<user>/AppData/Local/Temp/...)AUTO_OPEN이 0이 아니면 생성 직후 Step 0에서 결정한 OPEN_CMD로 OS 기본 브라우저에서 자동으로 연다.
# macOS: open "$VIZ_DIR/<file>.html"
# Linux: xdg-open "$VIZ_DIR/<file>.html"
# Windows: start "" "$VIZ_DIR/<file>.html"
eval "$OPEN_CMD \"$VIZ_DIR/<file>.html\""
HTML_VISUALIZE_AUTO_OPEN=0이면 오픈 생략하고 Step 6에서 경로만 출력한다.
다음 정보를 출력한다:
HTML_VISUALIZE_DIR를 영구 경로로 바꾸도록 안내. 스킬 자체는 임시 시각화만 담당.-2 등 접미사 추가.| 사용자 맥락 | 선택 카테고리 | 시각화 포커스 |
|---|---|---|
| 방금 PR 리뷰 코멘트 정리받음 | code-review-pr | severity별 카드, 파일 경로, 제안 fix |
| 새 기능 아키텍처 설명 받음 | code-understanding + flowchart-diagram | 모듈 박스 + 데이터 흐름 SVG |
| 두 라이브러리 비교 분석 받음 | exploration-code-approaches | side-by-side 표, 장단점 |
| 인시던트 원인 분석 받음 | incident-report | 타임라인, 로그, 액션 아이템 |
| 학습 개념 설명 받음 | research-concept-explainer | 접기 섹션, 예시, 용어 호버 |
| 프로젝트 계획 받음 | implementation-plan | 마일스톤 타임라인, 리스크 표 |
Creates, edits, and optimizes skills for Claude Code, including drafting, evaluating with test prompts, iterating on performance, and improving skill descriptions for better triggering accuracy.
npx claudepluginhub chang-hyun-hong/andy-skills --plugin html-visualize