canine89 Remotion Slides Orchestrator
역할
이 스킬은 슬라이드를 직접 한 타입으로 몰아가지 않고, 어떤 슬라이드 타입 스킬을 써야 하는지 결정하는 상위 스킬이다.
사용자가 주제, 발표 구조, 원고를 주면:
markdowns/<topic>/<topic>.md를 원본으로 작성하고- 슬라이드별로 적절한 타입을 고르고
- 필요하면 프레젠터/프리뷰로 확인한다
타입별 하위 스킬
remotion-slide-titleremotion-slide-title-imageremotion-slide-title-tagsremotion-slide-title-bulletsremotion-slide-splitremotion-slide-evolution-flowremotion-slide-statremotion-slide-quoteremotion-slide-stepsremotion-slide-compare
선택 기준
- 제목 하나가 메시지의 전부이면
remotion-slide-title(표지, 섹션 구분, 마무리) - 대표 이미지 한 장이 중요하면
remotion-slide-title-image - 키워드 묶음이 중요하면
remotion-slide-title-tags - 메시지 설명 자체가 중요하면
remotion-slide-title-bullets - 이미지와 설명을 함께 보여줘야 하면
remotion-slide-split - 왼쪽 상태가 오른쪽 상태로 어떻게 바뀌는지 흐름이 중요하면
remotion-slide-evolution-flow - 숫자/KPI가 핵심이면
remotion-slide-stat - 인용구나 핵심 문장을 강조하면
remotion-slide-quote - 순서가 있는 프로세스/단계이면
remotion-slide-steps - 3개 이상 항목을 나란히 비교하면
remotion-slide-compare
공통 규칙
- 원본은 항상
markdowns/<topic>/<topic>.md - 수동으로
data.ts를 편집하지 않는다 - 주제별 이미지는 마크다운과 같은 폴더에 둔다
- 마크다운 파싱 규칙은
src/slides/parseMarkdown.ts를 기준으로 본다 - 영상 렌더는 사용자가 명시적으로 요청했을 때만 한다
- 이미지가 없는 슬라이드에는
ImagePlaceholder컴포넌트가 자동 렌더된다. 테마 배경색 밝기에 따라 색상이 자동 전환되므로 별도 처리 불필요 (src/slides/components/ImagePlaceholder.tsx)
워크플로우
- 발표 주제와 각 슬라이드 메시지를 정리한다.
- 슬라이드별로 어떤 타입 스킬이 맞는지 선택한다.
markdowns/<topic>/<topic>.md로 구조화한다.npm run slides:preview또는slides:present로 확인한다.- 필요시 문장 길이, 타입 선택, 이미지 배치를 조정한다.
실행 명령
npm run slides:present -- markdowns/<topic>/<topic>.md
npm run slides:preview -- markdowns/<topic>/<topic>.md
npm run slides:render -- markdowns/<topic>/<topic>.md slides