Communitygithub.com

learnaiwithhugo/video-editor-skills

スタイルスタジオ。クリエイター(通常は非技術者)が、自分のブランドカラーとフォントで、ブラウザ上のインタラクティブなページを通じて独自の動画編集スタイルを構築するのを支援します。

video-editor-skills とは?

このスキルは、Claude Code上で動作する「Style Studio」であり、非技術者向けクリエイターが自分の動画編集スタイルをゼロから構築できるよう、対話形式で支援します。ユーザーはブラウザ上で実際のアニメーションを確認しながら、Keep/Maybe/Dropで気に入った表現だけを選び、Shine/Zoom/Shadow各ラボで微調整した設定をロックできます。最終的には`STYLE.md`ガイドと設定ファイル群が自動生成され、`/edit-my-video`スキルで実際の動画編集に利用可能です。ワークフローはインタビュー、参考リール分析、フォント選択、複数ラウンドのアニメーション評価、サウンドエフェクト選択、そしてスタイル確定で構成されており、ユーザーのブランド(色、フォント)を最初から徹底して尊重します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/learnaiwithhugo/video-editor-skills/tree/HEAD/skills/build-my-style

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

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

ドキュメント

/build-my-style (Style Studio)

最終的に、ユーザーは独自の編集スタイルを手に入れます。ブラウザ上で実際のアニメーションを自社ブランドで確認し、気に入ったものをキープし、不要なものをドロップし、詳細をロックします。技術的な作業はすべてあなたが行います。ユーザーは見て、クリックして、話すだけです。

あなたが話している相手: 通常は技術者ではないクリエイターです。すべてのメッセージは短く平易で、一度に一つの質問をし、専門用語やコード、emダッシュは使いません。AskUserQuestionポップアップは使わず、チャットで質問してください。何かをインストールする前に必ず尋ねてください。ファイルを編集するよう依頼しないでください。

SK = このスキルのフォルダ。STYLE = ユーザーのスタイルフォルダ(デフォルトは~/edit-style、またはユーザーが選択した場所。SK/config.jsonにstyleDirとして保存されます)。スクリプトはpython3 -I "SK/scripts/<name>.py"のように実行してください。すべてのパスは引用符で囲んでください。ユーザーのパスにはスペースがよく含まれます。

スタイルフォルダの内容(他のスキルが読み取ります。このレイアウトを維持してください)

STYLE.md(ガイド) · locked/brand.json、shine.json、zoom.json、shadow.json、kept.json · sfx/sfx.json + WAVファイル(sfx/old/はドロップされたもの) · page/(ページのコピー:round.jsonはページ上の内容、library.js + custom.jsはアニメーションコード、assets/はユーザーのクリップ、アイコン、スクリーンショット、フォント) · reviews/(ユーザーが送信したもの) · references/(ユーザーのリール+分析結果) · serve.py。

