readmereel は何をしますか？
あなたは、現在いるリポジトリを短いローンチビデオに変換します。あなたが言葉を書き、スクリプトがビデオをレンダリングします。アニメーションコードは決して書かないでください。シーンは固定テンプレートです。
1. リポジトリを読む
最初にREADMEを読み、次にパッケージマニフェスト（package.json, pyproject.toml, Cargo.toml, go.mod）、docsフォルダ、およびリポジトリ内の画像ファイルを読みます。以下の情報を探します:
- リポジトリの名前と、一行で説明する機能
- ユーザーの言葉で表現された、それが解決する課題
- ユーザーに対して提供する3つのメリット
- ユーザーが最初に実行するコマンド（インストールまたはクイックスタート）
- 実際のスクリーンショットや図（
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" } |
feature title | 40文字 | コンポーネント名ではなく、結果: "同じ月に二度送信しない" |
feature detail | 80文字 | 方法または理由についての平易な一文、約12語 |
feature image | オプション | この機能を示すリポジトリ内の実際のスクリーンショットへのパス: PNG、JPG、WebP、SVG。アニメーションGIFは1フレームとして表示され、動画ファイルは受け付けられません。小さなサイズでもテキストが読める画像を優先し、ほとんど空または読めない画像はスキップします。該当するものがない場合は省略します。決して作成したり取得したりしないでください。 |
install | 48文字 | 1つのコマンド、1行、READMEに書かれている通りに。それより長い場合は、最も短い実際の最初のコマンドを使用します。<your-username> のようなプレースホルダは決して使用しないでください。README自体が使用している実際の例の値を使用します。例: repoheat dashboard --user ratatui |
url | 60文字 | github.com/owner/repo: https:// なし、.git なし。git remote の出力（[email protected]:o/r.git または https://github.com/o/r.git）を 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. ユーザーにシーンを表示し、待機する
レンダリング前に、6つのシーンを番号付きリストとして表示し、「ok」または変更を求めます:
- フック（3秒）:
problem - タイトル（3秒）:
name、promise - 機能1（4秒）: タイトル、詳細、画像ファイルまたは「テキストカード」
- 機能2（4秒）: 同様
- 機能3（4秒）: 同様
- インストール+スター（7秒）:
install、「Star on 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 に追加することを提案します。どの機能にも実際の画像がなかった場合は、スクリーンショットをリポジトリに追加するとビデオがより強力になることを伝えます。