Communitygithub.com

mohammadshoaib-786786/video-editor

短尺の縦型説明リール(Instagram Reels / TikTok / Shorts、9:16)を「Pixel Crew」スタイルで作成します。ピクセルロボットのAI社員、分厚いオフセットシャドウカード、ワードシンクされたキャプション、ボイスオーバー、チップチューンBGMと効果音をローカルでMP4にレンダリングします。ユーザーがAIエージェントや自動化、チームやワークフロー、ツールや手順のリストについてのリールやショート、TikTok、バイラル動画を依頼した場合、または「あの配送チームのリールみたいなやつ」を求めた場合に使用します。

video-editor とは?

このスキルは、AIエージェント、自動化、チームワークフローなどをテーマにした、短尺縦型説明リール(Instagram Reels、TikTok、Shorts向け9:16)を「Pixel Crew」スタイルでローカル生成するためのものです。スクリプト作成から、シーンのアニメーション、ボイスオーバー、BGM、キャプションの同期、最終的なMP4レンダリングまでを一貫して行います。具体的には、まずhook、ビート(同様の構造を複数繰り返し)、payoff、CTAを含むスクリプトJSONを生成し、次に新規プロジェクトをスキャフォールド、各シーンのHTML/CSS/JSを記述、最後にビルドスクリプトでレンダリングと品質チェックを実行します。このスキルは特に、AIエージェントや自動化ツールを紹介するバイラル動画を作成したい開発者やマーケターに有用で、ローカル環境で完結するためプライバシーやカスタマイズ性にも優れています。対応プラットフォームはClaude CodeやCursorなどのAIエージェント、およびNode.jsが動作する開発環境です。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/mohammadshoaib-786786/video-editor/tree/HEAD/.claude/skills/pixel-crew-reel

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

Pixel Crew リール

コピー元のサンプルは projects/ai-delivery-team です(なぜ機能するかは docs/REFERENCE-BREAKDOWN.md を参照)。マップと過去に問題になったルールについては CLAUDE.md を読んでください。

1 · スクリプトを先に(script.json)

機能する構成:フック(5秒以内) → N個の同一ビート(各約3.5秒) → ペイオフ → キーワードCTA。

  • フック:驚くような数字とシステム全体を1フレームに(「従業員7名、全員人間じゃない」)。
  • 各ビート:「役割は a、b、c を行います」 — アニメーション化できる3つの具体的な名詞。
  • ペイオフ:人間の唯一の仕事(承認、決定、レビュー)。
  • CTA:「コメントでキーワードを送っていただければ〜をお送りします」(キーワードは brand.keyword に)。
  • lines は2〜4単語のキャプションフレーズで記述します。各行が1つのキャプションになります。
  • 合計時間は30〜45秒を目指します。音声速度1.3〜1.4でKokoroは約3.5語/秒になります。
  • ブランドハンドル、承認者名、キーワードが不明な場合はユーザーに尋ねます。それ以外は @yourhandle プレースホルダーをそのままにして、その旨を伝えます。

2 · スキャフォールド

node scripts/new.mjs reel <名前>
python3 scripts/voice.py projects/<名前>          # 最初にタイミング、次にそれに合わせてデザイン

3 · シーン(index.html + style.css + scenes.js)

  • スクリプトの各シーンに1つの <section class="scene"> を同じ順序で配置します(R.cuts() がそれらを TIMING.scenes にマッピングします)。
  • 各従業員シーン:.head 内に .step[data-step][data-label] + .title(980px以内に収まるサイズ)、次にその仕事を表現する1つまたは2つの .card。
  • すべてのシーンに独自のアクセントカラー(--accent: var(--rN))を与え、背景(is-paper、is-peri、is-lav、is-cobalt)を交互に設定します。
  • すべての話された名詞をアニメーション化:R.pop(el, R.word(scene, line, "noun"))、R.tick、R.type、R.grow、スタンプには R.slam。
  • data-icon、data-bot、data-burst、data-face、data-presenter プレースホルダーを使用します。Sprites.hydrate() がそれらを埋めます。
  • 最後に R.captions(...) と R.register() を記述します。インラインの window.__timelines["main"] 行を保持します。

4 · 確認、そしてレンダリング

node scripts/build.mjs projects/<名前> --no-voice --no-render --snap <シーンごとに1回>
# projects/<名前>/build/snaps/contact-sheet*.jpg を確認、修正、繰り返し
node scripts/hf.mjs lint projects/<名前>
node scripts/build.mjs projects/<名前> --no-voice      # → renders/<名前>.mp4

MP4自体を検証:ffmpeg -i renders/<名前>.mp4 -vf fps=1,scale=180:-1,tile=8x5 sheet.jpg および -af ebur128(目標 ≈ -14 LUFS)。以下の点を確認:空白の最初のフレーム、テキストが端に触れていないか、要素がInstagramのUIの下に隠れていないか、キャプションの同期が取れているか。

スワップ

  • 音声:script.json → voice.voice(am_michael、am_puck、am_fenrir、af_heart、bf_emma …)、または独自のものを build/voice.wav に録音して voice.py --from-wav を実行。
  • 音楽:build/music-override.wav にトラックをドロップ。
  • ホスト:所有者のキャラクター(kit/brand.js、kit/avatars/)が [data-presenter] と [data-face] によって自動的に使用されます。画像ホストのサイズは幅で指定(.is-img)、腰から上です。特に依頼がない限り、別のキャラクターを描かないでください。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル