amir-motion은(는) 무엇을 하나요?
제품 영화를 위한 Amir의 하우스 규칙입니다. 이 영화는 30~60초 안에 기술적이지 않은 의사 결정권자에게 제품을 설명합니다: 단계별 한 문장, 제품이 직접 설명하도록 하고, 사운드는 화면에 고정되며, 모든 형식과 언어에서 깔끔한 컷을 만들고, 우리 것이 아닌 것은 아무것도 넣지 않습니다.
<skill-dir>는 이 파일이 있는 폴더입니다: Claude Code의 경우 ~/.claude/skills/amir-motion, Pi 및 기타 에이전트의 경우 ~/.agents/skills/amir-motion입니다.
"스킬 호출"이란 다음을 의미합니다: Claude Code의 Skill 도구, Pi의 /skill:<name>, 또는 <skills folder>/<name>/SKILL.md를 읽고 따르는 것입니다.
세 가지 스킬, 하나의 영화. amir-motion은 규칙, 템플릿, 사운드 및 게이트를 소유합니다. 고정된 단계에서 두 가지 스킬을 호출합니다:
| 스킬 | 담당 | 호출 시점 |
|---|---|---|
stageshow | 제품 UI의 모양: 절제, 프레이밍, 크롭, 초점 개체, 커서 스토리, 포스터 프레임 | 단계 1, 4 |
remotion-best-practices | Remotion 사용 방법: 프로젝트, 마크업, Studio, 렌더, 캡션, 업그레이드 (remotion-*로 라우팅) | 단계 2, 5, 8 |
하나가 아래 규칙과 모순될 경우 규칙이 우선합니다(예: stageshow의 시간 기반 Act API는 절대 영화에 들어가지 않음: 규칙 6).
10가지 규칙 (필수)
| # | 규칙 | 엄격한 제한 |
|---|---|---|
| 1 | 말 줄이기 | 단계당 한 문장, 최대 10단어, 의사 결정권자를 위한 평이한 단어. 한 번에 한 가지만 움직입니다. 총 30~60초. |
| 2 | 읽을 시간 | 모든 문장은 최소 1.5초 + 단어당 0.3초 이상 화면에 머물러야 하며, 초당 17자 이하, 페이싱 후 실제 초 단위입니다. 텍스트는 읽는 동안 절대 움직이지 않습니다. |
| 3 | 보여주고, 쓰지 않기 | 제품이 설명합니다. 캡션은 단계 이름만 지정합니다. 제품 UI를 React로 다시 구축합니다(절대 스크린샷 사용 금지). 통합 = 로고. 숫자 = 카운터 또는 차트, 실제 것만 사용합니다. |
| 4 | 주제에 맞는 서체 | 최대 3개 패밀리(디스플레이 세리프, UI 산스, 모노). theme.ts에서 3가지 텍스트 크기(디스플레이, 캡션, 레이블). 캡션 ≥ 48px, 스토리가 가리키는 UI 단어는 ≥ 30px이거나 카메라로 가까이 가져와야 합니다. |
| 5 | 빨간색 없음, 하나의 악센트 | 빨간색은 오류 또는 파괴적 행동에만 사용하며, 브랜드 차트에 있는 경우는 제외합니다. 하나의 악센트 색상은 의미가 있어야 합니다(결과, 변화). 색상은 theme.ts에만 있습니다. |
| 6 | 하나의 시계 | 모든 비트는 해당 장면 자체 시계의 숫자입니다. 그림, 캡션 및 사운드는 동일한 숫자를 읽습니다. 모든 것은 프레임에서 파생됩니다: CSS 애니메이션, 타이머, Math.random, Date, stageshow Act 런타임 없음. |
| 7 | 이동, 디졸브 금지 | 장면은 하나의 카메라처럼 움직입니다(올리기, 내리기, 밀어 넣기, 당기기), 회색 크로스페이드 없음. 부드러운 시작과 정지(토큰만), 종료는 진입의 약 절반, 영화당 하나의 히어로 순간. |
| 8 | 사운드는 영화의 절반 | 하나의 키로 된 독창적인 신디사이즈 스코어, 타임라인 위에 구축됨; 각 도착, 클릭 및 페이오프에 대한 큐, 유휴 움직임에는 없음. 통합 -14 LUFS, 피크 ≤ -1 dBFS. |
| 9 | 각 형식은 또 다른 컷 | 16:9 마스터 및 재구성된 9:16(크롭 아님), 하나의 카피 파일에서 프랑스어와 영어. 프레임 0은 실제 썸네일입니다. 음소거 상태에서도 읽을 수 있어야 합니다. 텍스트는 프레임의 80% 이내에 있습니다. |
| 10 | 우리 것이 아닌 것은 없음 | 코드, 카피, 파일 이름, 이미지, 메타데이터 어디에도 이전 고객, 내부 도구 또는 타사 브랜드가 없어야 합니다. 모든 자산은 ASSETS.md에 출처가 있어야 합니다. 지어낸 숫자, 로고 또는 사용후기 없음. |
전체 세부 사항 및 숫자: references/rules.md. 출처: references/source.md.
워크플로우
- 닥터.
node <skill-dir>/scripts/doctor.mjs. Node(22.18+)를 확인하고 누락된 경우 공식 소스에서stageshow및 Remotion 스킬을 설치합니다. Claude Code 및 Pi용으로 설치합니다. 다른 에이전트의 경우--agent <id>. 무언가를 설치했다면 알리십시오: 새 스킬은 다음 세션에서 로드됩니다. 그 동안 직접SKILL.md파일을 읽으십시오. - 브리핑. 사용자와 함께
BRIEF.md를 작성합니다: 목표, 청중, 약속(≤ 8단어), 형식, 길이, 브랜드 및 출처, 증거. 그런 다음 비트 시트: 단계당 한 행(캡션, 제품이 보여주는 것, 사운드). 스토리 아크 및 예시:references/brief.md. 각 제품 장면에 대해 stageshow 방식으로 계획합니다:stageshow를 호출하고 장면별로 초점 개체, 동작, 페이오프, 생략된 항목 및 가장 가까운 골드 예시(hero-demo,payout-flow,choreography,table-edit,loading…)를 작성합니다. 비트 시트를 보여주고 어떤 장면이든 승인을 받으십시오(Amir가 내용을 결정합니다). - 스캐폴딩.
remotion-best-practices를 호출하고 전체 빌드 동안 라우터를 열어 둡니다. 그런 다음:node <skill-dir>/scripts/new.mjs <folder> --name "Product" --forbid "Former Client,internal.host" --install cd <folder> && npm run score && npm run devremotion-studio)를 따르십시오. Windows에서는 짧은 경로를 사용하십시오(C:/Users/<me>/<name>-motion): headless Chrome은 260자를 초과하면 실패합니다. 템플릿 맵:references/architecture.md. - 브랜드. 제품의 팔레트, 디스플레이 폰트 및 로고를 각각의 출처와 함께
theme.ts및public/에 넣습니다. stageshow의references/looks.md방식으로 제품 자체 토큰을 매핑합니다. 브랜드 출처가 없습니까? 물어보십시오. 절대 지어내지 마십시오. - 제품 장면 (stageshow). 제품을 보여주는 모든 장면에 대해: 1단계에서 지정한 골드 예시를 열고(
<stageshow>/examples/<gold>/) stageshow의references/craft.md(절제, 서체, 간격, 아이콘),references/framing.md(크롭, 거터, 레이아웃) 및references/motion.md(스토리, 커서, 변경되는 값)을 읽습니다.theme.ts,AppWindow,cursorAt및toStage를 사용하여 Remotion에서 구축하고,references/faux-ui.md의 표를 사용하여 모든 stageshow 이동을 변환합니다. 골드의 구조와 비율을 복사하되, 제품 아이덴티티는 복사하지 마십시오. - Remotion 마크업. 장면 코드를 작성하기 전에 라우터를 통해
remotion-markup을 로드합니다. 단어 수준 자막에는remotion-captions, 실제 푸티지에는remotion-multimedia, 지도에는remotion-maps, Studio에서 속성을 노출하려면remotion-interactivity를 사용합니다. 이 규칙을 따릅니다. - 사운드. 동일한 비트 번호로
cues.ts에 큐를 작성하고,scripts/score.mts에서 편곡을 설정한 후npm run score를 실행합니다. 세부 사항:references/sound.md. - 데일리.
npm run stills는 컷당 하나의 콘택트 시트를 렌더링합니다(각 장면이 도착한 후, 중간, 떠나기 전, 그리고 프레임 0). PNG를 열고 검토합니다. stageshow의 리뷰 관점(references/review.md)으로: 눈이 가장 먼저 닿는 곳은 어디인가, 그것이 결과인가, 상자에 갇혀 있거나, 평평하거나, 비어 있는 것이 있는가? 수정하고 반복합니다. 절대 모션 감소 설정이 켜진 컴퓨터의 브라우저에서 모션을 판단하지 마십시오. - 게이트 및 렌더.
npm run lint, 그런 다음npm run audit. 모든 FAIL을 수정하고, 모든 WARN을 검토하십시오. 그런 다음npm run finish(렌더 옵션: 라우터를 통한remotion-render) 및 다시npm run audit: 각 MP4의 음량, 크기 및 fps를 측정합니다. 규칙 1, 3, 4 및 7은 사람의 눈이 필요합니다:references/checklist.md. - 검토 및 전달. 아무것도 떠나기 전에 시트와 브리핑을 깨끗한 컨텍스트의 리뷰어에게 전달합니다. MP4, 시트, 남은 WARN 및 확인되지 않은 항목을 전달합니다. 형식 및 명명:
references/delivery.md.
적신호, 멈추고 수정
- 10단어가 넘는 캡션, 또는 시청자가 동시에 읽어야 하는 두 개의 캡션이 화면에 있는 경우.
- 제품이 직접 보여줌으로써 설명할 수 있는 내용을 설명하는 문장.
- 제품의 스크린샷, 실제 고객 이름, 실제 티켓 번호, 우리 것이 아닌 로고.
- stageshow
Act,a.click()또는setTimeout이 비트로 변환되지 않고 장면에 붙여넣기된 경우. - 명명된 stageshow 골드 예시 없이 제작된 제품 장면.
- 장면 내부에 입력된 16진수 값 또는 글꼴 크기.
- 시작하거나 멈추는 것에 이징이 없는
interpolate(). 모든 것이 함께 페이드 인되는 경우. Soundtrack.tsx에 입력된 프레임 번호, 또는 두 비트 사이에 떨어지는 사운드.- 두 개의 어두운 창 사이의 크로스페이드(회색 안개).
- 16:9를 크롭하여 만든 9:16 컷.
- 빈 프레임 또는 반쯤 그려진 프레임 0.
- "Studio에서는 괜찮아 보여요": 콘택트 시트와 감사 전에는 아무것도 완료되지 않은 것입니다.