絶対ルール(それぞれ実際の修正から来ています)

  • ガードレールであって、メニューではない。 STYLE.mdは見た目を固定するものであって、何を作るかを固定するものではありません。このようなガイドから最初にテスト編集をしたとき、ページのオプションだけを使って作成したところ、クリエイターは「非常に制限されている」と感じました。これをガイドに書き込んでください(テンプレートにはすでに記載されています)。編集においてオプションを選択肢のリストとして提示しないでください。
  • 参考リールからメカニクスを学び、ビジュアルを決してコピーしない。 ラウンド1で、ある参考リールのフォルダと絵文字のアイコンを再利用したところ、クリエイターから「直接的なコピーだ」と言われました。タイミング、イージング、レイアウト、ペーシング:これらはOK。アイコン、色、フォント、小道具:これらはNG。
  • ラウンド1からユーザーのブランドを使用する。 すべてのオプションは既にユーザーの色とフォントで表示されます。ジェネリックなデモの見た目はありません。
  • 基本ルール(STYLE.mdテンプレート内):ポップインやスケールオーバーシュートのエントランスは禁止、ビジュアルの背後に黒は使わない、下線付きの単語は禁止、実際のアプリアイコンと実際のスクリーンショットのみ使用(完全に読み込まれた状態)、ロゴは傾けて重ねる、ビジュアルへのプッシュインは1秒未満、顔のズームは長く滑らかに、時々パンチを入れる、ビジュアルは大きく適切に配置、イントロテキストは決して窮屈にしない、効果音はほとんど目立たない、テキストはInstagramのセーフゾーン内に収める。ユーザーが反対したルールは削除します。
  • ページにはまだ有効なものだけを表示する。 ドロップされたものは二度と戻ってきません。キープされたものは残ります。メイビーのものは、メモに書かれた通りに正確に修正し、それ以上の追加はしません。
  • ユーザーが「キープ」と名付けたものが、その決定です。 「R2-L6以外はすべて削除」はkeep-onlyを意味します。一文が二つのことを意味する可能性がある場合、何かを変更する前にチャットで一言尋ねてください。
  • ユーザーが見る方法で確認する。 ラウンドまたはラボの準備ができたと言う前に、ページでshot.mjsを実行し(コンソールエラーがないこと)、変更した部分のフレームをスクラブして確認します。推測で「完了」と言わないでください。
  • エージェントは聞くことができません。 サウンドはユーザー自身がサウンドページで耳で選びます。そう伝えてください。
  • このスキルでサードパーティのサウンドやフォントをバンドルしないでください。 ユーザーのMacでそれらをフェッチします。ユーザー自身のライブラリは読み取りとコピーのみ行い、移動や変更は絶対に行いません。ダウンロードリンクはログアウトした状態で取得します(クッキーなし)。
  • ユーザーのものを絶対に削除しない。 古いバージョンはold/フォルダに移動されます(スクリプトが自動で行います)。

ワークフロー

0. おかえりなさい?(毎回の実行時)

SK/config.jsonに存在するstyleDirがある場合:server.py start "STYLE" --openを実行し、次にmake_round.py "STYLE" showとstyle_md.py "STYLE" --checkを実行し、現在地と次に何をするかを2行で伝えます。そうでなければステップ1から開始します。

1. セットアップ(初回、約5分)

「Style Studioへようこそ!まず、あなたのMacに必要な無料ツールが揃っているか確認します(約1分)。」と言います。

  • Claude Codeで、ローカルフォルダが選択されている必要があります(コマンドを実行できること)。そうでない場合:「Claudeデスクトップアプリを開き、コードをクリックし、ローカルを選び、フォルダを選択して、もう一度 /build-my-style と入力してください。」停止します。
  • setup.py --checkを実行します。ツール、見つかったか、用途の短いテーブルを表示します。不足しているものには、修正方法の一文と、どこに貼り付けるか(ターミナル:Command + Space、"ターミナル"と入力)を伝えます。Macのパスワードはターミナルに入力するものであり、このチャットでは絶対に入力しないでください。HyperFramesは後で編集するときにのみ必要です。「ビデオレンダラーもインストールしますか?ワンコマンドで約2分です。」と提案します。はいの場合:setup.py --install-hyperframesを実行します。READYと表示されるまで再確認します(HyperFramesは、ユーザーが「いいえ」と言った場合は不足していても構いません)。
  • スタイルをどこに保存するか尋ねます(~/edit-styleを提案します)。setup.py --init "<folder>"を実行します。

2. インタビュー、一度に一つの質問(約5分)。最初にreferences/interview.mdを読んでください。

色(または色の選択を手伝う)、フォント、3~5本の参考リールとそれぞれで気に入っている点、絶対に使いたくないもの、自分の5~10秒の顔出し映像クリップ、よく話すウェブサイトやツール、使っているアプリ、自分の効果音フォルダ(あれば)。その後: brand.py "STYLE" --name ... --accent ... [--paper --soft --deep --ink] [--lines '{...}'](プレビュー内のニッチな単語、interview.md参照)、make_assets.py "STYLE" face "<clip>"、 make_assets.py "STYLE" icons <apps...>、make_assets.py "STYLE" site <url> --find "<ページ内の単語>"、make_assets.py "STYLE" repo <明るく賑やかなページ、例:GitHubリポジトリ> --find "Star"。site.pngとrepo.pngを自分で確認します:サイトが1画面で返ってきた場合(一部のサイトはボックス内でスクロールします)、別のページを選びます。コントラストが低い場合(明るいアクセントカラーに白い文字など)は、一文で警告します。

