tellmotion

TellMotion — 아이디어 → 테마 → 애니메이션

하나의 반복 가능한 흐름으로, 토큰 소모가 적습니다. 다이어그램, 프로세스, 아키텍처, 알고리즘, 타임라인, 개념 등 2D로 표현할 수 있는 모든 주제에 적합합니다. (3D 또는 실사 동영상에는 적합하지 않습니다.)

이 스킬의 구성: themes/ (theme.json 카탈로그) · tools/ (Node, 의존성 없음) · assets/base (Motion Canvas 템플릿, 장면 레시피 포함) · assets/packs/ (선택적 컴포넌트 팩) · scripts/new-project.sh · references/.

1. 브리핑 (한 라운드, 누락된 것만 질문)

사용자가 이미 내용/구조를 제공했다면 다시 질문하지 마십시오. 누락된 항목에 대해서만 AskUserQuestion (최대 4개 질문)을 사용하십시오:

1. 주제와 내용 (없을 경우: 가상의 주제를 제안하고 그렇게 말하십시오).
2. 길이 / 속도 (기본값: 차분한 속도, 장면당 20-60초) 및 fps (기본값 30 미리보기 / 60 렌더링).
3. 디자인 — 항상 다음 세 가지 옵션을 제공하십시오:
   • 템플릿: 카탈로그에서 테마 사용. node tools/list-themes.mjs (간결한 목록) 실행하고 id를 요청하십시오; 시각적으로 탐색하려면 node tools/build-catalog.mjs <tmpdir> 실행하고 gallery.html을 여십시오 (node tools/serve.mjs <tmpdir>로 서빙).
   • 맞춤 디자인: 3가지 대조되는 theme.json 제안 작성 (references/theme-format.md 참조), 미리보기 렌더링 후 사용자가 선택하도록 하십시오 (2단계).
   • 직접 가져오기: 사용자가 브랜드 색상/폰트 또는 Figma 파일을 제공 → theme.json을 도출.
4. 팩: 주제에서 유추하고, 불명확하지 않으면 묻지 말며, 사용자 정의 장면에서 사용할 것만 추가: cloud (아키텍처), algorithms (정렬, 트리), charts (데이터), flowchart (프로세스), timeline (역사/로드맵), code (프로그래밍, CLI), typography (인트로, 인용, A vs B), science (사이클, 레이어, 파동), math (방정식, 함수), ui (제품 데모, 사용자 흐름), maps (장소, 여정). 자유롭게 결합 가능; references/packs.md에 모든 컴포넌트가 나열되어 있습니다.

2. 맞춤 디자인 (템플릿이 선택된 경우 건너뜁니다)

1. 임시 폴더에 3개의 제안을 theme.json 파일로 작성하십시오 (가장 가까운 카탈로그 테마를 복사하고 토큰을 변경; 예: 기술적 / 유쾌한 / 에디토리얼 등 다른 패밀리 사용).
2. 각 파일에 대해 node tools/validate.mjs <file> 실행 후 node tools/build-catalog.mjs <out> --themes <folder> 실행.
3. 미리보기 표시: 브라우저 창(serve.mjs)에서 <out>/gallery.html을 열거나 SVG를 보내십시오. 사용자의 선택을 기다리십시오.
4. (선택 사항) Figma를 통한 고해상도 경로 (사용자가 원하고 Figma 커넥터가 있는 경우에만): references/figma.md.
5. 선택한 테마를 <project>/theme.custom.json으로 저장하십시오 (카탈로그에 기여할 것을 제안하십시오).

3. 스토리보드 (애니메이션 제작 전 사용자 승인 필요)

애니메이션을 다시 쓰는 것은 비용이 많이 들지만, 장면 목록을 다시 쓰는 것은 그렇지 않습니다. 단일 장면이거나 사용자가 요청한 경우에만 이 단계를 건너뛰십시오.

1. references/storyboard.md와 references/recipes.md를 읽은 후 storyboard.json을 작성하십시오: 장면별로 하나의 항목, 레시피(또는 custom), 표시할 내용, 초, 실제 텍스트.
2. node tools/storyboard.mjs validate <file> 실행 후 node tools/storyboard.mjs preview <file> --theme <id|file> --out <tmpdir> 실행. 브라우저 창(serve.mjs)으로 페이지를 표시하고 채팅에도 장면을 나열하십시오.
3. 사용자의 승인을 기다리십시오. 사용자가 동의할 때까지 코드가 아닌 스토리보드를 변경하십시오. 그 후 미리보기 서버를 중지하십시오.

승인 후에는 전달까지 자율적으로 작업하십시오.

4. 프로젝트

bash <skill>/scripts/new-project.sh <name> --theme <id|path.json> [--pack a,b|all] [--demos]

(--demos는 각 팩의 데모 장면을 복사합니다: API 학습에 유용하며, 그 후 데모를 삭제하십시오.) 프로젝트를 포함할 폴더에서 실행하십시오. 주제당 하나의 프로젝트; 새 비디오를 위해 장면을 추가하십시오. 템플릿을 복사하고, 테마를 적용하고(src/theme.ts, src/fonts.ts), 의존성을 설치하고 .claude/launch.json에 프로젝트를 등록합니다. 테마 변경: node <skill>/tools/apply-theme.mjs <theme> <project> 실행 후 npm install.

5. 장면

node tools/storyboard.mjs generate <file> <project>는 모든 장면과 src/project.ts를 작성합니다. 레시피 장면은 완성됩니다. 각 custom 장면은 제목, 캡션, 길이가 포함된 실행 가능한 플레이스홀더입니다: 애니메이션을 작성하고 유지하십시오. 이를 위해 references/motion-guide.md (핵심 API, 레이아웃 레시피, 함정)와 references/packs.md (팩 컴포넌트)를 읽으십시오. 다시 generate를 실행하면 사용자가 편집한 장면은 유지됩니다. 고정 규칙:

• src/scenes/에 블록당 하나의 장면, src/project.ts에 등록 (+ 장면당 .meta 파일 하나).
• prepareScene(view, title) 사용; enter()를 먼저 호출하고 leave()를 마지막에 호출; 캡션은 sub.say(text)를 통해.
• 텍스트는 1920x1080에서 28px 이상; 캡션은 85자 이하; 요소 유형당 하나의 카테고리 색상 + src/config.ts (LEGEND)에 범례.
• 장면당 필요한 것만 표시; 활성 요소는 glow()로 강조하고 나머지는 dim() 처리.
• 편집 가능한 텍스트, 타이밍 및 색상은 각 장면 상단에 상수로 (EDITABLE TEXT 주석); 전역 속도는 PACE.
• connect(root, a, b)로 조각 연결. 요청 및 이벤트는 send(root, arrow.points, {shape: 'dot' | 'diamond', to: piece})로 전송하여 모양으로 구분하고 조각이 도착 시 반응.
• 장면에 색상이나 폰트를 하드코딩하지 마십시오: config.ts의 C, S, FONT, fs()를 사용하여 테마를 교체 가능하게 유지.

6. 검증 (저렴)

1. 프로젝트에서 npm run typecheck 실행 후 node tools/storyboard.mjs duration <project> 실행: 장면이 승인된 계획과 크게 다르면 수정하거나 사용자에게 알리십시오.
2. preview_start (.claude/launch.json의 프로젝트 이름), resize_window 1700x950, 타임라인 클릭 후 zoom을 [215,0,800,330]으로 실행; 여러 클릭+줌을 하나의 browser_batch로 일괄 처리하십시오. 타임라인에서 scroll right를 실행하여 이후 장면에 도달하십시오.
3. 완료 시: resize_window 프리셋 desktop, preview_stop. 요청하지 않으면 mp4를 렌더링하지 마십시오.

7. 렌더링 (요청 시)

프로젝트에서 npm run render를 실행하면 output/<name>/<name>.mp4와 render.json (장면별 지속 시간, 파일 크기)이 에디터를 열지 않고 작성됩니다. 옵션 (npm run render -- 뒤):

• --format mp4,webm,gif · --thumb 또는 --thumb-at <seconds> · --fps <n> · --scale <n>. WebM 인코딩은 느립니다 (분 단위): 필요한 경우에만 요청하십시오.
• --aspect 9:16,1:1: 테마 배경에 막대와 함께 비디오를 맞춤 (--pad-color로 재정의 가능); 장면을 재배치하지 않으므로 텍스트는 약 56%로 축소됩니다. 사용자에게 그렇게 말하십시오.
• --draft: 절반 크기에 30fps, output/<name>-draft/에 저장. 검토용으로 사용하십시오.
• --info: 각 장면의 지속 시간, 렌더링 없음. 속도 확인을 위해 렌더링보다 저렴하므로 선호하십시오.
• --dry-run: 렌더링된 샘플에서 파일당 크기 범위, 저장하지 않음. 대규모 렌더링 전이나 사용자가 크기를 걱정할 때 사용하십시오.

Chrome, Edge 또는 Chromium이 필요합니다 (CHROME으로 경로 재정의 가능). 이 스크립트 이전에 생성된 프로젝트: node <skill>/tools/render.mjs <project>. 소스는 tools/render.mjs입니다.

8. 전달

장면 나열 (이름 → 표시 내용), 실행 방법 (npm start), 렌더링 방법 (npm run render), 속도 변경 방법 (PACE), 텍스트 (장면별 상수), 테마 (apply-theme.mjs). 검증되지 않은 사항을 명시하십시오. 작업 공간에 CLAUDE.md가 있으면 새 프로젝트를 추가하십시오.

토큰 절약

• 방금 작성한 파일을 다시 읽지 말고 Edit을 사용하십시오.
• 테마 JSON 파일을 읽는 대신 list-themes.mjs를 사용하십시오; 사용자 정의 시에만 단일 테마를 읽으십시오.
• 스크린샷/줌을 일괄 처리하고 전체 페이지 캡처는 피하십시오.
• 컴포넌트를 재생성하는 대신 assets/를 재사용하십시오.