KishoreCR728/project-video

프로젝트-비디오 변환

모든 프로젝트를 프리미엄 마케팅 비디오로 변환합니다. 이 스킬은 프로젝트의 리포지토리 내부(또는 URL에 대해)에서 작동하며, 제품이 실제로 무엇인지 분석하고 실제 기능과 실제 UI를 기반으로 한 Remotion 비디오를 제작합니다.

핵심 규칙: 파이프라인은 분석 → 스토리보드 → 승인 → 제작 → 렌더링 순서입니다. 사용자가 스토리보드를 승인하기 전에는 절대 Remotion 코드를 작성하지 마십시오.

자동 모드: 사용자의 요청에 "full auto", "no interruptions", "one go", "autopilot" 또는 명백히 중단 없는 종단 간 실행을 요청하는 내용이 포함된 경우 자동 모드로 전환합니다. 스토리보드 승인 일시 중지를 건너뛰고(video/storyboard.md 작성 후 자동 모드로 진행 중임을 명시하고 바로 제작을 진행), 표준 우선순위에 따라 설명자 유형, 1080×1920 @ 30fps, 브랜드 토큰 등 합리적인 기본값을 사용하여 미해결 질문을 자동으로 결정합니다. 진정한 차단 문제(사이트에 연결할 수 없음, 3번의 수정 시도 후에도 해결되지 않는 렌더링 오류)에서만 중단합니다. 로컬 개발 서버를 부팅하려면 여전히 명시적인 사용자 승인이 필요하지만, 사용자가 실행 명령을 제공했거나 리포지토리에 명확한 표준 개발 명령(npm run dev, docker compose up)이 있는 경우 "full auto" 자체를 승인으로 간주합니다. 자동 모드에서도 스토리보드를 MP4와 함께 제공하여 사용자가 사후에 검토하고 장면 수준 변경을 요청할 수 있도록 합니다.

0단계 — 입력 감지

우선 순위에 따라 작업할 수 있는 항목을 확인합니다:

1. 라이브 URL (프로덕션 또는 UAT/스테이징) — 최고의 소스입니다. 제공되지 않은 경우 사용자에게 요청하십시오.
2. 로컬 개발 서버 — 리포지토리는 있지만 실행 중인 것이 없으면 부팅을 제안합니다. package.json / docker-compose.yml / Makefile / README를 읽어 개발 명령을 찾습니다. 시작하기 전에 사용자에게 확인을 요청하십시오(환경 변수, 포트 및 데이터베이스는 다양함). 부팅할 수 없으면 코드 전용 분석으로 대체합니다.
3. 코드 전용 — 리포지토리를 정적으로 분석합니다. 비주얼은 순수 SVG 재현입니다.

또한 (추론하거나 문맥에서) 질문:

• 어떤 아키타입인가? (설명자 / 데모 / 출시 / 티저 — references/video-archetypes.md 참조)
• 어떤 화면 비율인가? 기본값: 1080×1920 세로, 30fps. 추가 렌더링으로 16:9 및 1:1을 제공합니다.
• 브랜드 토큰이 있는가? 리포지토리에서 디자인 토큰 JSON을 확인하고, 없으면 라이브 사이트에서 색상/글꼴을 추출하고, 없으면 assets/brand-theme.json 기본값을 사용합니다.

1단계 — 프로젝트 분석

목표: video/project-brief.md 파일. 이후의 모든 주장은 이 파일로 추적 가능해야 합니다.

정적 분석 — README, docs/, 리포지토리의 랜딩 페이지 복사본, 경로/페이지 구조, 기능 모듈, 제품 이름 및 태그라인을 읽습니다.

라이브 분석 (URL이 있는 경우) — Playwright로 scripts/capture-screens.mjs를 실행하여:

• 주요 페이지(홈/히어로, 대시보드, 3~5개 핵심 기능 화면)를 대상 화면 비율 및 데스크톱 크기로 스크린샷합니다.
• 아키타입이 데모 또는 출시인 경우 12개의 핵심 흐름에 대한 짧은(36초) 화면 캡처를 녹화합니다.
• 사이트의 실제 색상, 글꼴 및 헤드라인 복사본을 추출합니다.

video/project-brief.md 작성 내용: 제품의 정의, 대상 사용자, 상위 5~7개 기능(각각 증거 소스 포함), 시각적 정체성(색상/글꼴/로고), 캡처된 자산 목록(파일 경로 포함).

규칙: 허위 기능이나 과장된 주장은 금지됩니다. 리포지토리, 문서 또는 라이브 사이트에 없는 것은 비디오에 포함되지 않습니다.

2단계 — 스토리보드 (필수 승인 게이트)