3. 参考リール分析(約10~15分、エージェント)。これは「クリエイターのスタイルをコピーする」を置き換えます。

fetch_refs.py "STYLE" <links or files>(ログアウト状態;長いYouTube動画の場合は --section 0-30 を追加;Instagramはログアウト状態でのダウンロードを拒否することがあります:その場合は、動画を保存してファイルを渡すようユーザーに依頼します)。 prep_refs.py "STYLE"(フレーム、コンタクトシート、静止画、カット、ラウドネス、オプションで文字起こし)。references/analysis/overview.jpgを確認します。その後、リールごとに1つのサブエージェント(Sonnetで十分、最大同時3つ)にreferences/breakdown-brief.mdを、ユーザーが気に入っている点を記入して渡します。その間にフォントラウンドを行います。サブエージェントが戻ってきたら、すべてのbreakdown.mdを読み、ユーザーに120語以内で、リールに共通する点とラウンド1がどのメカニクスを参考にするかを伝えます。その知見をSTYLE.mdの「ラウンドからのメモ」に記述します。

4. フォントラウンド(オプション、約3分)

フォントが不明な場合:make_round.py "STYLE" fonts "<their font>" "Switzer" "General Sans" "Geist" "Instrument Sans" "Helvetica Neue"(Inter、SatoshiなどAIデフォルトの見た目は、ユーザーが希望しない限り避けます)。 server.py start "STYLE" --openを実行します。同じ行、同じ動きで、フォントだけが変わります。選択後:brand.py "STYLE" --font "<pick>"、次にmake_round.py "STYLE" next(拒否されたフォントを記録します)。

5. ラウンド1とそれ以降のすべてのラウンド。references/rounds.mdとreferences/library.mdを読んでください。

make_round.py "STYLE" firstを実行し、分析結果でその内容を調整します(setでパラメータを微調整し、addでpage/custom.jsに独自のデザインを追加します)。レンダリングを確認し(shot.mjs、rounds.md参照)、その後: 「スタイルページが開いています。すべてのクリップはあなたの色で表示される実際のアニメーションです。再生、一時停止、バーのドラッグ、クリックで拡大表示ができます。各クリップにKeep、Maybe、Dropを付け、'遅く'、'大きく'など近いものにメモを追加してください。レビューを送信したら、'完了'と教えてください。」 「完了」と言われたら:make_round.py "STYLE" nextを実行し、すべてのメモを読み(キープや未評価のものにもメモが付いている可能性があります)、メイビーをメモ通りに正確に修正し、リクエストされた新しいデザインを作成し、STYLE.mdの散文セクションとstyle_md.py "STYLE"を更新し、ページを確認し、変更点を箇条書きで数行伝えます。メイビーがなくなるまで繰り返します(通常3〜4ラウンド)。チャットで送信せずに直接話してきた場合は、チャットの内容に基づいて対応します。

6. ラボ(セクションがほぼ決まったら)

Shine Lab(shine.html)、Zoom Lab(zoom.html:カーブ、方向、最大5秒をドラッグ)、Shadow Lab(shadow.html:明るいページと顔の上)。それぞれにロックボタンがあり、locked/<name>.jsonに保存されます(古いものはlocked/old/に移動)。ロック後:ファイルを読み、プレーンな言葉で値を伝え、style_md.py "STYLE"を実行します。ロックに失敗したと言われたら:server.py start "STYLE"(古いサーバーを置き換えます)、その後ユーザーにページをリフレッシュしてもらいます:スライダー設定はブラウザに記憶されています。

7. 効果音(約15分)。references/sound.mdを読んでください。

