nyosegawa/skills

Remotion 프로모션 비디오 팩토리

이 스킬을 사용하여 반복 가능하고 고품질의 앱 소개 영상을 Remotion으로 제작하세요. 이 스킬은 의도적으로 앱에 종속되지 않으며 UI 위주 제품 및 비UI 제품 모두에서 작동합니다.

핵심 규칙

1. 공식 Remotion 스킬 룰을 최우선 권위로 사용합니다.
2. 모든 모션은 useCurrentFrame()과 interpolate(), spring()을 통해 구동합니다.
3. 시간을 초 단위로 설계한 후 sec()으로 변환합니다.
4. 먼저 앱 유형 청사진을 선택하며, UI 전용 데모를 기본값으로 사용하지 않습니다.
5. 일회성 녹화 영상보다 재사용 가능한 시각적 기본 요소를 선호합니다.
6. 애니메이션 다듬기 전에 타이포그래피 크기 규칙을 적용합니다.
7. 모든 주요 편집을 프레임 캡처로 검증한 후 타입체크와 렌더링을 실행합니다.
8. 프레임별 증거 없이 품질 성공을 주장하지 않습니다.
9. 명시적 사용자 승인 없이 커밋, 푸시 또는 작업 완료 처리를 하지 않습니다.

공식 스킬 연동

항상 먼저 references/official-skill-integration.md를 읽으세요.

단계별 필수 공식 룰 그룹:

1. 컴포지션 단계: compositions, parameters, calculate-metadata
2. 모션 단계: animations, timing, sequencing, transitions
3. 에셋 단계: assets, images, fonts
4. 선택 단계: audio, videos, subtitles, text-animations

참조

• 앱 유형 선택 및 장면 템플릿: references/app-type-blueprints.md
• 공식 Remotion 룰 매핑: references/official-skill-integration.md
• 타임라인 및 모션 패턴: references/timeline-and-motion.md
• 타이밍 예산 및 디버그 루프: references/timing-and-debug-loop.md
• 타이포그래피 및 가독성 규칙: references/typography-and-readability.md
• 재사용 가능한 시각적 구성 요소: references/visual-primitives.md
• QA 체크리스트: references/qa-checklist.md
• 문제 해결 가이드: references/troubleshooting.md

워크플로우

1단계: 입력 수집

로컬 프로젝트 컨텍스트(README, 문서, 랜딩 페이지, 기존 UI, CLI/API 예제)에서 다음을 수집합니다:

1. 대상 사용자
2. 한 문장으로 된 핵심 약속
3. 사용 가능한 증명 에셋(UI, 코드, 로그, 메트릭, 사용 후기)
4. 사용 가능한 미디어 에셋(로고, 스크린샷, 클립, 오디오)

2단계: 앱 유형 청사진 선택

references/app-type-blueprints.md를 읽고 다음 중 하나를 선택합니다:

1. UI 중심 앱
2. API/SDK 앱
3. 개발자 도구 / 인프라 앱
4. AI/자동화 앱

선택한 청사진을 기반으로 장면 목록을 생성합니다.

3단계: 내러티브 및 시간

1. 스토리 아크 정의: 후크 → 문제 → 메커니즘 → 증명 → CTA
2. 목표 길이 선택: 15초, 30초, 45초 또는 60초
3. 구현 전에 장면 시간 할당

4단계: 컴포지션 설정

1. src/Root.tsx에서 Composition 정의
2. schema와 defaultProps 추가
3. calculateMetadata에서 시간 계산
4. TransitionSeries를 사용하여 src/Video.tsx에서 장면 연결

5단계: 장면 구성

1. 먼저 src/components에 재사용 가능한 컴포넌트 구축
2. 해당 컴포넌트를 사용하여 src/scenes에 장면 조립
3. 레이아웃과 타이밍을 위해 상수와 함께 절대 위치 지정 사용
4. 장면 파일은 낮은 수준의 UI 세부 사항이 아닌 오케스트레이션에 집중

6단계: 타이포그래피 패스

references/typography-and-readability.md를 읽고 먼저 모든 주요 텍스트 크기를 설정합니다.

1. 1920x1080에 권장되는 크기 범위 적용
2. 명시적으로 정당화되지 않는 한 하드 최소값 준수
3. 애니메이션 다듬기 전에 모바일/iOS 가독성 확인

7단계: 모션 패스

1. 가독성을 위해 사다리꼴 페이드 사용
2. 입장 및 커서와 같은 움직임을 위해 스프링 사용
3. 전환 중 겹침 아티팩트를 피하기 위해 장면별 exitOpacity 추가
4. 단계 변경을 명확하게 하기 위해 오버레이/캡션 사용

8단계: 타이밍 정합성 패스

references/timing-and-debug-loop.md를 읽고 타이밍 예산을 검증합니다:

1. 텍스트 체류 시간 및 읽기 시간 확인
2. 처리 및 결과 유지 시간 확인
3. 전환 겹침 및 핸드오프 타이밍 확인
4. 다듬기 작업 전에 타임라인 상수 수정

9단계: QA 루프 (증거 필요)

1. 각 주요 변경 후 키 프레임 캡처
2. 시각적 명확성, 타이밍, 겹침 및 구성 균형 검토
3. 디버그 로그에 통과/실패 증거 기록
4. 모든 중요 체크포인트가 통과할 때까지 반복

필요시 scripts/capture-frames.sh를 사용합니다.

이미지 읽기 도구가 실패하거나 유용한 내용을 반환하지 않으면 다시 캡처하고 재시도합니다. 검증 불가능한 검사로 진행하지 마십시오.

10단계: 최종 검증

1. npx tsc --noEmit
2. npm run -s build
3. 가능한 경우 npm run -s build:gif
4. 최종 mp4를 렌더링하고 런타임과 출력 크기 확인
5. 의도된 장면 동작과 주요 타임스탬프 재확인

필요시 scripts/verify-build.sh를 사용합니다.

11단계: 핸드오프 및 승인

1. 증거 기반 QA 요약 보고 (통과/실패 및 이유)
2. 알려진 절충 사항 또는 잔여 위험 목록 작성
3. 커밋/푸시/작업 완료 전 명시적 승인 요청

출력 형식

작업을 보고할 때 다음을 포함합니다:

1. 선택한 앱 유형 및 청사진
2. 장면 구조 및 최종 시간
3. 구현된 주요 컴포넌트
4. 주요 애니메이션 결정
5. 타이밍 예산 확인 및 결과
6. 검증 명령어 및 결과
7. 잔여 위험 또는 후속 조치

가드레일

1. 로컬 이미지에는 Img + staticFile()을 사용합니다.
2. 폰트는 모듈 스코프에서 로드하고, 효과 내부에서 로드하지 마십시오.
3. Sequence 레이아웃과 premount 설정이 호환되도록 유지합니다.
4. references/typography-and-readability.md의 타이포그래피 하드 최소값을 사용합니다.
5. 복잡한 효과는 한 초점 영역에 집중합니다.
6. 한 컷에서 너무 많은 목표를 최적화하지 말고, 단일 주요 메시지를 유지합니다.
7. 명시적 증거 없이 출력을 "완벽하다"고 설명하지 마십시오.
8. 렌더링 명령이 성공하더라도 QA 증거를 건너뛰지 마십시오.