jsxreel은(는) 무엇을 하나요?
개요
비디오는 Remotion에서 애니메이션된 React 장면으로 구성되며, ElevenLabs로 음성 해설이 더빙되고, 모든 비트가 음성 단어에 맞춰집니다. 앱 및 공급업체 UI는 항상 재구축되며, 스크린샷, 화면 녹화 또는 스토리보드 슬라이드쇼로 표시되지 않습니다. 콘텐츠 그 자체인 이미지(서명, 로고, 제품 사진)는 이미지로 나타날 수 있습니다. 각 제품은 자체 비디오 프로젝트와 자체 디자인을 유지합니다. 이 스킬은 이 스킬의 베이스 디렉터리(스킬이 로드될 때 표시됨)에 있는 scripts/ 디렉터리의 프로세스와 도구를 담고 있습니다.
프로젝트
먼저 ~/.claude/jsxreel/projects.md가 존재하면 읽습니다(사용자의 개인 목록으로, 업데이트 시 영향을 받지 않도록 스킬 외부에 보관: 폴더, 읽을 메모, 음성 명령, 규칙). 그런 다음 해당 프로젝트의 자체 메모를 읽습니다. 목록에 없는 프로젝트: 사용자에게 위치를 묻고, 해당 파일에 행을 추가합니다.
새 프로젝트: 제품의 리포지토리 내에 Remotion 프로젝트를 생성하고, 이 스킬에서 scripts/tts.mjs와 scripts/stills.mjs를 복사합니다(stills.mjs는 qa/에 위치). 다른 제품의 비주얼을 절대 사용하지 않습니다.
워크플로우
- 종류: 앱 가이드, 스토리보드 발표 또는 프로모션 스킷.
kinds.md의 해당 섹션을 읽습니다. - 질문: AskUserQuestion을 사용하여 질문합니다(권장 최대 4개): 형식, 목표 길이, 종료 방식, 그리고 자료와 프로젝트 메모가 답할 수 없는 내용만 질문합니다.
- 자료 작성 전 확인: 스토리보드 사본(잘못된 기술적 주장, 대시, 음성으로 읽기에 너무 긴 텍스트); 모든 화면 내 지침(메뉴 경로, 레이블)을 공급업체의 최신 문서 또는 앱 코드와 대조; 제공된 자산 내 개인 데이터. 사용자가 제공한 것을 사용하고, 문제를 표시한 후 질문합니다. 절대 조용히 대체하지 않습니다. 비밀(실시간 QR 코드, 토큰, 비밀번호)은 절대 화면에 표시되지 않으며, 더미를 그립니다.
- 스크립트
scripts/<video>.json: 장면당 한 줄,marks는 모든 비트(정확한 대소문자 구분 구문, 해당 줄에서 고유해야 함),say는 음성 형태(숫자, URL). 초당 약 2.6단어에 장면당 0.5초를 예산으로 잡습니다. 전체 스크립트를 표로 표시하고, 승인 후에만 크레딧을 사용합니다. - 음성: 음성당 한 번의 테이크, 정렬로 잘라냄(
node scripts/tts.mjs <video>; 한 명의 나레이터). 클립을 전사(ElevenLabs 음성-텍스트 변환,POST /v1/speech-to-text, 모델scribe_v1또는 프로젝트 자체 도구)하여 각 클립이 자신의 단어를 정확히 포함하는지 확인합니다(한 테이크에 몇 센트 비용). 그런 다음 타이트닝:python3 -I <skill dir>/scripts/tighten.py "$PWD" <video> <prefix>(원본은.voice-orig/에 보관,--help참조). 스킷은 그 대신 코믹한 멈춤을 유지합니다. 클라우드 세션에서는 ElevenLabs 키가 네트워크 시크릿(ELEVENLABS_API_KEY=proxy, README의 브라우저 섹션 참조)을 통해 제공되며, 사용자에게 채팅에 키를 붙여넣도록 요청하지 않습니다. - 빌드:
data.ts,timeline.ts, 장면, CSS는 새로운 클래스 접두사로 별도 파일에 작성. 장면 길이 = max(MIN, LEAD + clip + TAIL), LEAD 약 0.15, TAIL 약 0.2; MIN은 장면의 마지막 이벤트 + 0.6초를 포함합니다. 클릭 데모의 경우 첫 클릭 전에 UI가 보이도록 더 긴 LEAD를 사용합니다.Root.tsx에 등록하고,voice:/render:스크립트를 추가하며, 프로젝트 메모(README 또는 계획)에 비디오를 기록합니다. - QA(아래 참조), 그런 다음 보고: 절대 mp4 경로, 목표 대비 길이, 확인이 필요한 가정(샘플 데이터, 재구성된 UI 레이블, 승인된 변경 사항, 변경 전후), 청취로 확인할 사항. 요청 시에만 커밋합니다.
QA
npx tsc --noEmit;node qa/stills.mjs <Comp> <frames…>(편집 후 첫 호출에서 충돌 시 재실행).- 모든 탭 또는 클릭을 해당 프레임에서, 하나의 콘택트 시트에 겹쳐서 표시: 손가락 또는 커서가 대상 위에 있어야 함.
- 각 전환에 걸쳐 4~5프레임을 샘플링.
- ffprobe로 길이 확인; 프로젝트별 음량(가이드: 평균 약 -21 dB; 소셜: 약 -14 LUFS, 최대 피크 -0.8 dB 이하); 의도적인 코믹 비트가 아닌 약 1.3초 이상의 공백 감지(silencedetect).
- 공유 파일을 변경한 경우: 이전 비디오의 프레임을 렌더링하고, PSNR이
inf여야 함. - QA PNG 파일 삭제.
일반적인 실수
| 실수 | 수정 방법 |
|---|---|
| ElevenLabs의 자연스러운 템포 | 사용자들이 느리다고 느낌. 첫 렌더링 전에 타이트닝 수행. |
| UI 레이블 확인 전 녹음 | 먼저 공급업체 문서 또는 앱 코드를 확인할 것. 재녹음은 크레딧 소모. |
| 라인당 하나의 TTS 요청 | 라인 간 음성이 변경됨. 음성당 한 번의 테이크. |
| 하드코딩된 비트 시간 | marks 사용. 새 테이크가 모든 것을 재조정함. |
| 정렬을 맹목적으로 신뢰 | eleven_v3의 대화는 약 0.75초 드리프트 발생. 클립을 전사할 것. |
| 다른 프로젝트의 디자인 사용 | 각 제품의 고유한 키트 사용; 스토리보드는 자체 디자인 유지. |
호출자 style을 transform 설정 래퍼에 전파 | 호출자의 transform이 우선하여 scale이 사라짐. 호출자 스타일을 외부 div에 배치. |
zsh: $LIST가 단어 분할 안 됨, ====는 오류 | 인라인 리스트 사용; ffmpeg 필터는 Python에서 빌드. |
| 포트 3000 사용 중 | 사용 가능한 --port 사용. |
| 머신에 Chrome 없음 | Chromium 계열 브라우저(Chromium, Edge, Brave via --browser-executable) 사용 가능; 없으면 플래그를 제거하고 Remotion이 자체 헤드리스 Chrome을 다운로드함. stills.mjs가 자동 선택. Firefox와 Safari는 렌더링 불가. |
| 보고서에 URL 직접 입력 | 로컬 경로만 사용. |