스킬 제작 리포트

2026-04-08 · research-and-gather + conversation-visualizer + viz-to-github 제작 과정

아이디어 발산

자료조사 → 시각화 → 메타시각화 → GitHub 배포 순으로 진행하는 메타적 접근

기획

skill-creator + 인터넷 자료조사

deep-research 8단계, Progressive Disclosure, 환각 방지 구조 수집

리서치레퍼런스 6개

research-and-gather 제작

4방향 키워드 발산 · /tmp 중간저장 · 파일만 참조 리포트

스킬 제작환각 방지

자료조사 스킬 테스트 통과

"시각화 스킬 패턴 자료조사해줘" 실행 · 중간파일 6개 · 리포트 정상 생성

테스트 통과

시각화 스킬 조사 (방금 만든 스킬로!)

Mermaid / Excalidraw / D3.js 패턴 · 차트 타입 선택 프레임워크

스킬 연계

conversation-visualizer 제작

4트랙(Mermaid/Excalidraw/React/HTML) · chart-types + mermaid-rules 번들

스킬 제작references 번들

메타 시각화 생성

conversation-visualizer가 자신의 탄생 과정을 SVG + HTML로 시각화

메타!

3개 스킬 /mnt/skills/user/ 설치

다음 대화부터 자동 트리거

설치 완료총 스킬 7개

june4432.github.io 세팅

GitHub API로 레포 생성 · .nojekyll · Pages 배포 확인

인프라

viz-to-github 스킬 제작 + 이 파일 배포!

HTML → git push → URL 반환 자동화 · 지금 이 순간

메타²배포됨

🔍

research-and-gather

웹 검색 기반 자료조사. 발산→수집→저장→수렴. 환각 방지 핵심.

자료조사

트리거: "자료조사해줘", "리서치"
키워드 4방향 발산 → 멀티쿼리
/tmp 중간 저장 → 파일만 참조
빠른 모드: 쿼리 3개, fetch 스킵

📊

conversation-visualizer

대화·데이터를 시각화. Mermaid / Excalidraw / React / HTML 4트랙.

시각화

트랙 A: Mermaid 다이어그램
트랙 B: Excalidraw 자유형
트랙 C: React + Recharts 차트
트랙 D: HTML 인터랙티브

🚀

viz-to-github

HTML → june4432.github.io/viz/ 자동 push → URL 반환.

배포

슬러그 자동 생성 (날짜+주제)
index.html 카드 자동 추가
키체인 토큰 안전 처리
배포 완료 폴링 후 URL 반환

메타 접근이 가장 효과적인 테스트

자료조사 스킬로 시각화 스킬을 조사하고, 시각화 스킬로 오늘 과정을 시각화하고, 배포 스킬로 이 파일을 배포. 제작 과정 자체가 테스트.

환각 방지 = 중간 저장 분리

기억이 아니라 파일만 참조. 검색 → 파일 저장 → 파일 읽기 → 리포트 순서가 핵심.

발산(리서치) → 수렴(시각화) → 공유(배포)

세 스킬이 자연스러운 파이프라인을 형성. 저장 스킬까지 연결되면 완전한 워크플로우.

GitHub Pages = 아이폰 호환 해결

Claude.ai artifact 렌더링 한계를 우회. 생성된 HTML을 공개 URL로 만들어서 어디서든 접근 가능.

🛠 스킬 제작 세션 리포트