maverickmaltin/minimal-graphics

/minimal-graphics: 도형과 움직이는 점으로 설명하는 아이디어

사용자가 아이디어를 제시합니다 ("아이디어가 바이럴되는 방법", "법안이 법이 되는 과정", "물의 순환", "당신의 주의가 가는 곳"). 이에 맞는 모션 패턴을 선택하고, 간단한 사양을 작성한 후, 프레임을 확인하고, 5~7초 길이의 무음 MP4 영상을 렌더링하여 전달합니다.

${CLAUDE_SKILL_DIR}는 이 스킬이 위치한 폴더(현재 SKILL.md가 있는 폴더)입니다. 환경이 이 변수를 채워주지 않으면 해당 폴더 경로를 직접 사용하세요. 모든 파일은 사용자의 현재 폴더나 사용자가 지정한 폴더에 저장합니다.

0. 설치 확인

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" --check

몇 초 정도 걸립니다. 이 컴퓨터가 설정되어 있는지 확실하지 않으면 실행하세요. "ready": true이면 진행합니다. 그렇지 않으면 출력된 "fix" 아래의 명령어를 실행하고, 사용자에게 일회성 설치임을 알립니다: python3 -m pip install playwright (브라우저 드라이버), python3 -m playwright install chromium (Google Chrome이나 Edge가 설치되어 있지 않은 경우에만, 약 150MB), 그리고 python3 -m pip install imageio-ffmpeg (ffmpeg가 없는 경우에만). pip가 "외부 관리 환경(externally managed environment)" 오류를 내면, 개인 환경을 한 번 생성하고 모든 명령에 해당 Python을 사용하세요: python3 -m venv ~/.animate-skills && ~/.animate-skills/bin/pip install playwright imageio-ffmpeg, 그 다음 필요시 ~/.animate-skills/bin/python -m playwright install chromium. Windows에서는 python3 대신 py를 사용하세요. 여기서 브라우저를 사용할 수 없는 경우(예: Claude 앱 샌드박스)는 이 파일의 마지막 부분을 참조하세요.

1. 패턴 선택

패턴	설명	적합한 예	필드
spread	하나의 점이 2-4개의 다른 점에 닿고, 각각이 더 많은 점에 닿으며 고리별로 확산	바이럴 아이디어, 입소문, 연쇄 반응, 추천, 배가되는 것	branches (2-4, 기본 3), depth (2-5, 기본 4), sequence (각 고리가 켜질 때 제목 아래 줄에 표시되는 선택적 짧은 레이블, 예: ["1","3","9","27","81"] 또는 ["$1k","$2k","$4k"], 각각 몇 글자)
flow	순서대로 번호가 매겨진 도형들, 각 도형에서 다음 도형으로 이동하는 점, 이어서 일정한 흐름	작동 방식, 프로세스, 파이프라인, 레시피	steps: 2-6개의 짧은 레이블; shapes (도형은 장식: ["circle"]은 모두 원)
cycle	루프 위의 단계들과 계속 공전하는 점	물의 순환, 습관 루프, 피드백 루프, 계절, 수면 주기	steps: 3-6개의 짧은 레이블; center: 중앙에 표시할 단어
converge	여러 점이 하나의 원으로 흘러들어가며 원이 커짐 (또는 "direction": "out": 하나의 원에서 여러 곳으로 점을 보냄)	주의, 시간, 돈이 가는 곳; 여러 입력이 하나의 결과로	sources: 2-6개의 레이블 (선택 사항); weights: 각각이 받는 점의 수; center: 원 안의 단어; count: 점의 개수 (기본 약 40)
compare	두세 가지 양을 나란히 점(단위당 하나)이나 양에 비례한 원으로 표시	"X 대 Y" 양: 설탕, 비용, 시간, 칼로리	groups: [{"label": "...", "value": n, "unit": "..."}]; highlight: 색칠할 대상의 인덱스

어느 패턴도 잘 맞지 않으면 가장 가까운 것을 선택하고 한 줄로 설명하세요. 오해를 불러일으키는 그림을 강요하지 마세요. 패턴은 아이디어의 형태를 보여줍니다. takeaway 줄은 요점을 말로 설명합니다. 두 힘의 균형에 대한 아이디어(수요와 공급, 워라밸)는 자체 패턴이 없습니다: 이를 해결하는 루프를 cycle로 보여주거나, 그렇다고 말하세요.

2. 사양 작성

minimal-<주제>.json 파일을 저장합니다:

{
  "title": "아이디어가 바이럴되는 방법",
  "pattern": "spread",
  "branches": 3,
  "depth": 4,
  "takeaway": "각 사람이 세 명에게 더 알림",
  "theme": "coral"
}

공통 필드: title (짧은 제목이나 질문 형태의 아이디어, 최대 약 40자), subtitle (제목 아래 선택적 작은 줄), takeaway (한 줄 요점; 애니메이션이 끝날 때 제목 아래에 나타나며, 긴 내용은 크기가 줄어듦), theme (coral 기본, ink 검정, paper 오프화이트, blue, mint), size ("1080x1920" 기본, "1080x1080", "1920x1080"), duration (초; 기본 5-6, takeaway가 있으면 더 길어짐; 더 긴 값은 끝 화면만 더 오래 유지), speed (0.7 = 30% 느리게, 1.3 = 빠르게), fps (기본 30).

작성 규칙:

• 레이블은 아주 짧게: 각각 최대 4단어 (시퀀스 레이블: 몇 글자). 전문 용어 없음.
• 숫자는 정확해야 합니다. 확실하지 않은 수치가 필요한 아이디어라면 생략하거나 예시임을 명시하세요.
• 비디오 하나당 하나의 아이디어. 사용자의 아이디어가 두 부분으로 나뉘면 두 개의 비디오(두 개의 사양)를 만드세요.

examples/ 디렉토리의 예시: idea-goes-viral.json, bill-becomes-law.json (flow), water-cycle.json (cycle), where-attention-goes.json (converge), soda-vs-apple.json (compare).

3. 두 프레임 확인

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<주제>.json --still 2 --out minimal-<주제>-check1.png
python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<주제>.json --still end --out minimal-<주제>-check2.png

--still은 초 단위 또는 end를 받습니다. 확인하세요: 레이블이 읽을 수 있고 잘리지 않았으며, 그림이 아이디어를 잘 나타내나요? 그렇지 않으면 조정하고 다시 확인하세요.

4. 비디오 렌더링

python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<주제>.json --out minimal-<주제>.mp4

약 10-25초 소요됩니다. 확인용 이미지는 삭제하세요.

5. 전달

사용자에게 MP4 파일 경로를 알려주세요 (환경에서 파일을 표시할 수 있으면 보여주세요). 소리가 없으며, 음악이나 내레이션을 추가할 준비가 되어 있습니다. 하나의 변형(다른 패턴이나 테마)을 제안하세요.

여기서 브라우저를 사용할 수 없나요? (예: Claude 앱 샌드박스)

설치 확인에서 브라우저를 실행할 수 없는 경우, 대신 애니메이션을 페이지로 작성하세요: python3 "${CLAUDE_SKILL_DIR}/scripts/render.py" minimal-<주제>.json --html minimal-<주제>.html. 이 페이지는 모든 브라우저에서 재생됩니다 (가능하면 artifact로 보여주세요). MP4 파일이 필요하면 Claude Code를 컴퓨터에서 실행하거나 페이지를 화면 녹화해야 한다고 사용자에게 알려주세요.