Gongnangi Chart Skill — Design skill for Claude Code

공냥이 시각 콘텐츠 스킬

컨설팅 스타일 차트, 인스타그램 카드뉴스, 애니메이션 영상을 HTML/CSS 코드로 생성하는 Claude Code 스킬입니다.

데모


3가지 기능:

• 공냥이 차트 — 컨설팅 스타일 데이터 차트
• 공냥이 카드뉴스 — 인스타 카드뉴스 5가지 디자인
• 공냥이 영상 — Remotion 애니메이션 차트

이런 걸 만듭니다

1. 공냥이 차트 (960x500)

McKinsey/Bain 스타일 데이터 차트. HTML로 생성하고 Chrome headless로 PNG 변환.

  

**지원 차트 유형:**

• 수평 바 차트 (슬림 6px, 강조색 1개)
• 비교표 (테이블)
• A vs B 양방향 비교
• 프로세스/흐름도
• 타임라인
• 레벨/계단형

2. 공냥이 카드뉴스 (1080x1350, 5가지 디자인)

인스타그램 4:5 포트레이트. 5가지 디자인 테마 중 선택 가능.

테마	설명	예시
editorial	좌측정렬 매거진, 라이트 배경
impact	다크 배경, 중앙 극적 임팩트 (기본값)
grid	좌우 2단 분할, 어스톤 색상
dark-slim	다크 배경, 슬림 차트
minimal	흑백 미니멀, 중앙정렬

**데이터 슬라이드 (바 차트 포함):**

 

3. 공냥이 영상 (Remotion)

React + Remotion으로 차트 애니메이션을 MP4/GIF로 렌더링.

 

• 바가 0에서 쫙 올라오는 애니메이션
• 숫자가 0에서 카운트업
• 프레임워크 요소가 순차 등장
• spring() 물리 기반 자연스러운 모션
• MP4, GIF 출력

설치

git clone https://github.com/gongnyang/gongnangi-chart-skill.git
cd gongnangi-chart-skill
bash install.sh

설치 스크립트가 자동으로:

• 스킬 파일을 ~/.claude/skills/consulting-chart/에 복사
• Node.js, Chrome, ffmpeg 설치 여부 확인
• 누락된 의존성 안내

설치 후 테스트

bash test.sh

테스트 항목:

• 스킬 파일 존재 확인
• Node.js/Chrome/ffmpeg 설치 확인
• HTML → PNG 렌더