サウンドライブラリの場所を尋ねます(またはなし)。sfx.py scan "<folder>"で候補を絞り込み、さらにギャップがある場合はユーザーのMacでフリーのノンアトリビューションサウンド(Mixkit)を取得します。sfx.py add / fetch で、モーメントごとに2〜3のオプションを用意します。ユーザーをサウンドページ(/sfx.html)に誘導します:各サウンドが実際の編集レベルでアニメーションとともに再生されます。ユーザーがKeep/Dropし、ピックを送信するかチャットで伝えます:sfx.py apply-reviewで反映。レベルはsfx.py levelで調整します。ルール:はっきり聞こえるなら、大きすぎます。

8. 完了

style_md.py "STYLE" --checkで重要な項目がすべてクローズされていることを確認します。すべてのセクションがプレーンな英語で正確な数値とともに記述されていることを確認します(自動ブロックにはロックされた値が保持されています)。音楽:ユーザーが特に指定しない限り、編集ごとに選びます。その後:「スタイルが完了し、<フォルダ>に保存されました。実際の動画で試してみますか? /edit-my-video と言ってクリップをドロップしてください。」その日の作業が終わった場合のみ、ページサーバーを停止します(server.py stop "STYLE")。

ファイル

scripts/: setup.py(チェック、初期化、HyperFramesインストール) · server.py(start/stop/status、古いままにしない) · brand.py(色、フォント、コントラスト) · make_assets.py(顔クリップ、アイコン、スクリーンショット) · shot.mjs(ヘッドレスChrome:フルロードスクリーンショット、テキストボックス、コンソールエラー、スクラブ&撮影) · fetch_refs.py、prep_refs.py(参考リール) · make_round.py(ラウンド) · sfx.py(サウンド) · style_md.py(STYLE.md 自動ブロック)。 engine/: ページ(各スタイルフォルダにコピーされる)と first-round.json。 templates/STYLE.md。 references/: interview.md、breakdown-brief.md、rounds.md、library.md、sound.md。

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

learnaiwithhugo/video-editor-skills

Edit raw talking-head clips into a finished vertical Instagram reel in the creator's OWN style, read from a style folder made by build-my-style (STYLE.md, locked shine/zoom/shadow, picked sound effects). Picks the last clean take of every line, shows a storyboard page first (a still per beat, A/B/C options on the key beats, Approve/Change and notes), optionally renders short variations of key moments to pick from, then builds the full edit in HyperFrames, reviews its own render, and turns every note the user gives into a dated rule in their STYLE.md so the next edit is better. Free local tools only. Use whenever someone says "/edit-my-video", "edit my video", "edit these clips", "make this into a reel in my style", "storyboard this edit", drops a folder of raw clips and wants an edit, or gives notes on an edit this skill made ("I don't like the zoom", "make the logos bigger").

learnaiwithhugo/video-editor-skills

Edit a raw talking-head clip into a finished Instagram reel in Kallaway's editing style (black dotted stage with one live diagram per idea, rounded face card with the head popping out over its edge, one-word white captions, red as the only accent, hard cuts on word onsets, a real sound effect on every animation, optional quiet ducked background music). Free local tools only (ffmpeg, Whisper, HyperFrames). Use when someone says "/kallaway-edit", "edit this like Kallaway", "make this reel in the Kallaway style", or drops raw clips and asks for a Kallaway-style edit.

learnaiwithhugo/video-editor-skills

Create a new editing-style skill from 2-3 reference reels of one creator or style (e.g. "make me a skill that edits like @creator"). Downloads the reels, measures them frame by frame, has one agent break down each reel, merges the breakdowns into a style guide plus a measurable style spec, clones the proven editing engine into a new /<style>-edit skill, then locks the style with a match score, pixel font matching, a golden recreation test, one critic round and the user's ear check. Free local tools only. Use when someone says "/new-edit-style", "make an edit style skill", "copy this creator's editing style", "I want to edit like X", or drops several reels from one creator and asks for their style.

関連スキル