readmereel은(는) 무엇을 하나요?
당신이 위치한 저장소를 짧은 런치 비디오로 변환합니다. 당신이 문구를 작성하면 스크립트가 비디오를 렌더링합니다. 애니메이션 코드는 절대 작성하지 마세요. 모든 장면은 고정된 템플릿입니다.
1. 저장소 읽기
먼저 README를 읽고, 그다음 패키지 매니페스트(package.json, pyproject.toml, Cargo.toml, go.mod), docs 폴더, 저장소 내 이미지 파일을 읽으세요. 다음을 찾으세요:
- 이름과 한 줄 설명
- 사용자의 말로 표현된, 제거하는 불편함
- 사용자에게 제공하는 세 가지 기능
- 사용자가 처음 실행하는 명령어(설치 또는 빠른 시작)
- 실제 스크린샷 또는 다이어그램(
docs/,assets/,.github/,images/,screenshots/, README 내 저장소 파일을 가리키는 이미지 링크) - 로고(PNG 또는 SVG)와 브랜드 색상(로고, README 배지 또는 CSS에서 추출)
- GitHub URL(
git remote get-url origin으로 확인) 및gh명령어가 작동할 경우 별 개수:gh repo view --json stargazerCount -q .stargazerCount
2. launch-video/story.json 작성
저장소 루트에 launch-video/ 폴더를 만들고 launch-video/story.json을 작성하세요. 경로는 저장소 루트를 기준으로 합니다. 스크립트가 적용하는 하드 제한이 있는 필드:
| 필드 | 제한 | 작성 방법 |
|---|---|---|
name | 24자 | README에 정확히 적힌 제품 이름 |
problem | 70자 | 제품이 아닌 사용자의 불편함: "모든 AI 발표 자료가 똑같아 보여요". 시청자가 읽을 수 있도록 약 6-9단어 목표 |
promise | 60자 | 사용자가 얻는 결과: "사람이 디자인한 것 같은 슬라이드". 약 6-9단어 |
features | 정확히 3개 | 각각 { "title", "detail", "image" } |
기능 title | 40자 | 구성 요소 이름이 아닌 결과: "한 달에 두 번 보내지 않음" |
기능 detail | 80자 | 방법 또는 이유에 대한 한 문장, 약 12단어 |
기능 image | 선택 사항 | 저장소 내 해당 기능을 보여주는 실제 스크린샷 경로: PNG, JPG, WebP 또는 SVG. 애니메이션 GIF는 단일 프레임으로 표시되며 비디오 파일은 허용되지 않습니다. 작은 크기에서도 텍스트를 읽을 수 있는 이미지를 선호하고, 내용이 거의 없거나 읽을 수 없는 이미지는 건너뜁니다. 해당하는 이미지가 없으면 생략합니다. 절대 만들거나 가져오지 마세요. |
install | 48자 | 한 줄 명령어, README에 정확히 적힌 대로; 더 길면 가장 짧은 실제 첫 명령어를 사용하세요. <your-username> 같은 플레이스홀더는 절대 사용하지 마세요. README 자체가 사용하는 실제 예시 값을 사용하세요(예: repoheat dashboard --user ratatui) |
url | 60자 | github.com/owner/repo: https://나 .git 없음. [email protected]:o/r.git 또는 https://github.com/o/r.git 같은 git remote 출력을 github.com/o/r로 변환 |
stars | 별 개수 또는 null. 10개 이상일 때만 표시 | |
logo | 선택 사항 | PNG 또는 SVG 로고 경로 |
accent | #0f766e 같은 16진수 색상; 브랜드 색상, 없으면 생략 | |
music | 선택 사항 | 사용자가 오디오 파일(mp3, m4a, wav 또는 ogg)을 제공한 경우에만 |
endCard | 생략(true). 사용자가 "made with readmereel" 문구를 원하지 않는 경우에만 false로 설정 |
예시:
{
"name": "agencyrecap",
"problem": "월별 고객 보고서를 수동으로 작성하고 전송",
"promise": "월별 고객 보고서가 스스로 전송됨",
"features": [
{ "title": "매월 브랜드 PDF", "detail": "선택한 날짜에 각 고객에게 로고와 색상으로 이메일 전송", "image": "docs/images/report-page-2.png" },
{ "title": "대시보드 하나", "detail": "발송된 보고서를 확인하고 한 번의 클릭으로 재전송", "image": "docs/images/dashboard.png" },
{ "title": "두 번 보내지 않음", "detail": "Google 또는 이메일 실패 시 보류 후 재시도, 그다음 사용자에게 알림" }
],
"install": "docker compose up -d",
"url": "github.com/taufiquebuilds/agencyrecap",
"stars": null,
"accent": "#0f766e"
}
이 표에 없는 필드는 거부되므로 오타가 걸러집니다. 복사 규칙: 짧은 단어, 과장된 표현 금지("혁신적인", "강력한", "완벽한", "새로운 차원"), 이모지 금지, 느낌표 금지, 문장형, 숫자는 숫자로 표기. 모든 주장은 저장소가 보여주는 내용이어야 합니다.
3. 사용자에게 장면을 보여주고 대기
렌더링 전에 여섯 장면을 번호 목록으로 표시하고 "ok" 또는 변경을 요청하세요:
- 훅(3초):
problem - 제목(3초):
name,promise - 기능 1(4초): title, detail, 이미지 파일 또는 "텍스트 카드"
- 기능 2(4초): 동일
- 기능 3(4초): 동일
- 설치 + 별(7초):
install, "GitHub에서 별표",url
4. 렌더링
scripts/render.mjs는 이 SKILL.md가 있는 폴더 안에 있습니다. 절대 경로를 알아내고 저장소 루트에서 다음 명령어를 실행하세요:
node <이-스킬-폴더의-절대-경로>/scripts/render.mjs launch-video/story.json
Node 22+와 ffmpeg가 필요하며, 누락된 경우 설치 방법을 출력합니다. 실행 시마다 인터넷 접속이 필요합니다: npm(HyperFrames), 일회성 Chrome 다운로드, Google Fonts 및 GSAP CDN. 렌더링은 3-10분 소요되므로 최소 15분의 타임아웃을 설정하거나 백그라운드에서 실행하고 완료될 때까지 기다리세요. 샌드박스가 네트워크를 차단하면 사용자에게 허용을 요청하거나 위의 정확한 명령어를 알려주고 직접 실행하도록 요청하세요.
사용자가 빠른 미리보기만 원할 경우 --draft를 추가하여 더 빠르고 저품질로 렌더링하세요.
스토리 문제 또는 레이아웃 문제가 출력되면 story.json을 수정(지정된 텍스트를 줄임)하고 다시 실행하세요. 렌더링이 실패하면 launch-video/render.log의 끝부분을 읽으세요.
5. 결과 전달
사용자에게 생성된 내용을 알려주세요:
launch-video/video-16x9.mp4: README, Product Hunt, Show HN, YouTubelaunch-video/video-9x16.mp4: X, LinkedIn, Instagram Reels, TikToklaunch-video/video.gif: README 상단에로 붙여넣기launch-video/wide/및launch-video/tall/: 편집 가능한 HyperFrames 프로젝트. 실행 시마다 다시 빌드되므로 HyperFrames Studio에서 편집하기 전에 다른 곳에 복사하세요(cd launch-video/wide && npx --yes [email protected] preview)
에이전트 없이 다시 렌더링할 수 있도록 사용자에게 실행한 정확한 절대 명령어(launch-video/story.json 경로 포함)를 알려주세요. 나중에 문구를 변경하려면 story.json을 편집하고 동일한 명령어를 다시 실행하면 됩니다. launch-video/wide/, launch-video/tall/ 및 launch-video/render.log를 .gitignore에 추가할 것을 제안하세요. 어떤 기능에도 실제 이미지가 없었다면 저장소에 스크린샷을 추가하면 비디오가 더 강력해진다고 알려주세요.