선택한 아키타입에 대한 장면 구조와 지속 시간을 위해 references/video-archetypes.md를 읽은 다음, references/storyboard-template.md를 채워 프로젝트 브리프의 자료만 사용하여 장면별로 작성합니다.

• 내레이션은 음성 해설이 아닌 화면 텍스트입니다. 화면 라인은 짧게 유지하고(라인당 최대 ~8단어, 한 번에 최대 2줄), 각 라인이 읽을 수 있도록 속도를 조절합니다(화면에 표시되는 최소 시간당 ~0.35초).
• 각 장면에 필요한 프레임을 미리 할당하여 총 프레임 수가 아키타입 지속 시간과 정확히 일치하도록 합니다.
• 각 장면에 대해 어떤 비주얼이 SVG이고 어떤 비주얼이 장치 프레임 내의 실제 UI 캡처인지 표시합니다(하이브리드 스타일 — 표준 문서 참조).
• 마지막에 음악 및 사운드 제안 섹션을 포함합니다(장르, BPM 느낌, 악센트 위치). 오디오 파일을 소싱하거나 임베드하지 마십시오.

video/storyboard.md로 저장하고 사용자에게 제시한 후 중지하십시오. 사용자가 승인하거나 편집할 때까지 진행하지 마십시오. (예외: 자동 모드에서는 스토리보드 요약을 제시하고 즉시 계속 진행합니다.)

3단계 — Remotion 프로젝트 제작

승인 후 references/remotion-standards.md를 전체적으로 읽습니다. 여기에는 필요한 애니메이션 값, 전환 규칙 및 하이브리드 SVG + 스크린샷 장치-프레임 패턴이 포함되어 있습니다. 그런 다음 스캐폴딩합니다:

video/
├── remotion.config.ts
├── src/
│   ├── index.ts            # registerRoot
│   ├── Root.tsx            # 화면 비율당 <Composition>
│   ├── config.ts           # fps, 지속 시간, 장면별 프레임 예산
│   ├── theme.ts            # 모든 색상/글꼴/간격 — 단일 진실 공급원
│   ├── scenes/             # 스토리보드 장면당 하나의 파일
│   ├── components/         # DeviceFrame, CountUp, AnimatedChart, ConnectorLine, ParticleField, TextReveal…
│   └── assets/screens/     # 1단계 캡처 (staticFile을 통해 가져오기)

엄격한 규칙:

• 모든 색상, 글꼴, 반경 및 그림자는 theme.ts에서 가져옵니다. 장면에 하드코딩된 값이 없어야 합니다.
• 장면 지속 시간은 config.ts에서 가져오며 아키타입 총계와 일치해야 합니다.
• 모든 다이어그램/차트/아이콘 그래픽은 인라인 SVG입니다. 실제 제품 UI는 1단계 스크린샷을 사용하여 DeviceFrame 구성 요소 내부에만 나타납니다. 실제 스크린샷이 있는데 SVG로 제품 스크린샷을 위조하지 마십시오.
• 전체 TypeScript, Remotion 4.x, 장면 전환에는 @remotion/transitions를 사용합니다.

4단계 — 미리 보기, 렌더링, 제공

1. npx remotion studio — 모든 애니메이션을 확인하고, 실제 재생 속도에서 텍스트 가독성을 확인하고, 타이밍을 확인합니다.
2. 문제를 수정한 다음 npx remotion render <CompositionId> out/<archetype>-vertical.mp4를 실행합니다.
3. 요청된 경우 추가 화면 비율을 렌더링합니다.
4. 제공: MP4 파일, storyboard.md, project-brief.md 및 편집 가능한 프로젝트. theme.ts와 config.ts가 리브랜딩 또는 리타이밍을 위해 조정해야 할 두 파일임을 언급합니다.

참조 파일

• references/video-archetypes.md — 설명자(60초), 데모(75~90초), 기능 출시(30초), 티저(15초)에 대한 장면 구조 및 지속 시간. 0/2단계에서 읽습니다.
• references/storyboard-template.md — 장면별 테이블 형식. 2단계에서 읽습니다.
• references/remotion-standards.md — 애니메이션 값, 전환, 하이브리드 장치-프레임 패턴, SVG 규칙. 3단계 전에 전체를 읽습니다.
• scripts/capture-screens.mjs — Playwright 캡처 스크립트. 1단계에서 실행합니다(node scripts/capture-screens.mjs <url> <outDir>, npm i playwright + npx playwright install chromium 필요).
• assets/brand-theme.json — 대체 브랜드 토큰; 가능한 경우 프로젝트에서 추출한 값으로 재정의합니다.