Communitygithub.com

amirlehmam/amir-motion

プロダクトフィルム(ローンチ/デモ/エクスプレイナー)制作のためのハウスルール・テンプレート・審査ゲートを提供するスキル。Remotion + stageshow + best practicesを統合。

amir-motion とは?

amir-motionは、Sorenのローンチフィルムを基に構築された、プロダクトフィルム制作のための包括的なスキルです。30〜60秒のプロダクト説明動画(ローンチフィルム、デモ動画、アニメーションエクスプレイナー、ティーザー、リール)の制作を支援します。このスキルは、プロダクトUIの見せ方を管理する`stageshow`と、Remotionの使用法を管理する`remotion-best-practices`という2つのスキルを固定ステップで呼び出し、3つのスキルが1つのフィルムを形成します。 主な機能として、10の厳格なルール(制限されたテキスト量、読み取り時間の保証、UIのReact再構築、タイポグラフィ制限、カラーパレット管理、単一時計による同期、カメラのようなシーン遷移、オリジナルサウンドスコア、マルチフォーマット対応(16:9/9:16)、第三者アセットの禁止)を提供します。 ワークフローは9ステップで構成され、doctorによる環境チェック、brief作成、scaffold(テンプレート生成)、brand(テーマ設定)、product scenes(stageshow連携)、Remotion markup、sound(スコアリング)、dailies(コンタクトシートレビュー)、gate & render(リント・監査・レンダリング)、review & deliveryまでをカバーします。各ステップで赤旗となる問題(10語超のキャプション、スクリーンショットの使用、許可されていないロゴ、stageshow Actの直接埋め込みなど)を検出し、修正を促します。 Claude Code、Pi、およびその他のエージェントで利用可能で、スキルディレクトリに配置することで呼び出せます。

対応✓Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/amirlehmam/amir-motion/tree/HEAD/skills/amir-motion

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

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

ドキュメント

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 を読んでそれに従うことを意味します。

3つのスキルで1つのフィルム。 amir-motion はルール、テンプレート、サウンド、ゲートを所有します。以下の固定ステップで2つのスキルを呼び出します:

スキル所有するもの呼び出しタイミング
stageshowプロダクトUIの見え方:抑制、フレーミング、クロップ、フォーカルオブジェクト、カーソルのストーリー、ポスターフレームステップ 1, 4
remotion-best-practicesRemotionの使い方:プロジェクト、マークアップ、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(クロップではない)、FRとENは一つのコピーファイルから。フレーム0は実際のサムネイル。ミュートでも読める。テキストはフレームの80%以内。
10私たちのものでないものはない以前のクライアント、内部ツール、サードパーティブランドはコード、コピー、ファイル名、画像、メタデータのどこにも存在しない。すべてのアセットは ASSETS.md にソースを持つ。でっち上げの数字、ロゴ、推薦文は禁止。

詳細と数値:references/rules.md。由来:references/source.md。

ワークフロー

  1. Doctor. node <skill-dir>/scripts/doctor.mjs。Node (22.18+) を確認し、stageshow と Remotionスキルを公式ソースからインストール(不足している場合)。Claude Code と Pi 用にインストール;他のエージェントには --agent <id>。何かをインストールした場合はその旨を伝える:新しいスキルは次のセッションで読み込まれる;それまでは直接 SKILL.md ファイルを読む。
  2. Brief. ユーザーと一緒に BRIEF.md を記入:目標、視聴者、約束(8単語以内)、フォーマット、長さ、ブランドとそのソース、プルーフ。次にビートシート:ステップごとに一行(キャプション、プロダクトの表示内容、サウンド)。ストーリーアークと例:references/brief.md。各プロダクトシーンについて、stageshowの方法で計画:stageshow を呼び出し、シーンごとに、フォーカルオブジェクト、アクション、見返り、除外するもの、最も近いゴールド例(hero-demo, payout-flow, choreography, table-edit, loading…)を書く。ビートシートを表示し、シーンに入る前に承諾を得る(Amirが内容を決定)。
  3. Scaffold. 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 dev
    
    テンプレートはルーターの「新規プロジェクト作成」ステップを置き換えます;その「プレビューを開く」ステップ(remotion-studio)に従い、ユーザーがビルドを監視できるようにします。Windows では短いパスを使用(C:/Users/<me>/<name>-motion):ヘッドレスChromeは260文字を超えると失敗します。テンプレートのマップ:references/architecture.md。
  4. Brand. プロダクトのパレット、ディスプレイフォント、ロゴを theme.ts と public/ に配置し、それぞれのソース行を ASSETS.md に記述。stageshow の references/looks.md のように、プロダクト自身のトークンをマッピング。ブランドソースがない?尋ねること。決してでっち上げない。
  5. Product scenes (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 の動きをすべて変換。ゴールドの構造と比率をコピーするが、プロダクトのアイデンティティはコピーしない。
  6. Remotion markup. シーンコードを書く前に、ルーターを通じて remotion-markup を読み込む;remotion-captions を単語レベルの字幕に、remotion-multimedia を実際の映像に、remotion-maps を地図に、remotion-interactivity をStudioでプロパティを公開するために使用。これらのルールに従う。
  7. Sound. 同じビート番号で cues.ts にキューを書き、scripts/score.mts でアレンジを設定し、npm run score を実行。詳細:references/sound.md。
  8. Dailies. npm run stills でカットごとに1枚のコンタクトシートをレンダリング(各シーンが着地した後、その中間、離れる前、さらにフレーム0)。PNGを開いて確認、stageshow のレビュー視点(そこの references/review.md)で:目が最初にどこに留まるか、それが結果か、何かがボックス状、フラット、または空でないか。修正して繰り返す。モーションを減らしたマシンのブラウザでモーションを判断してはならない。
  9. Gate and render. 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。
  10. Review and deliver. 何かを送り出す前に、シートとブリーフをクリーンコンテキストのレビュー担当者に渡す。MP4、シート、残ったWARN、チェックされなかったものを納品。フォーマットと命名:references/delivery.md。

赤旗、停止して修正

  • 10語を超えるキャプション、または視聴者が一度に読まなければならない2つのキャプションが画面に表示されている。
  • プロダクトが実行することで示せることを説明しているセンテンス。
  • プロダクトのスクリーンショット、実際の顧客名、実際のチケット番号、私たちのものでないロゴ。
  • stageshow の Act、a.click()、setTimeout が、ビートに変換されずにシーンに貼り付けられている。
  • 名前付きのstageshowゴールド例なしで構築されたプロダクトシーン。
  • シーン内に直接入力された16進数値またはフォントサイズ。
  • 開始または停止時にイージングのない interpolate();すべてが一緒にフェードインしている。
  • Soundtrack.tsx 内に直接入力されたフレーム番号、または2つのビートの間に挟まったサウンド。
  • 2つの暗いウィンドウ間のクロスフェード(グレーの霧)。
  • 16:9をクロップして作られた9:16カット。
  • 空白または半分描かれたフレーム0。
  • 「Studioでは問題なく見える」:コンタクトシートと監査が完了するまで何も完了していない。

関連スキル