Remotion 베스트 프랙티스

무엇을 해주나

Remotion(React 기반 영상 제작 프레임워크) 코드를 다룰 때 Claude가 참고할 도메인 지식을 28개 주제 문서로 정리해 둔 스킬입니다. 본문은 목차 역할을 하고, 실제 설명과 코드 예시는 rules/ 폴더의 개별 파일에 담겨 있습니다.

• 애니메이션 기초, interpolate/spring 타이밍 곡선, 트랜지션, 트리밍, 시퀀싱 패턴
• 이미지·비디오·오디오·폰트·GIF·Lottie 임베딩 규칙
• 자막 처리(SRT 임포트, 음성 전사, TikTok 스타일 단어 하이라이트)
• Mediabunny를 활용한 영상 길이·해상도 확인, 프레임 추출, 디코딩 가능 여부 검사
• calculateMetadata로 컴포지션 길이·크기·props 동적 설정, TailwindCSS, 텍스트/DOM 측정, 차트, Three.js 3D

이런 분께 추천

• Remotion으로 광고·SNS 숏폼·리포트 영상을 자동 생성하는 React 개발자
• Claude Code가 Remotion API를 헷갈려 잘못된 컴포넌트를 쓰는 문제를 줄이고 싶은 분
• 자막·오디오 처리 등 반복 작업의 표준 패턴을 팀 내에 통일하고 싶은 분

활용 예시

1. "오디오에 맞춰 TikTok 스타일 자막을 붙여줘" → transcribe-captions.md, display-captions.md 규칙을 읽고 단어 단위 하이라이트 코드를 생성.
2. "업로드된 mp4 길이에 맞춰 컴포지션 durationInFrames를 자동 계산해줘" → get-video-duration.md + calculate-metadata.md 패턴 적용.
3. "장면 전환을 스프링 이징으로 부드럽게 바꿔줘" → timing.md, transitions.md를 참고해 트랜지션 컴포넌트 수정.

이 파일의 지시를 읽고 그대로 따라서 나를 도와줘:
https://raw.githubusercontent.com/Karanjot786/agent-skills-cli/HEAD/.agent/skills/remotion-best-practices/SKILL.md

내가 원하는 것: (여기에 하고 싶은 일을 쓰세요)

클로드스킬마트에서 찾은 스킬을 설치해줘.
GitHub 저장소 Karanjot786/agent-skills-cli 의 .agent/skills/remotion-best-practices 폴더를 내 ~/.claude/skills/remotion-best-practices/ 에 그대로 복사해줘.
설치가 끝나면 이 스킬로 무엇을 할 수 있는지 한 줄로 알려줘.